2010-04-12 4 views
3

J'ai un formulaire et je veux ajouter une option "select location".Comment ajouter Google Maps sur mon site?

Comment puis-je faire cela, et comment puis-je placer une épingle comme emplacement sélectionné?

+3

pourrions-nous voir du code? ou plus de fond? ou les deux? –

Répondre

5

Vous pouvez envisager d'utiliser le Google Maps API, comme davek already suggested.

L'exemple suivant peut vous aider à démarrer. Tout ce que vous devez faire est de changer la variable JavaScript userLocation avec l'emplacement choisi par vos utilisateurs dans le champ déroulant que vous mentionnez.

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Google Maps API Demo</title> 
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false" 
      type="text/javascript"></script> 
    </head> 
    <body onunload="GUnload()"> 

    <div id="map_canvas" style="width: 400px; height: 300px"></div> 

    <script type="text/javascript"> 

    var userLocation = 'London, UK'; 

    if (GBrowserIsCompatible()) { 
     var geocoder = new GClientGeocoder(); 
     geocoder.getLocations(userLocation, function (locations) {   
      if (locations.Placemark) 
      { 
      var north = locations.Placemark[0].ExtendedData.LatLonBox.north; 
      var south = locations.Placemark[0].ExtendedData.LatLonBox.south; 
      var east = locations.Placemark[0].ExtendedData.LatLonBox.east; 
      var west = locations.Placemark[0].ExtendedData.LatLonBox.west; 

      var bounds = new GLatLngBounds(new GLatLng(south, west), 
              new GLatLng(north, east)); 

      var map = new GMap2(document.getElementById("map_canvas")); 

      map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds)); 
      map.addOverlay(new GMarker(bounds.getCenter())); 
      } 
     }); 
    } 
    </script> 
    </body> 
</html> 

L'exemple ci-dessus rendrait une carte comme celle ci-dessous:

Render google map in based on selected location

La carte ne sera pas affiché si le Google Client-side Geocoder ne peut pas retreive les coordonnées de l'adresse.

2

Consultez le Google Maps API. Il y a beaucoup d'informations et plusieurs exemples: sans en savoir plus sur votre environnement/vos exigences, il est difficile d'être plus précis.

Questions connexes