How do I add Google Maps on my site?

前端未结

关注

 2  890

花落未央

I have a form and I want to add a \"select location\" option.

How can I do this, and how can I place a pin as the selected location?

相关标签:

2条回答

终归单人心

2021-01-20 19:03

Check out the Google Maps API. There's lots of information there and several examples:without knowing more about your environment/requirements it is difficult to be more specific.

0 讨论(0)
发布评论:

提交评论
- 加载中...

予麋鹿

2021-01-20 19:11

You may want to consider using the Google Maps API, as davek already suggested.

The following example may help you getting started. All you would need to do is to change the JavaScript variable userLocation with the location chosen by your users from the drop-down field you mention.

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

The above example would render a map like the one below:

Render google map in based on selected location

The map will not show if the Google Client-side Geocoder cannot retreive the coordinates from the address.

0 讨论(0)