Google Maps API Places Library搜索框

我正在尝试将信号添加到带有Google搜索框搜索后返回的PlaceDetails的标记。当我点击标记时，没有infowindows打开。我无法弄清楚我错了哪里？Google Maps API Places Library搜索框

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

};

来源

2012-11-22 Rick

要获取要在InfoWindow中使用的地点详细信息，您需要向Places API发出第二次请求（点击标记时）。里面的createMarker功能（这对 “地方” 功能关闭）：

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

来源

2012-11-22 11:13:36 geocodezip

感谢您的回复。您的回复在Google地图API地方库文档中比这个主题更有帮助。现在我只需要通过如何获取信息窗口所需的PlaceResults数据。我看到你是如何将place.formatted地址和place.website拉到上面的，但我如何使用address_component类型？我正在尝试将地址放在两行上，以便信息窗口可以放入智能手机视口中。 – Rick

我稍微改变了你的代码。试试这个。

<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>

来源

2012-11-22 04:38:53 wf9a5m75

感谢您的帮助。我想出了为什么我的infowindow没有工作，并且使用geocodezip的建议，我能够学习如何将需要的信息传递给infowindow。 – Rick

Google Maps API Places Library搜索框

回答

相关问题