InfoWindows are not unique, google maps API v3, jquery mobile

StackOverflow https://stackoverflow.com/questions/12099351

Question

I have a simple program where I want the following to happen:

  1. Click "Add Some Markers to Map", will show 4 markers with the locations specified in the cityList array.
  2. Click on a marker and it will open up and infoWindow and display the corresponding index in the 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

  1. How can I fix this?
  2. I've tried implementing this same code using a global variable for the map and it doesn't work. Why not? For example, if I replace
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>
Was it helpful?

Solution

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>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top