Come includere le mappe di google in una pagina web
01 dicembre 2011
Tramite le API di Google Maps è possibile includere le mappe di google all'interno di una pagina html.
Il tutto è fattibile con pochi passaggi.
Secondo lo script con l'array per i marker
Terzo lo script comune
Quarto il placeholder per la mappa
Infine i div nacosti per i popup
E' possibile fare una variante, ovvero non nascondere i div e visualizzare l'elenco dei punti visualizzati facendo in modo che cliccando sugli stessi venga visualizzato il popup.
Sostituisci i div con questo:
e aggiungi questa funzione javascript nella parte cumune:
map div
Prova
testo 1
testo 1
Prova
testo 2
Prova testo 3
Prova testo 4
Il tutto è fattibile con pochi passaggi.
- includere il riferimento alle API
- includere l'array per i marker
- includere le funzioni [tqag]JavaScript[/tag] comuni
- includere il palceholder per la mappa
- includere l'html con i div nascosti che useremo come popup
HTML
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false"></script>
JavaScript
/* parte da generare dinamicamente via codice
* dati variabili [id, coords]
*/
var neighborhoods = [
["popup1", 45.643596, 9.137625],
["popup2", 45.584006, 9.273014],
["popup0", 45.812032, 9.085615],
["popup3", 45.463681, 9.188171]
];
JavaScript
/* parte comune - by sgart.it */
var map;
var markers = [];
var iterator = 0;
var infowindow;
$(document).ready(function(){
var bounds = new google.maps.LatLngBounds();
//find center
var latMin = 10000;
var latMax = -1000;
var lngMin = 10000;
var lngMax = -1000;
for (var i = 0; i < neighborhoods.length; i++) {
var item = neighborhoods[i];
var lat = item[1];
if(lat < latMin) latMin = lat;
if(lat > latMax) latMax = lat;
var lng = item[2];
if(lng < lngMin) lngMin = lng;
if(lng > lngMax) lngMax = lng;
//find max rectangular dimension
bounds.extend(new google.maps.LatLng(lat, lng));
}
var centerLat = (latMax + latMin) / 2;
var centerLng = (lngMax + lngMin) / 2;
var mapcenter = new google.maps.LatLng(centerLat, centerLng);
//draw map
var mapOptions = {
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: mapcenter
};
map = new google.maps.Map(
document.getElementById("map_canvas"),
mapOptions);
//set visible area - automatic zoom
if (neighborhoods.length > 1) {
map.fitBounds(bounds);
} else if (neighborhoods.length == 1) {
map.setCenter(bounds.getCenter());
map.setZoom(14);
}
//set windows for popup
infowindow = new google.maps.InfoWindow({
content: "?",
maxWidth: 200
});
//set markers with timeout
setTimeout(function() { drop(); }, 500);
//or set marker immediatly
//drop();
});
function drop() {
for (var i = 0; i < neighborhoods.length; i++) {
setTimeout(function() { addMarker(); }, i * 200);
}
}
function addMarker() {
var item = neighborhoods[iterator];
var id = item[0];
var coord = new google.maps.LatLng(item[1], item[2]);
//add marker
var marker = new google.maps.Marker({
position: coord,
map: map,
flat: false,
draggable: false,
animation: google.maps.Animation.DROP,
title: id
});
markers.push(marker);
//add popup event listener
google.maps.event.addListener(marker, 'click', function () {
var id = this.title;
var contentString = $('#' + id).html();
if (contentString != null) {
//show popup
infowindow.setContent(contentString);
infowindow.open(map, marker);
}
});
iterator++;
}
/* parte comune fine */
HTML
<div id="map_canvas" style="width: 500px; height: 400px;">map div</div>
HTML
<!-- popup da generare dinamicamente via codice-->
<div id="popup0" style="display:none">Prova <br />testo 1</div>
<div id="popup1" style="display:none">Prova <h2>testo</h2> 2</div>
<div id="popup2" style="display:none">Prova <h3>testo</h3> 3</div>
<div id="popup3" style="display:none">Prova testo 4</div>
<!-- popup fine-->
Per funzionare richiede JQuery
E' possibile fare una variante, ovvero non nascondere i div e visualizzare l'elenco dei punti visualizzati facendo in modo che cliccando sugli stessi venga visualizzato il popup.
Sostituisci i div con questo:
HTML
<!-- popup da generare dinamicamente via codice-->
<div style="border: 1px solid black";>
<div id="popup0" style="cursor:pointer;" onclick="showPopupMap(this)">Prova testo 1</div>
<div id="popup1" style="cursor:pointer;" onclick="showPopupMap(this)">Prova testo 2</div>
<div id="popup2" style="cursor:pointer;" onclick="showPopupMap(this)">Prova testo 3</div>
<div id="popup3" style="cursor:pointer;" onclick="showPopupMap(this)">Prova testo 4</div>
</div>
<!-- popup fine-->
JavaScript
function showPopupMap(obj) {
var m = null;
var id = obj.id;
for (var i = 0; i < markers.length; i++) {
//search marker
if (markers[i].title == id) {
m = markers[i];
break;
}
}
if (m != null) {
//get content
var contentString = $('#' + id).html();
if (contentString != null) {
//show popup
infowindow.setContent(contentString);
infowindow.open(map, m);
}
}
}