Google Map Géolocalisation et Affichage d'un type d'activité

Question

Tout d'abord, je voudrais remercier tout le monde pourrait m'aider, et dire que je suis un begginer en développement. J'essaye de mettre en place le code pour Google Map avec Géolocalisation montrant seulement des marqueurs sur le type de location de voiture. L'idée est que lorsqu'un visiteur de ma page Web entre dans le site, la carte géolocalise la position du visiteur et la carte montre seulement les lieux de location de voiture à proximité.

J'ai obtenu le code google géolocalisation:

<div id="map" style="width: 100%; height: 500px;"></div> 
<script> 
    // Note: This example requires that you consent to location sharing when 
    // prompted by your browser. If you see the error "The Geolocation service 
    // failed.", it means you probably did not give permission for the browser to 
    // locate you. 

    function initMap() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
     center: {lat: -34.397, lng: 150.644}, 
     zoom: 6 
    }); 
    var infoWindow = new google.maps.InfoWindow({map: map}); 

    // Try HTML5 geolocation. 
    if (navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(function(position) { 
     var pos = { 
      lat: position.coords.latitude, 
      lng: position.coords.longitude 
     }; 

     infoWindow.setPosition(pos); 
     infoWindow.setContent('Location found.'); 
     map.setCenter(pos); 
     }, function() { 
     handleLocationError(true, infoWindow, map.getCenter()); 
     }); 
    } else { 
     // Browser doesn't support Geolocation 
     handleLocationError(false, infoWindow, map.getCenter()); 
    } 
    } 

    function handleLocationError(browserHasGeolocation, infoWindow, pos) { 
    infoWindow.setPosition(pos); 
    infoWindow.setContent(browserHasGeolocation ? 
          'Error: The Geolocation service failed.' : 
          'Error: Your browser doesn\'t support geolocation.'); 
    } 
</script> 
<script async defer 
src="https://maps.googleapis.com/maps/api/js?key=[MYAPIKEY]&callback=initMap"> 
</script> 

Et cela fonctionne très bien, mais maintenant, je lis sur les lieux et les types et je ne réussis pas.

Une idée? Quelqu'un peut-il m'aider?

Meilleures salutations et merci d'avance.

Jordi V. CarRentals.Deals

Answer 1

Les fonctions de la bibliothèque de Google Adresses JavaScript permettent à votre application de rechercher des lieux (défini dans cette API comme les établissements, les lieux géographiques, ou des points importants d'intérêt) contenu dans un zone définie, telle que les limites d'une carte, ou autour d'un point fixe. L'API Google Adresses offre une fonctionnalité de saisie semi-automatique que vous pouvez utiliser pour donner à vos applications le comportement de recherche par anticipation du champ de recherche Google Maps. Lorsqu'un utilisateur commence à taper une adresse, la saisie semi-automatique remplit le reste. Pour plus d'informations, voir le autocomplete documentation.

Dans mon exemple, j'ai utilisé Recherche à proximité - vous permet de rechercher des lieux dans une zone spécifiée par mot-clé ou par type. Il utilise la méthode nearbySearch() de PlacesService, qui retournera un tableau d'objets PlaceResult. Pour en savoir plus, vous pouvez vérifier le lien this. Jetons maintenant un coup d'oeil à la décomposition du code.

var service = new google.maps.places.PlacesService(map); 
     service.nearbySearch({ 
        location: location, 
        radius: 500, 
        type: ['car_rental'] 
}, callback); 

Vous pouvez utiliser la propriété 'bounds' ou 'location', dans notre cas, nous utilisons 'location'. Notez que si vous utilisez 'location', vous devrez également fournir la propriété 'radius'. Le rayon maximum autorisé est de 50 000 mètres. Nous avons également utilisé la propriété 'type'. Il limite les résultats aux endroits correspondant au type spécifié. Un seul type peut être spécifié (si plus d'un type est fourni, tous les types suivant la première entrée sont ignorés). Voir le list of supported types.

La fonction de rappel accepte deux arguments. Le résultat et le statut. Vous pouvez créer vos propres noms d'arguments. Ce (callback) est l'endroit où nous allons ajouter les codes que vous vouliez exécuter si l'argument 'status' est correct. La fonction de rappel:

function(results, stat){ 
      if (stat === google.maps.places.PlacesServiceStatus.OK) { 
      for (var i = 0; i < results.length; i++) { 
       var place = results[i]; 
       createMarker(results[i], map);   
      }   
      }  
     });  

}); 

Si le résultat est correct, les valeurs retournées sont dans un tableau, vous devez parcourir chaque tableau et les afficher comme Google marqueurs. Pour en savoir plus sur Google Markers, vous pouvez consulter le this.Voici la définition de la fonction createMarker:

function createMarker(place, map) { 
    var placeLoc = place.geometry.location; 
    infowindow = new google.maps.InfoWindow(); 
    var marker = new google.maps.Marker({ 
     map: map, 
     position: place.geometry.location 
}); 
    google.maps.event.addListener(marker, 'click', function() { 
     infowindow.setContent(place.name); 
     infowindow.open(map, this); 
    }); 
} 

Code complet ici:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title></title> 
    <style> 
    html,body,#map { 
     width:100%; 
     height:100%; 
    } 
    </style> 
</head> 
<body> 
<div id="map"></div> 
<script async defer 
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=places"> 
</script> 
<script> 
function initMap() { 
var map; 
var infowindow; 
// Try HTML5 geolocation. 
if (navigator.geolocation) { 
navigator.geolocation.getCurrentPosition(function(position) { 
var pos = { 
lat: position.coords.latitude, 
lng: position.coords.longitude 
}; 
var location = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 
map = new google.maps.Map(document.getElementById('map'), { 
    center:location, 
    zoom: 12 
}); 
var service = new google.maps.places.PlacesService(map); 
service.nearbySearch({ 
location: location, 
radius: 500, 
type: ['car_rental'] 
}, function(results, stat){ 
if (stat === google.maps.places.PlacesServiceStatus.OK) { 
for (var i = 0; i < results.length; i++) { 
var place = results[i]; 
createMarker(results[i], map);   
}   
}  
});  
}); 
} else { 
alert("Browser doesn't support Geolocation"); 
} 
} 
function createMarker(place, map) { 
var placeLoc = place.geometry.location; 
infowindow = new google.maps.InfoWindow(); 
var marker = new google.maps.Marker({ 
    map: map, 
    position: place.geometry.location 
}); 

google.maps.event.addListener(marker, 'click', function() { 
    infowindow.setContent(place.name); 
    infowindow.open(map, this); 
}); 
}  
</script> 
</body> 
</html> 

Démo Travailler here.

J'espère que ça aide!