Home/ Questions/Q 8490653
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T22:11:20+00:00

I am making a store locator app for mobile devices. A DB query runs

  • 0

I am making a store locator app for mobile devices. A DB query runs and gets distances and lan, lat values etc and shows the nearest stores on a page.

Then the user has the ability to click “view on map” to view the store and the current location on a google map. Heres main part of the code which is from the ajax() success callback:

                success: function(result){

                var rowCount = result.name.length;
                if(rowCount <= 0){
                    $('span.locatorResults').html("There were no stores found within your specified radius.");
                }else{

                    $( '#storeLocatorMapDisplay' ).live( 'pageshow',function(event){
                        initializeMapAll(); //This initialise SHOULD be called while the map_canvas div is in the DOM. This is why we have to do hacky workaround of resizing etc.. 
                    });

                    $('span.locatorResults').html("There are " + rowCount + " results within a " + result.radius + " mile radius of your current location:<br /><br />");

                    for (var i = 0; i < rowCount; i++) {

                        var storelatlng = new google.maps.LatLng(
                            parseFloat(result.storeLat[i]),
                            parseFloat(result.storeLon[i])
                        );
                        $( '#storeLocatorMapDisplay' ).live( 'pageshow',function(event){
                            createMarkerAll(storelatlng, result.name[i], result.address[i]);
                        });
                    }
                    $( '#storeLocatorMapDisplay' ).live( 'pageshow',function(event){
                        createMarkerCurrentLocation(currentlatlng);
                    });
                }                   
            }

My problem was, I was getting lots of grey padding around the map area and I read the its because the map was getting initialised BEFORE the map_canvas div is loaded into the DOM.

So I decided to initialise the map AND the markers when the map page was loaded, but this requires a lot of .live(‘pageshow’) events.

My question is… is there an easier way to initialise the map before creating the markers and before the map canvas is loaded into the DOM??? Bearing in mind that the markers (as far as i know) have to ge generated in the success callback from the ajax request.

Thanks for your time 🙂

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The following example works exactly as you want. The markers are created inside the AJAX success function. For testing reasons I created a cityList array with the latitudes, longitutes. This cityList array should be removed and the data should be retrieved from the AJAX response data.

    <!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">

            var demoCenter = new google.maps.LatLng(41,-87),
                map;

            function initialize()
            {
                map = new google.maps.Map(document.getElementById('map_canvas'), {
                   zoom: 7,
                   center: demoCenter,
                   mapTypeId: google.maps.MapTypeId.ROADMAP
                 });
            }

            function addMarkers()
            {
                // perform your AJAX here. In this example the markers are loaded through the cityList array
                $.ajax({
                    type:'post',
                    url:'test.html',
                    data:'',
                    success:function(data)
                    {

                        // imagine that the data in this list
                        // will be retrieved from the AJAX response
                        // i used the cityList array just for testing
                        var cityList = [
                                ['Chicago', 41.850033, -87.6500523, 1],
                                ['Illinois', 40.797177,-89.406738, 2]
                            ],
                            marker,
                            i,
                            infowindow = new google.maps.InfoWindow();

                        for (i = 0; i < cityList.length; i++) 
                        {  
                            marker = new google.maps.Marker({
                                position: new google.maps.LatLng(cityList[i][1], cityList[i][2]),
                                map: map,
                                title: cityList[i][0]
                            });

                            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                                return function() {
                                    infowindow.setContent(cityList[i][0]);
                                    infowindow.open(map, marker);
                                }
                            })(marker, i));
                        }
                    }
                });
            }

            $(document).on("pageinit", "#basic-map", function() {
                initialize();
                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>
            </div>
        </div>      
    </body>
</html>
    • 0