Google Maps API Lieux Bibliothèque SearchBox

Je tente d'ajouter des infowindows aux marqueurs avec PlaceDetails qui sont renvoyés après une recherche google searchbox. Lorsque je clique sur les marqueurs, aucun infowindows ne s'ouvre. Je ne peux pas comprendre où je me suis trompé?Google Maps API Lieux Bibliothèque SearchBox

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

};

Source

2012-11-22 Rick

Pour obtenir la place Détails à utiliser dans le InfoWindow, vous devez faire une deuxième demande à l'API Places (lorsque le marqueur est cliqué). A l'intérieur de la fonction createMarker (qui a la fermeture de fonction sur le "lieu"):

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

Source

2012-11-22 11:13:36 geocodezip

merci pour la réponse. Votre réponse a été beaucoup plus utile dans ce domaine que la documentation de la bibliothèque Google Maps API. Maintenant, j'ai juste besoin de travailler à travers comment tirer les données PlaceResults dont j'ai besoin pour la fenêtre d'information. Je vois comment vous avez tiré place.formated adresse et place.website ci-dessus mais comment puis-je travailler avec les types address_component? J'essaye d'obtenir l'adresse sur deux lignes de sorte que la fenêtre d'information s'insère dans une fenêtre de smartphone. – Rick

J'ai un peu modifié votre code. Essayez celui-ci.

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

Source

2012-11-22 04:38:53 wf9a5m75

merci pour l'aide. J'ai compris pourquoi mon infowindow ne fonctionnait pas et avec le conseil de geocodezip j'ai pu apprendre comment passer l'information dont j'avais besoin à l'infowindow. – Rick

Google Maps API Lieux Bibliothèque SearchBox

Répondre

Questions connexes