Maps di google in HTML 
Author: simone atzoriSalve a tutti,
Son riuscito finalmente tramite un copia e incolla di un codice html,inserire una mappa nella mia pagina internet del sito, per visualizzare esattamente un punto geografico dove son state scattate alcune mie foto.Ho cambiato le coordinate lat e lng e inserito un segnalibro sempre con le rispettive coordinate.Ora non capisco come mai non posso inserire due mappe google nella stessa pagina.Ho provato a copiare ed incollare il codice ,ma nulla da fare,qualcuno puo' aiutarmi,o dirmi il motivo?Devo cambiare qualcosa del codice?Il codice che ho usato e' questo:
<!DOCTYPE html>
<html lang="it">
<head>
<title>Esempio di una mappa con Google maps v3</title>
<meta name="description" content="Un esempio di una mappa Google(tm) su una pagina HTML usando Google Maps v3, HTML5 e CSS3">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=it"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(38.990, 8.550); // centro della mappa
var myLatlng = new google.maps.LatLng(39.009570,8.449200); // segnapunto
// definizione della mappa
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.HYBRID,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR}
}
mymap = new google.maps.Map(document.getElementById("map"), myOptions);
// definizione segnapunto
var marker = new google.maps.Marker({
position: myLatlng,
map: mymap,
title:"Portixeddu"
});
}
</script>
</head>
<body onload="initialize()">
<div id="map" style="width: 395px; height: 340px; position: relative; top:0; overflow: hidden;"></div>
</body>
</html>
... il programma non c'entra; ...dovresti chiedere là dove ti hanno fornito il codice, ...e, o, almeno mettere il LINK della pagina dove stai provando i codici; ...ne avevamo già parlato qui, ... https://helpcenter.websitex5.com/post/127675 ...dove avresti dovuto proseguire nel postare...
... comunque, ad occhio e croce, guardando il codice, struttura a parte che eccede, dovresti usare DIV/ID diversi per ogni mappa...
.
Author
e come devo fare,se voglio due mappe con criteri diversi,per delle foto diverse tra loro ?Se inserisco un altro codice,mi cancella la mappa di prima :( Help me please...
... come già detto, e cioè così: http://www.zspace.it/kolasim/mappe/mappaJS.html
... come puoi rilevare dal codice del sorgente, una funzione dedicata per ogni DIV/mappa diversa...
.
Author
mi puoi incollare il codice html da utilizzare,per favore.L'esempio e' perfetto per quello che voglio io..please..
... lo puoi rilevare tu stesso dal mio esempio, c'è solo quello dentro; ...apri il sorgente e vedi direttamente...
... in poche parole, questa stringa va inserita una sola volta in ESPERTO | HEAD (/HEAD):
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=it"></script>
_____________________________________________
... la funzione initialize() la replicherai le volte che serve per le altre mappe modificandone il nome e il div di riferimento; ...nel mio esempio la seconda funzione l'ho chiamata initialize2() e quindi la dichiarazione "map" di riferimento chiamata "map2"; ...queste funzioni vanno racchiuse tra <script>***</script> e posizionate a seguito del precedente in ESPERTO | HEAD (/HEAD)
______________________________________________
... nella dichiarazione del BODY (e non nel /BODY!!) in ESPERTO | BODY aggiungerai le funzioni in questo modo:
initialize();initialize2();
... che nella pagina dovrà poi apparire così:
<body onload="initialize();initialize2();">
______________________________________________
... nella cella della griglia dove vuoi far apparire la mappa inserirai un Oggetto Codice HTML e nel tab HTML incollerai per la prima mappa questa stringa:
<div id="map" style="width: 395px; height: 340px; position: relative; top:0; overflow: hidden;"></div>
... nell'oggetto di un'altra cella per la seconda mappa incollerai:
<div id="map2" style="width: 395px; height: 340px; position: relative; top:0; overflow: hidden;"></div>
_________________________________________
... e via di seguito ... ... .. .. .. . . . . .
... sono solo dei copia/incolla che devi fare e quindi modificare i riferimenti e gli ID...
... guarda nell'esempio senza possibilità di dubbi...
...
... io non ho il programma, ma tu lo devi conoscere...
.
ciao
Author
grazie tante KolAsim ,sei stato davvero chiaro e preciso,complimenti,ottimo supporto per website x5.Grazie :)Ora potro' fare quello che avevo in mente :)
Author
ciao carissimo Kolasim,mi sto amazzando ma non riesco a far uscire la seconda mappa,mi incolleresti direttamente qua il codice per intero che dovro' applicare nel secondo codice html ke dovro' inserire per la seconda mappa.Sto uscendo di testa,non riesco ancora a visualizzarla nel sito,nonostante abbia cercato di seguire il tuo esempio ....ti ringrazierei tanto :(
... nella sezione HEAD, all'interno dello stesso SCRIPT della mappa 1 ...ed a seguito, incolla questo codice:
function initialize2() { var latlng = new google.maps.LatLng(45.735206, 9.443908); // centro della mappa var myLatlng = new google.maps.LatLng(45.735206, 9.443908); // segnapunto // definizione della mappa var myOptions = { zoom: 10, center: latlng, mapTypeId: google.maps.MapTypeId.HYBRID, mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR} } mymap = new google.maps.Map(document.getElementById("map2"), myOptions); // definizione segnapunto var marker = new google.maps.Marker({ position: myLatlng, map: mymap, title:"Portixeddu" }); }
... personalizando oltre alle coordinate tue, anche map2 (che per l'altra mappa è chiamata map)
_______________________________________
... per la dichiarazione del BODY fai come detto prima, incollando:
initialize();initialize2();
_______________________________________
...nel secondo Oggetto Codice HTML ntab HTML incolli questa stringa di codice:
<div id="map2" style="width: 395px; height: 340px; position: relative; top:0; overflow: hidden;"></div>
___________________________________
.
... per continuare sarebbe meglio che posti il LINK di quella Pagina...
.
ciao
Author
ciao kolAsim,questo e' il codice che ho cercato di capire dalle tue risposte che ho inserito nel modello html per creare la seconda mappa,ma non si vede nulla,sicuramente ho sbagliato qualcosa,puoi correggermi,per favore:
<!DOCTYPE html>
<html lang="it">
<head>
<script type="text/javascript">
function initialize2() { var latlng = new google.maps.LatLng(45.735206, 9.443908);
// centro della mappa var myLatlng = new google.maps.LatLng(45.735206, 9.443908); //
segnapunto // definizione della mappa var myOptions = { zoom: 10, center: latlng, mapTypeId: google.maps.MapTypeId.HYBRID, mapTypeControlOptions:
{style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR} } mymap = new google.maps.Map(document.getElementById("map2"), myOptions);
// definizione segnapunto var marker = new google.maps.Marker({ position: myLatlng, map: mymap, title:"Portixeddu" }); }
</script>
</head>
<body onload="initialize();initialize2();">
<div id="map2" style="width: 395px; height: 340px; position: relative; top:0; overflow: hidden;"></div>
1) ... lo SCRIPT deve andare in Proprietà della Pagina | Sezione ESPERTO selezionando "Prima della chiusura del tag HEAD"...
2) ... la dichiarazione del BODY, nel modo detto prima [ initialize();initialize2() ], deve andare in Proprietà della Pagina | Sezione ESPERTO selezionando " Proprietà del tag BODY "...
3) ... il <div id="map2" eccetera ...deve andare in Oggetto Codice HTML
... ! ... non devi fare uso di queste voci che hai riportato:
<!DOCTYPE html> <html lang="it"> <head> </head>
<body onload="initialize();initialize2();">
... come detto prima, dovresti postare il LINK del tuo esempio, così si potrebbe capire dove sarebbe il problema...
.
ciao
Author
Allora io non ci sto capendo piu nulla,voglio capire ma non essendo un programmatore non riesco.Posto questo link per capire cosa intendo.
http://www.mattiafrigeri.it/articoli/web/google-maps-aggiungere-mappa-segnaposto-personalizzato/
alla fine di questa pagina ce' un lungo codice ke io ho inserito nella "creazione pagina" di website x 5 ,tramite l ausilio del codice html
ecco la mappa mi compare,solo che non riesco a crearne due di mappe.
devo modificare solo nel codice della seconda mappa o anke nel codice della prima mappa?
ecco il codice ke ho utilizzato ora al completo,anke questa mappa mi piace:
<!DOCTYPE html> <html lang="it"> <head> <title>Segnaposto personalizzato</title> <style type="text/css"> div#gmaps-canvas { width:775px; height:300px; } </style> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> function initialize() { var myLatLng = new google.maps.LatLng(40.719614,-73.996251); var myOptions = { zoom: 14, center: myLatLng, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById("gmaps-canvas"), myOptions); var marker = new google.maps.Marker({ position: myLatLng, map: map, title:"Mi trovo a New York, nei pressi di Mott Street" }); var contentString = '<em>Sono qui!</em>'; var infoWindow = new google.maps.InfoWindow({ content: contentString }); google.maps.event.addListener(marker, 'click', function() { infoWindow.open(map,marker); }); } </script> </head> <body onload="initialize()"> <div id="gmaps-canvas"></div> </body> </html>
... devi seguire passo passo le indicazioni date precedentemente assegnando funzioni e DIV/ID con nome diverso per ogni mappa; nel mio esempio la funzione per la seconda mappa si chiama initialize2() che scrive nel ID chiamato map2 e quindi anche nel DIV l'ID è chiamato map2
... guardando il codice della mia pagine vedrai che è semplice e nel programma i codici li devi inserire esattamente nei modi detti, come nelle sezioni della mia pagina,
.
... segui attentamente quanto detto, altrimenti se non metti il LINK della pagina del tuo esempio, non se ne verrà a capo...
.