2012-06-13 3 views
1

Je suis en train d'intégrer la carte google sur mon site en utilisant google API, j'ai obtenu un API key et a écrit le jquery suivant:plongement Google map dans le site

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); 
       }); 
} 

Mais ce ne se charge pas une carte dans div de donnée Est-ce que quelqu'un peut m'aider s'il vous plaît?

Répondre

1

Try this :)

<!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> 
1

est ici bon projet http://hpneo.github.com/gmaps/

new GMaps({ 
    div: '#map', 
    lat: -12.043333, 
    lng: -77.028333 
}); 
+0

Merci pour la réponse, mais gmap.js ne fonctionne pas –

+0

essayer celui-ci https://gist.github.com/828536 – deerua