Comment obtenir une image d'un lieu à partir de Google Maps ou de l'API Google Adresses
J'utilise Google Places API pour récupérer des données sur les lieux, mais n'a pas trouvé comment obtenir une image de ce lieu, Google Places API fournit simplement une icône qui n'est pas la même. J'ai besoin de la photo que vous obtenez lorsque vous recherchez un lieu dans Google Maps dans un navigateur Web par exemple. Il y a généralement plus de photos de Panoramio, mais l'API Panoramio ne peut rechercher des photos que par emplacement et non par nom de restaurant ou d'hôtel particulier par exemple. Des idées?
L'API Places vous donnera les coordonnées (latitude et longitude) dans la réponse de détail du lie ; vous pouvez ensuite envoyer les coordonnées à Panoramio API .
Par exemple (dessin à partir d'exemples dans les documents de l'API):
https://maps.googleapis.com/maps/api/place/details/json?reference=<big long key for place>&sensor=true&key=AIzaSyAiFpFd85eMtfbvmVNEYuNds5TEF9FjIPI
Réponse:
{
"html_attributions" : [],
"result" : {
"address_components" : [
{
"long_name" : "48",
"short_name" : "48",
"types" : [ "street_number" ]
},
{
"long_name" : "Pirrama Road",
"short_name" : "Pirrama Road",
"types" : [ "route" ]
},
{
"long_name" : "Pyrmont",
"short_name" : "Pyrmont",
"types" : [ "locality", "political" ]
},
{
"long_name" : "NSW",
"short_name" : "NSW",
"types" : [ "administrative_area_level_1", "political" ]
},
{
"long_name" : "AU",
"short_name" : "AU",
"types" : [ "country", "political" ]
},
{
"long_name" : "2009",
"short_name" : "2009",
"types" : [ "postal_code" ]
}
],
"formatted_address" : "5/48 Pirrama Road, Pyrmont NSW, Australia",
"formatted_phone_number" : "(02) 9374 4000",
"geometry" : {
"location" : {
"lat" : -33.8669710,
"lng" : 151.1958750
}
},
"icon" : "http://maps.gstatic.com/mapfiles/place_api/icons/generic_business-71.png",
"id" : "4f89212bf76dde31f092cfc14d7506555d85b5c7",
"international_phone_number" : "+61 2 9374 4000",
"name" : "Google Sydney",
"rating" : 4.60,
"reference" : "CnRlAAAAAfV6JIqSzL8Cf4VnXn0EaI1d5k3IPhdkEonq0MxiUbQFFSVuptVbXbNH4mrevb0bc7G8yWqTUv76i4KTuO_Wf3OrRHjCJJwzQ0mNLjbYGSVqy2eqyrgOUkl6S_sJfTbHzWZYrfPy7KZaet0mM5S6thIQJYuy5v_JD--ZxXEJLWTQRRoU5UaciXBBo89K-bce18Ii9RsEIws",
"types" : [ "store", "establishment" ],
"url" : "http://maps.google.com/maps/place?cid=10281119596374313554",
"vicinity" : "5/48 Pirrama Road, Pyrmont",
"website" : "http://www.google.com.au/"
},
"status" : "OK"
}
Nous pouvons voir que les coordonnées sont "emplacement": {"lat": -33.8669710, "lng": 151.1958750}
Ensuite, nous pouvons envoyer une demande à Panoramio, en insérant les coordonnées, plus une petite marge de manœuvre de chaque côté (j'ai fait +/- 0,002 degrés, une forme de 200 m x 200 m carré à l'équateur, généralement plus petite). http://www.panoramio.com/map/get_panoramas.php?set=public&from=0&to=20&minx=-33.868&miny=151.193&maxx=-33.864&maxy=151.197&size=medium&mapfilter=true
Vous devrez peut-être filtrer les réponses pour obtenir la photo la plus proche, mais cela devrait vous permettre de travailler.
L'API Places vient d'ajouter la possibilité de demander des photos directement dans l'API: https://developers.google.com/maps/documentation/javascript/places#places_photos
L'API Places prend désormais en charge le retour d'une photo de lieu si elle est disponible pour une demande de recherche de lie et jusqu'à dix photos de lieu pour une demande de détails de lie .
Si un tableau de photos est retourné avec votre demande, vous pouvez transmettre le photo_reference d'un objet photo contenu vers un Placer une demande de photo avec maxheight et/ou maxwidth, sensor et key paramètres:
https://maps.googleapis.com/maps/api/place/photo?maxwidth=400&photoreference=CnRvAAAAwMpdHeWlXl-lH0vp7lez4znKPIWSWvgvZFISdKx45AwJVP1Qp37YOrH7sqHMJ8C-vBDC546decipPHchJhHZL94RcTUfPa1jWzo-rSHaTlbNtjh-N68RkcToUCuY9v2HNpo5mziqkir37WU8FJEqVBIQ4k938TI3e7bf8xq-uwDZcxoUbO_ZJzPxremiQurAYzCTwRhE_V0&sensor=false&key=AddYourOwnKeyHere
Veuillez consulter la documentation pour plus de détails.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Places Searchbox</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 50%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#description {
font-family: Roboto;
font-size: 15px;
font-weight: 300;
}
#infowindow-content .title {
font-weight: bold;
}
#infowindow-content {
display: none;
}
#map #infowindow-content {
display: inline;
}
.pac-card {
margin: 10px 10px 0 0;
border-radius: 2px 0 0 2px;
box-sizing: border-box;
-moz-box-sizing: border-box;
outline: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
background-color: #fff;
font-family: Roboto;
}
#pac-container {
padding-bottom: 12px;
margin-right: 12px;
}
.pac-controls {
display: inline-block;
padding: 5px 11px;
}
.pac-controls label {
font-family: Roboto;
font-size: 13px;
font-weight: 300;
}
#pac-input {
background-color: #fff;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
margin-left: 12px;
padding: 0 11px 0 13px;
text-overflow: Ellipsis;
width: 400px;
}
#pac-input:focus {
border-color: #4d90fe;
}
#title {
color: #fff;
background-color: #4d90fe;
font-size: 25px;
font-weight: 500;
padding: 6px 12px;
}
#target {
width: 345px;
}
</style>
</head>
<body>
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<div id="map"></div>
<div id="place-list"></div>
<script>
// This example adds a search box to a map, using the Google Place Autocomplete
// feature. People can enter geographical searches. The search box will return a
// pick list containing a mix of places and predicted search terms.
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
function initAutocomplete() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -33.8688, lng: 151.2195},
zoom: 13,
mapTypeId: 'roadmap'
});
// Create the search box and link it to the UI element.
var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].Push(input);
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
var markers = [];
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function() {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
// Clear out the old markers.
markers.forEach(function(marker) {
marker.setMap(null);
});
markers = [];
// For each place, get the icon, name and location.
var bounds = new google.maps.LatLngBounds();
places.forEach(function(place) {
if (!place.geometry) {
console.log("Returned place contains no geometry");
return;
}
var icon = {
url: place.icon,
size: new google.maps.Size(71, 71),
Origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
var photoUrl = place.photos[0].getUrl({maxWidth: 400, maxHeight: 400});
var img = document.createElement("img");
img.setAttribute('src', photoUrl + "photo.jpg");
document.getElementById('place-list').appendChild(img);
// Create a marker for each place.
markers.Push(new google.maps.Marker({
map: map,
icon: photos[0].getUrl({'maxWidth' : 35,maxHeight' : 35})
title: place.name,
position: place.geometry.location
}));
if (place.geometry.viewport) {
// Only geocodes have viewport.
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=<KEY_API>&libraries=places&callback=initAutocomplete"
async defer></script>
</body>
</html>
Obtenez d'abord la photo_reference de la réponse:
var photoRef; if (data.results[i].photos && Array.isArray(data.results[i].photos)) { photoRef = data.results[i].photos[0].photo_reference; }Utilisez le point de terminaison de l'API Google Photos pour obtenir la photo/image du lieu:
https://maps.googleapis.com/maps/api/place/photo?maxwidth=960&photoreference="+ photoRef + "& key = AIzaSyBp0cy7ti0z5MJMAwWiPMNvbJobmWYGyv4 'alt =' '/>
- Voir par vous-même:
