1

を使用してウェブサイトに Google マップを埋め込もうとしています。google API取得しAPI keyて次の jquery を作成しました。

function LoadMap(){

                $.getScript("http://maps.googleapis.com/maps/api/js?key=AIzaSyChZeTZ-DzMW-45IUBXUSuBha9MWEiXXtI&sensor=true", function () {
                   var myOptions = {
                        zoom: 8,
                        center: new google.maps.LatLng(-34.397, 150.644),
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    };
                    var map = new google.maps.Map(document.getElementById("id"), myOptions);
                });
}

しかし、これは指定された id の div にマップをロードしていません。誰か助けてください。

4

3 に答える 3

1

ここに良いプロジェクトがありますhttp://hpneo.github.com/gmaps/

new GMaps({
  div: '#map',
  lat: -12.043333,
  lng: -77.028333
});
于 2012-06-13T12:48:50.083 に答える
1

これを試して ：）

<!DOCTYPE html>  
<html>  
<head>  
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>  
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />  
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>  
<script type="text/javascript"> 
// Initiate map 
function initialize(data) { 
  // Make position for center map 
  var myLatLng = new google.maps.LatLng(data.lng, data.lat); 

  // Map options  
  var myOptions = { 
    zoom: 10, 
    center: myLatLng, 
    mapTypeId: google.maps.MapTypeId.HYBRID 
  }; 

  // Initiate map 
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

  // Info window element 
  infowindow = new google.maps.InfoWindow(); 

  // Set pin 
  setPin(data); 
} 
// Show position 
function setPin(data) { 
  var pinLatLng = new google.maps.LatLng(data.lng, data.lat); 
  var pinMarker = new google.maps.Marker({ 
    position: pinLatLng, 
    map: map, 
    data: data 
  }); 

  // Listen for click event  
  google.maps.event.addListener(pinMarker, 'click', function() { 
    map.setCenter(new google.maps.LatLng(pinMarker.position.lat(), pinMarker.position.lng())); 
    map.setZoom(18); 
    onItemClick(event, pinMarker); 
  }); 
} 
// Info window trigger function 
function onItemClick(event, pin) { 
  // Create content  
  var contentString = pin.data.text + "<br /><br /><hr />Coordinate: " + pin.data.lng +"," + pin.data.lat; 

  // Replace our Info Window's content and position 
  infowindow.setContent(contentString); 
  infowindow.setPosition(pin.position); 
  infowindow.open(map) 
} 
</script>  
</head>  
<body onload="initialize({lat:-3.19332,lng:55.952366,text:'<h2>Edinburgh</h2><i>Nice city!</i>'})"> 
  <div id="map_canvas">  
</div>  
</body>  
</html>
于 2012-06-13T18:31:50.443 に答える
0

これを見てください: https://developers.google.com/maps/documentation/javascript/examples/?hl=en-EN

"KEY" は GMaps V3 で廃止されました。幸運を！

于 2012-06-13T12:51:32.057 に答える