<!-- Google maps and jQuery script, based on http://marcgrabanski.com/article/jquery-google-maps-tutorial-basics -->
<html>
<head>
<title>Google Maps and jQuery extended</title>
<!-- http://code.google.com/apis/ajaxlibs/documentation/ -->
<script type="text/javascript" src="/js/jquery-1.2.6.js"></script>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAAhYLDigsVpz84AGTe6WVrZBQ9ha3oDqOvCaQiRzD8u5icJ0_NnRR-C1D6Azqe8x6Iv-vl7Ok6IA1T6w" 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(51.308124, -0.656756)), "Location1", "<strong>Address Line</strong><br/>Some information<br />Can go here<br />01234 567 890");
markers[1] = new Array(new GMarker(new GLatLng(50.82719221187368, -1.1597442626953125)), "Location2", "<strong>Address Line</strong><br/>Some information<br />Can go here<br />01234 567 890<br /><a href='http://www.google.com'>google.com</a>");
markers[2] = new Array(new GMarker(new GLatLng(50.933883, -1.397458)), "Location3", "<strong>Address Line</strong><br/>Some information<br />Can go here<br />01234 567 890<br /><a href='http://www.google.com'>google.com</a>");
markers[3] = new Array(new GMarker(new GLatLng(51.41, -0.76)), "Location4", "<strong>Address Line</strong><br/>Some information<br />Can go here<br />01234 567 890");
markers[4] = new Array(new GMarker(new GLatLng(50.93, -1.26)), "Location5", "<strong>Address Line</strong><br/>Some information<br />Can go here<br />01234 567 890<br /><a href='http://www.google.com'>google.com</a>");
markers[5] = new Array(new GMarker(new GLatLng(50.75, -1.38999)), "Location6", "<strong>Address Line</strong><br/>Some information<br />Can go here<br />01234 567 890<br /><a href='http://www.google.com'>google.com</a>");
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
//This section works fine but does not animate on load
/*
$(markers).each(function(i,marker){
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
if ($('#map_message').is(':hidden')) {//Allow toggling of active state
setActive();
}
})
.appendTo("#map_list");
GEvent.addListener(marker[0], "click", function(){
displayPoint(marker[0], i);
setActive(i);//Show active location
if ($('#map_message').is(':hidden')) {//Allow toggling of active state
setActive();
}
});
});
*/
$.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{
height: 500px;
width: 800px;
margin: 0;
padding: 0;
border: 0;
}
#map_canvas{
float: left;
}
#map_list{
float: left;
height: 500px;
width: 150px;
margin: 0;
padding: 0;
background: #EBEBEB;
list-style: none;
}
#map_list li{
padding: .5em;
}
#map_list li:hover {
background: #555;
color: #FFF;
cursor: pointer;
cursor: hand;
}
#map_list li.active{
background: #555;
color: #FFF;
}
#map_list li.active:hover{
background: #363636;
cursor: default;
}
#map_message{
display: none;
position: absolute;
width: 12em;
padding: .5em;
background: #555;
font-size: .9em;
color: #FFF;
}
#map_message img{
border: 0;
margin-top: 0;
}
#map_message a{
color: #CAEAF9;
border-bottom: 1px solid #EBEBEB;
}
#map_message a:hover{
color: #FFF;
border-bottom: 1px solid #CAEAF9;
}
p{
clear: both;
margin-top: 1em;
}
</style>
<!--[if IE 7]>
#map_list li{
width: 100%;
zoom: 1;
float: left;
}
<![endif]-->
</head>
<body>
<div class="map" id="map_canvas"></div>
<ul class="map_list" id="map_list"></ul>
<div id="map_message"></div>
<p>You could also try the example that <a href="/gmapjqueryhover.html"> utilises hover effects</a>.</p>
</body>
</html>
http://www.erikwhite.net/gmapjquery.html
|
