Google Maps API Places Library SearchBox

后端 未结 2 1720
旧巷少年郎
旧巷少年郎 2021-01-27 09:22

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

相关标签:
2条回答
  • 2021-01-27 10:09

    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)
  • 2021-01-27 10:26

    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)
提交回复
热议问题