How to create google maps markers with place url

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