herşey tamam fakat slider otomatik geçiş yaptıramadım
normalde mouseenter kısmı(satır 27) yani üstüne gelince mapsde değişmesini istiyo bende istiyorumki li taglarına hover classı eklendiğinde mapdede değişim olsun yani ücretiyle çözerim diyen ücreti pm atsın.
<!DOCTYPE html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<title>Google Map Slider</title>
<link rel='stylesheet' type='text/css' href='css/style.css' />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=true'></script>
<script type='text/javascript'>
$(function() {
var chicago = new google.maps.LatLng(41.924832, -87.697456),
pointToMoveTo,
first = true,
curMarker = new google.maps.Marker({}),
$el;
var myOptions = {
zoom: 10,
center: chicago,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map($("#map_canvas")[0], myOptions);
$("#locations li").mouseenter(function() {
$el = $(this);
if (!$el.hasClass("hover")) {
$("#locations li").removeClass("hover");
$el.addClass("hover");
if (!first) {
// Clear current marker
curMarker.setMap();
// Set zoom back to Chicago level
// map.setZoom(10);
}
// Move (pan) map to new location
pointToMoveTo = new google.maps.LatLng($el.attr("data-geo-lat"), $el.attr("data-geo-long"));
map.panTo(pointToMoveTo);
// Add new marker
curMarker = new google.maps.Marker({
position: pointToMoveTo,
map: map,
icon: "images/marker.png"
});
// On click, zoom map
google.maps.event.addListener(curMarker, 'click', function() {
map.setZoom(14);
});
first = false;
}
});
$("#locations li:first").trigger("mouseenter");
});
function animasyon(){
i = parseInt($('#xx').html());
$("#locations li").removeClass("hover");
$("#locations li:eq("+i+")").addClass("hover");
//zz();
i ++;
if(i>3){
i = 0;
}
$('#xx').html(i);
setTimeout("animasyon();", 2000);
}
setTimeout("animasyon();", 2000);
</script>
<script language="javascript" type="text/javascript">
window.onresize = function (e){
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
$("#map_canvas").css("width",myWidth);
$("#map_canvas").css("height",myHeight);
}
</script>
<!--<script>
function animasyon(){
i = parseInt($('#xx').html());
$("#locations li").removeClass("hover");
$("#locations li:eq("+i+")").addClass("hover");
//zz();
i ++;
if(i>3){
i = 0;
}
zz();
$('#xx').html(i);
setTimeout("animasyon();", 2000);
}
setTimeout("animasyon();", 2000);
</script>-->
</head>
<body>
<div id="xx">0</div>
<div id="page-wrap">
<ul id="locations">
<li data-duration="2000" data-geo-lat="41.9786" data-geo-long="-87.9047">
<h3>O'Hare Airport</h3>
<p>Flights n' stuff</p>
</li>
<li data-duration="2000" data-geo-lat="41.927118" data-geo-long="-87.697621">
<h3>Bueno Terra</h3>
<p>World-class Italian</p>
</li>
<li data-duration="2000" data-geo-lat="41.921735" data-geo-long="-87.664688">
<h3>Pequod's Pizza</h3>
<p>Unique pan-style pizza</p>
</li>
<li data-duration="2000" data-geo-lat="41.927568" data-geo-long="-87.705201">
<h3>The Rocking Horse</h3>
<p>Nice bar</p>
</li>
</ul>
<div id="map_div"><div id="map_canvas"></div></div>
</div>
</body>
</html> 