problema su ie per google maps/jquery

**m.oldani** · 15-06-2009, 16:37

Ciao a tutti.
Volevo chiedere se qualcuno era in grado di capire perchè questo script con ie non funziona. Io non sono pratico di javascript ed è un giorno che sto diventando matto. E' uno script fantastico se andasse anche su ie!! (ve lo stra consiglio!)

<script type="text/javascript" src="http://www.google.com/jsapi?key=VOSTRA GOOGLEKEY"></script>
<script type="text/javascript">
google.load("jquery", '1.3');
google.load("maps", "2.x");
</script>

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){ //Start script when ready
//Checks to see that the page element exists and to prevent conflict with other maps

var markers = new Array();
markers[0] = new Array(new GMarker(new GLatLng(12.345678,12.345678)), "Dati della colonna", "Dai Tips sulla mappa");

var map = new google.maps.Map2($("#map_canvas").get(0));
map.setUIToDefault();
map.setCenter(new GLatLng(markers[0][0]), 3);//Set location to first array item

$.each(markers,function(i,marker){
var delayTime = ((i * 5000) / (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({opaci ty: 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>

è possibile vedere lo script direttamente sul sito dell'autore
http://www.erikwhite.net/gmapjquery.html

Grazie mille in anticipo!
Ciao!!

**m.oldani** · 21-06-2009, 11:40

Nessuno riesce a darmi una mano?!?..

**michele.santoro** · 21-06-2009, 13:24

Prova così:

codice:

<html>
<script type="text/javascript" src="http://www.google.com/jsapi?key=VOSTRA GOOGLEKEY"></script>
<script type="text/javascript">
google.load("jquery", '1.3');
google.load("maps", "2.x");
</script>

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){ //Start script when ready
//Checks to see that the page element exists and to prevent conflict with other maps

var markers = new Array();
markers[0] = new Array(new GMarker(new GLatLng(12.345678,12.345678)), "Dati della colonna", "Dai Tips sulla mappa"); 

var map = new google.maps.Map2($("#map_canvas").get(0));
map.setUIToDefault();
map.setCenter(new GLatLng(markers[0][0]), 3);//Set location to first array item


$.each(markers,function(i,marker){
var delayTime = ((i * 5000) / (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>
<!--[if IE 7]>
<META content="MSHTML 6.00.6000.16850" name=GENERATOR></HEAD>
<BODY>#map_list li{ width: 100%; zoom: 1; float: left; }<![endif]--> 
<DIV class=map id=map_canvas></DIV>
<UL class=map_list id=map_list>[/list]
<DIV id=map_message></DIV></BODY></HTML>

**m.oldani** · 22-06-2009, 09:24

ciao michele. Grazie mille per l'aiuto ma a quanto pare il problema mi permane. Mi piacerebbe tu mi spiegassi gli eventuali errori così da capire meglio e non "rompere" più in futuro e magari aiutando qualcun altro come me sul forum.

**michele.santoro** · 22-06-2009, 17:34

Prova a fare così:
file "mappa.htm"

codice:

<!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>

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 maps
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.

Discussione: problema su ie per google maps/jquery

Strumenti discussione

Ricerca discussione

Visualizza

problema su ie per google maps/jquery

Permessi di invio