Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Google Map add marker using place ID

I am trying to place a marker into Google Maps using its PlaceID. I have the map working and displaying and can also add markers (using Lattitude and Longitude) into it.

The code below is what I am using to try and make the marker display using its placeID however it is not displaying.

function addPlaces(){
    var marker = new google.maps.Marker({
        place: new google.maps.Place('ChIJN1t_tDeuEmsRUsoyG83frY4'),
        map: map
    });
}

This function is called after the map has loaded.

google.maps.event.addDomListener(window, "load", addPlaces);
like image 231
Rafty Avatar asked Apr 18 '15 21:04

Rafty


People also ask

How do I use Google place ID?

A common way of using place IDs is to search for a place (using the Places API or the Places library in the Maps JavaScript API, for example) then use the returned place ID to retrieve place details. You can store the place ID and use it to retrieve the same place details later.

What is a place ID in Google Maps?

A place ID is a textual identifier that uniquely identifies places such as businesses, landmarks, parks, and intersections. The length of the identifier can vary (there is no maximum length for Place IDs). For more information, see Google Map Place ID.


1 Answers

If you want to place a marker on the map at the place with the place_id: 'ChIJN1t_tDeuEmsRUsoyG83frY4', you need to make a getDetails request to the PlaceService

var service = new google.maps.places.PlacesService(map);
service.getDetails({
    placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4'
}, function (result, status) {
    var marker = new google.maps.Marker({
        map: map,
        place: {
            placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4',
            location: result.geometry.location
        }
    });
});

proof of concept fiddle

screenshot of resulting map

code snippet:

var map;
var infoWindow;
var service;

function initialize() {
  var mapOptions = {
    zoom: 19,
    center: new google.maps.LatLng(51.257195, 3.716563)
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  infoWindow = new google.maps.InfoWindow();
  var service = new google.maps.places.PlacesService(map);
  service.getDetails({
    placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4'
  }, function(result, status) {
    if (status != google.maps.places.PlacesServiceStatus.OK) {
      alert(status);
      return;
    }
    var marker = new google.maps.Marker({
      map: map,
      position: result.geometry.location
    });
    var address = result.adr_address;
    var newAddr = address.split("</span>,");

    infoWindow.setContent(result.name + "<br>" + newAddr[0] + "<br>" + newAddr[1] + "<br>" + newAddr[2]);
    infoWindow.open(map, marker);
  });

}

google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map-canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map-canvas"></div>
like image 179
geocodezip Avatar answered Sep 28 '22 00:09

geocodezip