如何使用地方网址创建谷歌地图标记

Question

I want to know if it is possible to create markers in google maps using a place URL like https://www.google.lk/maps/place/London instead of using latitude and longitude coordinates. I'm using the following code to create markers.

function initialize() {
  var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
  var mapOptions = {
    zoom: 4,
    center: myLatlng
  }
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'Hello World!'
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

You could utilize Places Library for that purpose, in particular textSearch method of google.maps.places.PlacesService object.

Complete example

 function initialize() { var mapOptions = { mapTypeId: google.maps.MapTypeId.ROADMAP, zoom: 15 } var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); var request = { query: 'London' }; var service = new google.maps.places.PlacesService(map); service.textSearch(request, callback); function callback(results, status) { if (status == google.maps.places.PlacesServiceStatus.OK) { var marker = new google.maps.Marker({ map: map, place: { placeId: results[0].place_id, location: results[0].geometry.location } }); map.setCenter(results[0].geometry.location); } } } google.maps.event.addDomListener(window, 'load', initialize); 

  html, body, #map-canvas { height: 100%; margin: 0px; padding: 0px; } 

 <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script> <div id="map-canvas"></div> 

Answer 2

You may need to convert the place name → the tuple of longtitude and latitude with Google Map Geocoding service first as follows:

1. Request the Google Geocoding service via GET, pass the place name in (just a city name as your example used is OK):

   GET: https://maps.googleapis.com/maps/api/geocode/json?address=london

   This returns you back a JSON containing the geospatial information about London:

    { "results" : [ { "address_components" : [ { "long_name" : "ลอนดอน", "short_name" : "ลอนดอน", "types" : [ "locality", "political" ] }, { "long_name" : "สหราชอาณาจักร", "short_name" : "GB", "types" : [ "country", "political" ] } ], "formatted_address" : "ลอนดอน สหราชอาณาจักร", "geometry" : { "bounds" : { "northeast" : { "lat" : 51.6723432, "lng" : 0.148271 }, "southwest" : { "lat" : 51.38494009999999, "lng" : -0.3514683 } }, "location" : { "lat" : 51.5073509, "lng" : -0.1277583 }, "location_type" : "APPROXIMATE", "viewport" : { ... ... 

   2. Given the JSON response, extract the "rough location" of that place in latitude, longitude coordinate as follows:

       var coord = response.results[0].geometry.location; 

   So you get: coord = {lat : 51.5073509, lng : -0.1277583}

   3. Then you draw a marker at that given coordinate, and done.

       var marker = new google.maps.Marker({ position: coord, // {lat : 51.5073509, lng : -0.1277583} map: map, title: 'London' });