I have a simple program where I want the following to happen:
cityList
array.cityList
array. So if you click on the marker corresponding to cityList[0]
, it will show you "0" in the infoWindow.I can add the markers and add the infoWindows, but the content in the infoWindows are incorrect. First of all, they are all the same, and secondly the are displaying the value of the iterator i
at the end of the loop.
My questions are
function initialize()
{
$('#map_canvas').gmap({ 'center': city0, 'zoom': 7, 'disableDefaultUI':false });
}
with
var map;
function initialize()
{
map = new google.maps.Map(document.getElementById("map_canvas"), {'center': city0, 'zoom': 7, 'disableDefaultUI':false } );
}
then the map doesn't even show up when I load the page.
Here is my code:
<!doctype html>
<html lang="en">
<head>
<title>jQuery mobile with Google maps - Google maps jQuery plugin</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"> </script>
<script type="text/javascript" src="http://jquery-ui-map.googlecode.com/svn/trunk/ui/min/jquery.ui.map.min.js"></script>
<script type="text/javascript">
var city0 = new google.maps.LatLng(41.850033,-87.6500523);
var city1 = new google.maps.LatLng(41,-87);
var city2 = new google.maps.LatLng(41.5,-87.5);
var city3 = new google.maps.LatLng(41.4,-87.2);
var cityList = [city0, city1, city2, city3];
function initialize()
{
$('#map_canvas').gmap({ 'center': city0, 'zoom': 7, 'disableDefaultUI':false });
}
$(document).ready(function()
{
initialize();
$('.add-markers').click(function() {
for(var i=0; i<cityList.length; i++){
$('#map_canvas').gmap('addMarker', { 'position': cityList[i] } ).click(function() {
$('#map_canvas').gmap('openInfoWindow', {'content': i.toString()}, this);
});
}
});
});
</script>
</head>
<body>
<div id="basic-map" data-role="page">
<div data-role="header">
<h1><a data-ajax="false" href="/">jQuery mobile with Google maps v3</a> examples</h1>
<a data-rel="back">Back</a>
</div>
<div data-role="content">
<div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
<div id="map_canvas" style="height:350px;"></div>
</div>
<a href="#" class="add-markers" data-role="button" data-theme="b">Add Some More Markers</a>
</div>
</div>
<div id="info-page" data-role="page">
<div data-role="header">
<h1><a data-ajax="false" href="/">more info v3</a> examples</h1>
<a data-rel="back">Back</a>
</div>
<div data-role="content">
<div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
<div id="info_page" style="height:350px;"></div>
</div>
<div id="moreInfo"></div>
</div>
</body>
</html>
I see your point. You were right about the problems in creating a list of markers with unique infoWindows using the jquery-ui-maps plugin.
To overcome these problems I'm creating a unique id (id: i) in each $marker definition and the id is equal to the for loop index named i. In the click event I know the correct index from the marker's id and i'm using it to retrieve the correct cityList value.
<!doctype html>
<html lang="en">
<head>
<title>jQuery mobile with Google maps - Google maps jQuery plugin</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"> </script>
<script type="text/javascript" src="http://jquery-ui-map.googlecode.com/svn/trunk/ui/min/jquery.ui.map.min.js"></script>
<script type="text/javascript">
var chicago = new google.maps.LatLng(41.850033,-87.6500523),
mobileDemo = { 'center': '41,-87', 'zoom': 7 },
cityList = [
['Chicago', 41.850033, -87.6500523, 1],
['Illinois', 40.797177,-89.406738, 2]
];
function initialize()
{
$('#map_canvas').gmap({ 'center': mobileDemo.center, 'zoom': mobileDemo.zoom, 'disableDefaultUI':false });
}
function addMarkers()
{
for (var i = 0; i < cityList.length; i++)
{
var $marker = $('#map_canvas').gmap('addMarker', {id: i, 'position': new google.maps.LatLng(cityList[i][1], cityList[i][2]), title: cityList[i][0]});
$marker.click(function() {
$('#map_canvas').gmap('openInfoWindow', {'content': cityList[this.id][0]}, this);
});
}
}
$(document).on("pageinit", "#basic-map", function() {
initialize();
});
$(document).on('click', '.add-markers', function(e) {
e.preventDefault();
addMarkers();
});
</script>
</head>
<body>
<div id="basic-map" data-role="page">
<div data-role="header">
<h1><a data-ajax="false" href="/">jQuery mobile with Google maps v3</a> examples</h1>
<a data-rel="back">Back</a>
</div>
<div data-role="content">
<div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
<div id="map_canvas" style="height:350px;"></div>
</div>
<a href="#" class="add-markers" data-role="button" data-theme="b">Add Some More Markers</a>
</div>
</div>
</body>
</html>