2011-12-08 16 views
1

私の生活の中でGoogle Mapsを表示することはできません。私は何時間もコードを書き直してきました。Google Maps API v3が表示されない

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 

<title>Profile</title> 
<meta property="og:title" content=""/> 
<meta property="og:type" content=""/> 
<meta property="og:url" content=""/> 
<meta property="og:image" content=""/> 
<meta property="og:site_name" content=""/> 
<meta property="fb:admins" content="USER_ID"/> 
<meta property="og:description" content=""/> 
<link rel="stylesheet" type="text/css" href="common.css"> 
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> 
<!--[if IE]> 
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> 
<style> 
    article, aside, details, figcaption, figure, footer, header, 
    hgroup, menu, nav, section { display: block; } 
</style> 
</head> 

<body> 
<div id="wrapper"> 
    <header> 
    <div id="logo"> 
    </div> 
    </header> 

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry&sensor=true"></script> 

    <div id="profile"> 

    <div id="info"> 

    </div> 


     <div class="map" id="map4" style=""></div> 

     <script type="text/javascript"> 

     var map4 = document.getElementById('map4'); 
     var map4_bounds = new google.maps.LatLngBounds(); 
     var map4_center = new google.maps.LatLng(30.27, -86); 
     var map4_geocoder = new google.maps.Geocoder(); 
     var map4_window; 
     var map4_markers = []; 
     var map4_windows = []; 
     var map4_html = []; 
     var map4_count = 0; 



     var map4_options = { 
      center: map4_center, 
      draggable: false, 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      maxZoom: 15, 
      minZoom: 10, 
      scrollwheel: false, 
      zoom: 12 
      } 

     var map4_canvas = new google.maps.Map(map4, map4_options); 
     (function() { /* Fixes a known bug with Google's API with displaying the InfoWindow(s) */ 

     new_location = false; 
      new_latitude = '30.27'; 
      new_longitude = '-86'; 

      if(new_latitude != '' && new_longitude != '') { 

      new_location = new google.maps.LatLng(new_latitude, new_longitude);       
     var marker = new google.maps.Marker({ 
      map: map4_canvas, 
      position: new_location 
     }); 


      map4_html[map4_count] = "Indianapolis, IN"; 
     map4_markers[map4_count] = marker; 
     map4_count++; 
      } 
        if(new_location) { 
        map4_canvas.setZoom(12) 
        map4_canvas.setCenter(new_location) 

       } 
      if(new_location) { 

       var html = "Indianapolis, IN"  
       if(map4_html[map4_count-1] == "" || map4_html[map4_count] == "{title}") 
        map4_html[map4_count-1] = html; 

       var infowindow = new google.maps.InfoWindow({ 
        content: html 
       }); 

       map4_windows[map4_count-1] = infowindow;     
       google.maps.event.addListener(marker, 'click', function() { 
        infowindow.open(map4_canvas, marker); 
        map4_window = infowindow; 
       }); 
      }})(); /* End bug fix */ 

     </script> 
    </div> 
</div> 
</body> 
</html> 

私はおそらく間違っている可能性がありますか?私が何を試しても、地図の領域は空白になるだけです。

答えて

6

なぜ表示されるのですか? map4 div要素のサイズは指定されておらず、コンテンツもないため、サイズは0x0です。

+0

うわー、信じられない。私はそれがそんなに簡単なものでなければならないことを知っていました。どうもありがとうございます!!! – Kurt

関連する問題