Google Maps API Places Library SearchBox

2020-05-07 19:23发布

站内问答 / 前沿技术
571 2 4

I am attempting to add infowindows to the markers with PlaceDetails that are returned after a google searchbox search. When I click on the markers no infowindows open. I cannot figure out where I went wrong?

 var infowindow = new google.maps.InfoWindow();
 //Function for search box
var input = document.getElementById('target');
var searchBox = new google.maps.places.SearchBox(input);
var markers = [];

google.maps.event.addListener(searchBox, 'places_changed', function() {
  var places = searchBox.getPlaces();

  for (var i = 0, marker; marker = markers[i]; i++) {
    marker.setMap(null);
  }

  markers = [];
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0, place; place = places[i]; i++) {
    var image = new google.maps.MarkerImage(
        'img/pin_blue.png',
        new google.maps.Size(15,29),
        new google.maps.Point(0,0),
        new google.maps.Point(8,29)
      );

      var shadow = new google.maps.MarkerImage(
        'img/pin_shadow.png',
        new google.maps.Size(33,29),
        new google.maps.Point(0,0),
        new google.maps.Point(8,29)
      );

      var shape = {
        coord: [11,1,12,2,13,3,14,4,14,5,14,6,14,7,14,8,14,9,14,10,14,11,14,12,13,13,12,14,11,15,8,16,8,17,8,18,8,19,8,20,8,21,8,22,8,23,8,24,11,25,11,26,11,27,3,27,3,26,3,25,6,24,6,23,6,22,6,21,6,20,6,19,6,18,6,17,6,16,3,15,2,14,1,13,0,12,0,11,0,10,0,9,0,8,0,7,0,6,0,5,0,4,1,3,2,2,3,1,11,1],
        type: 'poly'
      };

    var marker = new google.maps.Marker({
      map: map,
      icon: image,
      shadow: shadow,
      shape: shape,
      title: place.name,
      position: place.geometry.location
    });

    markers.push(marker);

    bounds.extend(place.geometry.location);
  }

  map.fitBounds(bounds);

  //add an infowindow
  google.maps.event.addListener(markers, 'click', function() {
      infowindow.setContent(place.name);
      infowindow.open(map, markers[i]);
  });
});
google.maps.event.addListener(map, 'bounds_changed', function() {
  //var bounds = map.getBounds();
  searchBox.bindTo('bounds', map);
});

};

2条回答
劳资没心，怎么记你
2楼-- · 2020-05-07 19:39

I little bit changed your code. Try this one.

<html>
  <head>
    <script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
    <script type='text/javascript'>
      var map, infowindow;
      var searchBox;
      var markers = [];

      function initialize() {
        var mapDiv = document.getElementById("map_canvas");
        map = new google.maps.Map(mapDiv, {
          center : new google.maps.LatLng(35, 138),
          zoom : 7,
          mapTypeId : google.maps.MapTypeId.ROADMAP
        });

        infowindow = new google.maps.InfoWindow();
        //Function for search box
        var input = document.getElementById('target');
        searchBox = new google.maps.places.SearchBox(input);

        google.maps.event.addListener(searchBox, 'places_changed', function() {
          var places = searchBox.getPlaces();

          for (var i = 0, marker; marker = markers[i]; i++) {
            marker.setMap(null);
          }

          markers = [];
          var bounds = new google.maps.LatLngBounds();
          for (var i = 0, place; place = places[i]; i++) {
            var image = new google.maps.MarkerImage('img/pin_blue.png', new google.maps.Size(15, 29), new google.maps.Point(0, 0), new google.maps.Point(8, 29));

            var shadow = new google.maps.MarkerImage('img/pin_shadow.png', new google.maps.Size(33, 29), new google.maps.Point(0, 0), new google.maps.Point(8, 29));

            var shape = {
              coord : [11, 1, 12, 2, 13, 3, 14, 4, 14, 5, 14, 6, 14, 7, 14, 8, 14, 9, 14, 10, 14, 11, 14, 12, 13, 13, 12, 14, 11, 15, 8, 16, 8, 17, 8, 18, 8, 19, 8, 20, 8, 21, 8, 22, 8, 23, 8, 24, 11, 25, 11, 26, 11, 27, 3, 27, 3, 26, 3, 25, 6, 24, 6, 23, 6, 22, 6, 21, 6, 20, 6, 19, 6, 18, 6, 17, 6, 16, 3, 15, 2, 14, 1, 13, 0, 12, 0, 11, 0, 10, 0, 9, 0, 8, 0, 7, 0, 6, 0, 5, 0, 4, 1, 3, 2, 2, 3, 1, 11, 1],
              type : 'poly'
            };

            var marker = createMarker({
              map : map,
              //icon : image,
              //shadow : shadow,
              //shape : shape,
              title : place.name,
              position : place.geometry.location,
              place_name : place.name
            })

            markers.push(marker);

            bounds.extend(place.geometry.location);
          }

          map.fitBounds(bounds);

        });

        google.maps.event.addListener(map, 'bounds_changed', function() {
          //var bounds = map.getBounds();
          searchBox.bindTo('bounds', map);
        });

      }

      function createMarker(options) {
        var marker = new google.maps.Marker(options);

        //add an infowindow
        google.maps.event.addListener(marker, 'click', function() {
          infowindow.setContent(options.place_name);
          infowindow.open(map, marker);
        });

        return marker;
      }


      google.maps.event.addDomListener(window, "load", initialize);
    </script>
  </head>
  <body>
    <input type="text" id="target" />
    <div id="map_canvas" style="width: 500px;height:400px"></div>
  </body>
</html>
查看更多
0人赞 添加讨论(0) 举报
我想做一个坏孩纸
3楼-- · 2020-05-07 19:41

To get the Place Details to use in the InfoWindow, you need to make a second request to the Places API (when the marker is clicked). Inside the createMarker function (which has function closure on the "place"):

var request =  {
   reference: place.reference
};
google.maps.event.addListener(marker,'click',function(){
   service.getDetails(request, function(place, status) {
      if (status == google.maps.places.PlacesServiceStatus.OK) {
          var contentStr = '<h5>'+place.name+'</h5><p>'+place.formatted_address;
          if (!!place.formatted_phone_number) contentStr += '<br>'+place.formatted_phone_number;
          if (!!place.website) contentStr += '<br><a target="_blank" href="'+place.website+'">'+place.website+'</a>';
          contentStr += '<br>'+place.types+'</p>';
          infowindow.setContent(contentStr);
          infowindow.open(map,marker);
       } else { 
          var contentStr = "<h5>No Result, status="+status+"</h5>";
          infowindow.setContent(contentStr);
          infowindow.open(map,marker);
       }
   });
});

Example

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)