Titre: Google Maps pleace search API
Posté par: pierrotm777 le 15 Janvier 2016 à 17:35:59
Bonjour, Ceci est ma première question sur ce forum . J'espère de pas faire d'erreur de présentation ! Tout d'abord, je travail, humblement, sur des pages html affichant des pages google map ! Mon PC est sous Vista 32bits donc j'utilise IE9 maximum ou Firefox ! Il y a quelque années j'avais un code qui marchait bien , mais les API de googles changent on mon code ne marche pas bien ! Ma page affiche les restaurants autour d'un point GPS . Elle marche bien, mais j'ai une zone blanche parasite transparente en plein milieu sous IE9 et pas dans firefox ! Voici mon code: <html>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<head>
<style type="text/css">
html, body, #map_canvas {height: 100%;margin: 0px;padding: 0px}
div#crosshair {
position: absolute;
top: 50%;
height: 19px;
width: 19px;
left: 50%;
margin-left: -8px;
display: block;
background: url(crosshair.gif);
background-position: center center;
background-repeat: no-repeat;
}
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true&language=fr&libraries=places"></script>
<script type="text/javascript">
var map;
var infowindow;
var service;
var markersArray = [];
var bounds = new google.maps.LatLngBounds();
function initialize() {
zoomlevel = 15;
var myposition = new google.maps.LatLng(44.785757, -0.566993);
map = new google.maps.Map(document.getElementById('map_canvas'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: myposition,
overviewMapControl: true,
zoom: zoomlevel
});
var request = {
location: myposition,
radius: 5000,
types: ['real_estate_agency']
};
infowindow = new google.maps.InfoWindow();
service = new google.maps.places.PlacesService(map);
service.search(request, callback);
}
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
var request = {
reference: results[i].reference
};
service = new google.maps.places.PlacesService(map);
service.getDetails(request, function success(place, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
createMarker(place);
}
});
}
}
}
function createDetailsHtml(name, rating, phone, address, website, gmapurl) {
if(null == name) {
name = '';
} else {
name = '<div><b><i><big><big><u><a href="'+gmapurl+'">'+name+'</a></u></big></big></i></b></div>';
}
if(typeof rating === "undefined") {
rating = '';
} else {
rating = '<div>Rating: '+rating+'</div>';
}
if(typeof phone === "undefined") {
phone = '';
}
if(typeof address === "undefined") {
address = '';
}
if(typeof website === "undefined") {
website = '';
} else {
website = '<a href="'+website+'">'+website+'</a>';
}
return '<div>'+name+address+'<br>'+website+'<div><br>Tel: '+phone+'</div>'+rating+'</div>';
}
function sendToVB(vartosend) {
window.external.sendToVB(vartosend);
}
function sendToVBOnMarkerClick(vartosend) {
window.external.sendToVBOnMarkerClick(vartosend);
}
function panbyright() {
map.panBy(100,0);
}
function panbyleft() {
map.panBy(-100,0);
}
function panbytop() {
map.panBy(0,-100);
}
function panbybottom() {
map.panBy(0,100);
}
function animate(newlat, newlon, newdir)
{
var myLatlng = new google.maps.LatLng(newlat, newlon);
//setdir(newdir);
//dirMarker.setPosition(myLatlng);
//dirMarker.setIcon(dirimage);
map.panTo(myLatlng);
};
function setmapzoom(zoomlevel) {
var curzoom = map.getZoom();
if (zoomlevel > 0)
map.setZoom(curzoom + 1);
else
map.setZoom(curzoom - 1);
}
function getmapzoom() {
var curzoom = map.getZoom();
return curzoom;
}
function createMarker(place) {
var detailsHTML = createDetailsHtml(place.name, place.rating, place.international_phone_number, place.formatted_address, place.website, place.url);
var image = new google.maps.MarkerImage(place.icon,
new google.maps.Size(71, 71),
new google.maps.Point(0,0),
new google.maps.Point(0, 71),
new google.maps.Size(30, 30));
var shape = {
coord: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'
};
var placeLoc = place.geometry.location;
bounds.extend(placeLoc);
var marker = new google.maps.Marker({
map: map,
icon: image,
shape: shape,
title: place.name,
zIndex: 4,
position: place.geometry.location,
animation: google.maps.Animation.DROP
});
markersArray.push(marker)
var latLng = marker.getPosition();
google.maps.event.addListener(marker, 'click', function() {
//infowindow.setContent('<b><i><big><u>' + '<a href="' + place.url + '">' + place.name + '</a>' + '</u></big></i></b>'+ '<br><br>' + place.vicinity + '<br><br>' + latLng.lat().toFixed(6) + ', ' + latLng.lng().toFixed(6) + '<br><br>Formatted phone : ' + place.formatted_phone_number + '<br>International phone : ' + place.international_phone_number);
infowindow.setContent(detailsHTML +'<br>Latlon: '+ latLng.lat().toFixed(6) + ', ' + latLng.lng().toFixed(6));
infowindow.open(map, this);
sendToVBOnMarkerClick(place.name+'|'+place.formatted_address+'|'+place.international_phone_number+'|'+latLng.lat().toFixed(6) + '|' + latLng.lng().toFixed(6));
});
// Automatically center the map fitting all markers on the screen
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, 'load', initialize);
function deleteOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
}
</script>
</head>
<body onload="initialize()">
<input type="hidden" input type="button" value="Delete" id="DelMarker" onclick="deleteOverlays()">
<div id="map">
<div id="map_canvas"></div>
<div id="crosshair"></div>
</div>
</body>
</html>
Je voudrait bien sure ne plus voir cette zone blanche ! Merci de votre aide par avance Pierre
Titre: Re : Google Maps pleace search API
Posté par: pierrotm777 le 27 Janvier 2016 à 10:01:22
45 vues et pas d'avis sur mon sujet ?
Titre: Re : Google Maps pleace search API
Posté par: the lsd le 27 Janvier 2016 à 14:13:39
Bah c'est à dire que c'est pas un forum de dev ici ^^'
Vérifie la compatibilité entre Gmaps et IE9, regarde avec le mode développeur sur IE si tu as des erreurs javascript. J'peux pas t'en dire plus comme ça là.
Enjoy
The lsd
|