且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

Google地图使用地点ID添加标记

更新时间:2023-01-08 19:15:13

如果您想在地图上放置标记place_id:'ChIJN1t_tDeuEmsRUsoyG83frY4'的地方,您需要向 getDetails 请求 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
}
});
}) ;

概念证明小提琴



程式码片段:

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%;宽度:100%; margin:0px; < script src =https://  //maps.googleapis.com/maps/api/js?v=3&libraries=places\"></script><div id =map-canvas>< / div>  


I am trying to place a marker onto Google Maps using its PlaceID. I have the map working and displaying and can also add markers (using LatLong) onto 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);

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

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"></script>
<div id="map-canvas"></div>