Home/ Questions/Q 8468609
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T15:58:58+00:00

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

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0