Google Map con zoom personalizzati

**Puleggio** · 20-08-2014, 10:19

Ciao a tutti,
cercherò di essere più preciso possibile, non riesco a trovare una soluzione....
Devo creare una mappa con circa 1000 marker disposti tutti su un unica regione.

Ho creato una tabella unica con tutti i miei dati (id - provincia, comune, via, lat, long, marker) dove marker mi server per visualizzarmi il marker che desidero (un segnaposto numerato da 1 a 15).

Ho creato una pagina in php dove al suo interno mi fa vedere la mappa e mi centra con le coordinate che ho scelto:

function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(45.037277, 7.636477),
zoom: 13,
mapTypeId: 'roadmap'
});

Lo zoom e il center mi permettono di visualizzare quello che desidero.

Ora però la mia idea era quella di creare un menù a tendina banale suddiviso per provincia e comune. Selezionando il paese desiderato mi apriva una pagina con uno zoom dedicato su quel comune con i marker e tutte le finestrelle per ogni marker.
Così facendo però io avrei 50 pagine html, una per ogni città.

C'è un modo per fargli fare uno zoom diretto sulla città senza dover creare tutte ste pagine ?

In pratica l'idea è quella di fargli fare quello che già sta facendo google (label text - scrivo la città, mi elenca le città disponibili - seleziono la città - zoom) ma senza diventare pazzo con una programmazione esagerata, o se esiste una scappatoia o un idea alternativa. Non voglio fare concorrenza a google

Grazie

**Puleggio** · 20-08-2014, 10:38

Ho trovato la funzione Geocoding che forse mi risolve tutti i miei problemi trovando la pagina Google Maps JavaScript API v3

**cavicchiandrea** · 20-08-2014, 11:19

Visto che hai 1000 markers in una sola regione dovrai "raggrupparli" e le mappe di Google sono tutto tranne che facili da gestire.
Auguri

**Puleggio** · 21-08-2014, 11:47

Ciao, arieccomi.
allora diciamo che:
- il geocoding funziona alla perfezione
- i marker recuperati da db e visualizzati su mappa funziona alla grande

Ora il problema come mi aspettavo è miscelare le due cose:

Partendo dal codice di geocoding che è abbastanza semplice ed è questo:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Geocoding service</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
#panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -180px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(45.037277, 7.636477);
var mapOptions = {
zoom: 13,
center: latlng
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}

function codeAddress() {
var address = document.getElementById('address').value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}

google.maps.event.addDomListener(window, 'load', initialize);

</script>
</head>
<body>
<div id="panel">
<input id="address" type="textbox" value="">
<input type="button" value="Cerca" onclick="codeAddress()">
</div>
<div id="map-canvas"></div>
</body>
</html>

devo inserirlo nel codice di mappa con i marker e incappo sempre in qualche errore di visualizzazione o funzionalità. Il problema sta nel caricamento della mappa che ha questo codice

function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(45.037277, 7.636477),
zoom: 13,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;

downloadUrl("config_map.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker") ;
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b> <br/>" + address;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon
});
bindInfoWindow(marker, map, infoWindow, html);
}
});

Se vado a modificare il function initialize con il function load portandomi dietro le viarie var non va !!!

Si può fare ? la prima domanda ed è la strada giusta o sono in un vicolo cieco ?

Grazie

**cavicchiandrea** · 21-08-2014, 11:54

Integrare le due operazioni non sarà facile, soprattutto se non hai ottime conoscenze di js e mappe google

**Puleggio** · 21-08-2014, 12:00

ahhh certo ..... se era facile mica chiedevo consigli qui !!!

chiedevo solo se ero sulla strada giusta o se la cosa non era fattibile.

Grazie

**cavicchiandrea** · 21-08-2014, 12:44

Non so cosa intendi per strada giusta, comunque i due processi vanno integrati in una sola operazione recupero i dati dal db -> geocoder -> mostro sulla mappa

**Puleggio** · 22-08-2014, 10:56

Ok ,
il mio tentativo diciamo che è riuscito in parte ..... ora geolocalizzo e leggo il database ma non riesco a capire come mai mi inserisce solo il primo marker del mio database. Mi potete aiutare ? inserisco il codice qui di seguito. Grazie in anticipo

<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Mappa</title>

<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
#panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -180px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
</style>

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script type="text/javascript">

//<![CDATA[
var customIcons = {
1: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png'
},
2: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png'
}
};
var geocoder;
var map;

function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(45.037277, 7.636477);
var mapOptions = {
zoom: 13,
center: latlng
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

downloadUrl("config_map.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker") ;
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b> <br/>" + address;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}

function codeAddress() {
var address = document.getElementById('address').value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);

} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);

function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}

function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;

request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};

request.open('GET', url, true);
request.send(null);
}

function doNothing() {}

//]]>

</script>

</head>

<body onload="load()">
<div id="panel">
<input id="address" type="textbox" value="">
<input type="button" value="Inserisci il nome della tua città" onclick="codeAddress()">
</div>
<div id="map-canvas"></div>

</body>

</html>

Discussione: Google Map con zoom personalizzati

Strumenti discussione

Ricerca discussione

Visualizza

Google Map con zoom personalizzati

Permessi di invio