jQuery mobile add new markers to an existing map

Question

I am working with the jQuery mobile google maps example here, focusing on the first "Basic Map Example".

http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-mobile.html

I want to be able to dynamically add markers to the basic_map, but I am having some trouble. I'm new to jQuery mobile and JavaScript.

Here is my edited version of the basic-map example from the jQuery mobile UI website. If you save it in the jQuery mobile demos folder, then everything should render properly. I have added a button at the bottom of the map page and also the addMarkers function. When you load the page, the map shows up centered at the mobileDemo coordinates (-41, 87), which is close to chicago, but not quite there. When you click on the button, I want to update the map with another marker at the chicago point, but the screen goes blank.

This is just a mock example of what I really want to do. In my longer, more complicated program, I'm querying a database to find addresses that match the query, then I want to put those markers up on the map dynamically. What do I need to change about this source code to be able to plot the Chicago point (or other markers on the fly)?

<!doctype html>
<html lang="en">
   <head>
        <title>jQuery mobile with Google maps - Google maps jQuery plugin</title>
        <link type="text/css" rel="stylesheet" href="css/jquery-mobile-1.0/jquery.mobile.css" />
        <link type="text/css" rel="stylesheet" href="css/mobile.css" />
        <script type="text/javascript" src="js/modernizr-2.0.6/modernizr.min.js"></script>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places"></script> 
        <script type="text/javascript" src="js/jquery-1.7.1/jquery.min.js"></script>
        <script type="text/javascript" src="js/jquery-mobile-1.0/jquery.mobile.min.js"></script>
        <script type="text/javascript" src="js/jquery.ui-1.8.15/jquery.ui.autocomplete.min.js"></script>
        <script type="text/javascript" src="js/demo.js"></script>
        <script type="text/javascript" src="../ui/jquery.ui.map.js"></script>
        <script type="text/javascript" src="../ui/jquery.ui.map.services.js"></script>
        <script type="text/javascript" src="../ui/jquery.ui.map.extensions.js"></script>
        <script type="text/javascript">

            var mobileDemo = { 'center': '41,-87', 'zoom': 7 };
            var chicago = new google.maps.LatLng(41.850033,-87.6500523);
            var map 
            function addMarkers(){
                map = new google.maps.Map(document.getElementById('map_canvas'));
                var marker = new google.maps.Marker({
                    map: map,
                    position: chicago
                });
            }

            $('#basic_map').live('pageinit', function() {
                demo.add('basic_map', function() {
                    $('#map_canvas').gmap({'center': mobileDemo.center, 'zoom': mobileDemo.zoom, 'disableDefaultUI':true, 'callback': function() {
                        var self = this;
                        self.addMarker({'position': this.get('map').getCenter() }).click(function() {
                            self.openInfoWindow({ 'content': 'Hello World!' }, this);
                        });
                    }}); 
                }).load('basic_map');
            });

            $('#basic_map').live('pageshow', function() {
                demo.add('basic_map', function() { $('#map_canvas').gmap('refresh'); }).load('basic_map');
            });
        </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>
            </div>
            <div data-role="content">
                <a href="#" data-role="button" data-theme="b" onclick="addMarkers()">Add Some More Markers</a>
            </div>
        </div>      
    </body>
</html>

Apostolos Emmanouilidis · Accepted Answer · 2013-03-02T12:26:30.750

Please check the below example.

In the first map load there isn't any marker. When you click the button then a marker is dynamically added without a need for page or map refresh.

<!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 };

                function initialize() {
                    $('#map_canvas').gmap({ 'center': mobileDemo.center, 'zoom': mobileDemo.zoom, 'disableDefaultUI':false });
                }

                $(document).on("pageinit", "#basic-map", function() {
                    initialize();
                });

                $(document).on('click', '.add-markers', function(e) {
                        e.preventDefault();
                        $('#map_canvas').gmap('addMarker', { 'position': chicago } );
                });
            </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>

The initial map:

enter image description here

The map after the button's click:

enter image description here

Perfect! Thanks a bunch! I have a very simple follow up question. If I wanted to also display an infowindow that says "hello world" when I click the marker on the map, how can I do that? I've looked at the documentation and I'm a bit confused because I can't find any example that has the syntax `$('#map_canvas').gmap('addMarker', { 'position': chicago } );` with an infowindow. Thanks again. — erin, Aug 23 '12 at 01:07
I posted the follow up question here so you can get some more reputation for answering it: http://stackoverflow.com/questions/12083564/syntax-for-adding-an-infowindow-to-a-marker-using-jquery-mobile-google-maps-api — erin, Aug 23 '12 at 01:30
Sorry, I hadn't seen your first comment. I'm glad I could help :) — Apostolos Emmanouilidis, Aug 23 '12 at 09:20

jQuery mobile add new markers to an existing map

1 Answers1