Hello.
I wrote the following code to display
markers. There are 2 buttons which show Next or Previous Infowindow for
markers. But problem is that InfoWindows are not shown using
google.
maps.event.trigger
Can someone help me with this problem. Thank you.
Here is code:
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google
Maps JavaScript API v3 Example: Common Loader</title>
<script type="text/javascript" src="http://maps.
google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var infowindow;
var map;
var bounds;
var
markers = [];
var markerIndex=0;
function initialize() {
var myLatlng = new
google.
maps.LatLng(41.051407, 28.991134);
var myOptions = {
zoom: 5,
center: myLatlng,
mapTypeId:
google.
maps.MapTypeId.ROADMAP
}
map = new
google.
maps.Map(document.getElementById("map_canvas"), myOptions);
markers = document.getElementsByTagName("marker");
for (var i = 0; i <
markers.length; i++) {
var latlng = new
google.
maps.LatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var marker = createMarker(markers[i].getAttribute("name"), latlng, markers[i].getAttribute("phone"), markers[i].getAttribute("distance"));
}
rebound(map);
}
function createMarker(name, latlng, phone, distance) {
var marker = new
google.
maps.Marker({position: latlng, map: map});
var myHtml = "<table style='width:100%;'><tr><td><b>" + name + "</b></td></tr><tr><td>" + phone + "</td></tr><tr><td align='right'>" + distance + "</td></tr></table>";
google.
maps.event.addListener(marker, "click", function() {
if (infowindow) infowindow.close();
infowindow = new
google.
maps.InfoWindow({content: myHtml});
infowindow.open(map, marker);
});
return marker;
}
function rebound(mymap){
bounds = new
google.
maps.LatLngBounds();
for (var i = 0; i <
markers.length; i++) {
bounds.extend(new
google.
maps.LatLng(parseFloat(markers[i].getAttribute("lat")),parseFloat(markers[i].getAttribute("lng"))));
}
mymap.fitBounds(bounds);
}
function showNextInfo()
{
if(markerIndex<markers.length-1)
markerIndex++;
else
markerIndex = 0 ;
alert(markers[markerIndex].getAttribute('name'));
google.
maps.event.trigger(markers[markerIndex],"click");
}
function showPrevInfo()
{
if(markerIndex>0)
markerIndex--;
else
markerIndex =
markers.length-1 ;
google.
maps.event.trigger(markers[markerIndex],'click');
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:400px; height:300px"></div>
<markers>
<marker name='Name1' lat='41.051407' lng='28.991134' phone='+902121234561' distance=''/>
<marker name='Name2' lat='40.858746' lng='29.121666' phone='+902121234562' distance=''/>
<marker name='Name3' lat='41.014604' lng='28.972256' phone='+902121234562' distance=''/>
<marker name='Name4' lat='41.012386' lng='26.978350' phone='+902121234562' distance=''/>
</markers>
<input type="button" onclick="showPrevInfo()" value="prev"> <input type="button" onclick="showNextInfo()" value="next">
</body>
</html>
