Prova a fare così:
file "mappa.htm"
Allo stesso livello del file "mappa.htm" crea una cartella di nome "js" e al suo interno mettici i file: jquery-1.2.6.js e mapscodice:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <META http-equiv=Content-Type content="text/html; charset=windows-1252"> <SCRIPT src="js/jquery-1.2.6.js" type=text/javascript></SCRIPT> <SCRIPT src="js/maps" type=text/javascript></SCRIPT> <SCRIPT type=text/javascript charset=utf-8> $(document).ready(function(){ //Start script when ready if (document.getElementById("map_canvas")) {//Checks to see that the page element exists and to prevent conflict with other maps //Default map center location var defaultLat = 50.5; var defaultLon = -1.4; var markers = new Array(); markers[0] = new Array(new GMarker(new GLatLng(12.345678,12.345678)), "Prima indicazione", "Qui ci puoi mettere L'indirizzo e se vuoi altre indicazioni altre cose che vuoi tu"); markers[1] = new Array(new GMarker(new GLatLng(13.345678,12.345679)), "Seconda indicazione", "Qui ci puoi mettere L'indirizzo e se vuoi altre indicazioni altre cose che vuoi tu"); var map = new google.maps.Map2($("#map_canvas").get(0));//Initialise google maps map.setCenter(new GLatLng(defaultLat, defaultLon), 8);//Set location to the default and zoom level to 8 map.disableDoubleClickZoom();//Disable zooming $.each(markers,function(i,marker){ var delayTime = ((i * 3000) / (0.5 * markers.length));//Delay time decreases as number of markers increases setTimeout(function(){ map.addOverlay(marker[0]); $("<li />") .html(markers[i][1])//Use list item label from array .click(function(){ displayPoint(marker[0], i); setActive(this);//Show active state }) .appendTo("#map_list"); GEvent.addListener(marker[0], "click", function(){ displayPoint(marker[0], i); setActive(i);//Show active location }); displayPoint(marker[0], i); setActive(i);//Show active location if (i == (markers.length - 1)) {//If last item in array setTimeout(function(){//Remove active class and fade marker after delay $("#map_message").fadeOut(); //setActive(); }, 3500); } }, delayTime); }); $("#map_list").css("opacity","0.2").animate({opacity: 1}, 1100);//Fade in menu $("#map_message").appendTo(map.getPane(G_MAP_FLOAT_SHADOW_PANE)); function displayPoint(marker, index){ if ($('#map_message').is(':hidden')) {//Allow toggling of markers $('#map_message').fadeIn(); } else{//Remove all .active classes and hide markers $('#map_message').hide(); $(".active").removeClass(); } //$("#map_message").hide();//Default behaviour, doesn't allow toggling var moveEnd = GEvent.addListener(map, "moveend", function(){ var markerOffset = map.fromLatLngToDivPixel(marker.getLatLng()); $("#map_message") .html(markers[index][2])//Use information from array .fadeIn() .css({ top:markerOffset.y, left:markerOffset.x }); GEvent.removeListener(moveEnd); }); map.panTo(marker.getLatLng()); } function setActive(el){ $(".active").removeClass();//Remove all .active classes $("#map_list").find('li').eq(el).addClass('active');//Find list element equal to index number and set active $(el).addClass('active');//Set active if list element clicked directly } }//End if map_canvas exists }); //End onReady </SCRIPT> <STYLE type=text/css media=screen>.map { BORDER-RIGHT: 0px; PADDING-RIGHT: 0px; BORDER-TOP: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: 0px; WIDTH: 800px; PADDING-TOP: 0px; BORDER-BOTTOM: 0px; HEIGHT: 500px } #map_canvas { FLOAT: left } #map_list { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: #ebebeb; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 150px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none; HEIGHT: 500px } #map_list LI { PADDING-RIGHT: 0.5em; PADDING-LEFT: 0.5em; PADDING-BOTTOM: 0.5em; PADDING-TOP: 0.5em } #map_list LI:hover { BACKGROUND: #555; CURSOR: hand; COLOR: #fff } #map_list LI.active { BACKGROUND: #555; COLOR: #fff } #map_list LI.active:hover { BACKGROUND: #363636; CURSOR: default } #map_message { PADDING-RIGHT: 0.5em; DISPLAY: none; PADDING-LEFT: 0.5em; FONT-SIZE: 0.9em; BACKGROUND: #555; PADDING-BOTTOM: 0.5em; WIDTH: 12em; COLOR: #fff; PADDING-TOP: 0.5em; POSITION: absolute } #map_message IMG { BORDER-RIGHT: 0px; BORDER-TOP: 0px; MARGIN-TOP: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px } #map_message A { COLOR: #caeaf9; BORDER-BOTTOM: #ebebeb 1px solid } #map_message A:hover { COLOR: #fff; BORDER-BOTTOM: #caeaf9 1px solid } </STYLE> <!--[if IE 7]> <META content="MSHTML 6.00.6000.16850" name=GENERATOR></HEAD> <BODY> <style> #map_list li{ width: 100%; zoom: 1; float: left; } </style> <![endif]--> <DIV class=map id=map_canvas></DIV> <UL class=map_list id=map_list>[/list] <DIV id=map_message></DIV></BODY></HTML>
che puoi scaricarti direttamente dal link da te postato
http://www.erikwhite.net/gmapjquery.html
semplicemente facendo:
File
salva con nome...
poi dalla casella: Salva come,
seleziona: pagina web completa (*.htm, *.html)
scegli un nome da dare o lascia quello proposto e salvalo dove vuoi.
ti verrà salvata assieme alla pagina una cartella che al suo interno contiene i due file. Copiali e incollali nella tua cartella "js"
fai doppio clik sulla pagina mappa.htm e vedrai che funziona.
![]()

Rispondi quotando