I am using Google Maps JavaScript API to load map inside my mobile website. When I navigate from the previous page map won't load but if I refresh the page map load as expected. If I use the JavaScript inside the body even the page is not loading. I can't figure out the problem. Is it something with the previous page code ?

Here is my code in Head tag.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.1.0.min.css" />  
<link href="css/site.css" rel="stylesheet" type="text/css" />
<script src="./js/jquery-1.9.1.js"></script>
<script src=".1.0/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" 
src=";sensor=false">
</script>
        <script type="text/javascript">
            function initialize() {
                var myLatlng = new google.maps.LatLng(<?php echo $longtitude ?>, <?php echo $latitude ?>);

                var mapOptions = {
                  zoom: 10,
                  center: myLatlng,
                  mapTypeId: google.maps.MapTypeId.ROADMAP
                };

                var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

                var marker = new google.maps.Marker({
                    position: myLatlng,
                    map: map,
                    title: 'Location'
                });
            }
             google.maps.event.addDomListener(window, 'load', initialize);

             $(document).delegate('#content', 'pageinit', function () {
               navigator.geolocation.getCurrentPosition(initialize);
                });
        </script>
</head>

Here is my Body Tag

<body >
    <div id="wrapper">
        <div class="header">
            <a href="index.html"><img src="images/logo-small.png" alt="logo"/></a>
        </div>
        <div class="back">
        <a data-rel="back"><img src="images/back.png"/></a>
    </div> 
        <div id="content">
            <div class="list">
                <div class="list-items" id="info">
                    <?php echo "<h3>$sa1<span>$postcode<span>$sa2</span></span></h3><h2>$price</h2>";?>
                <br class="clear" />
                <br class="clear" />
                </div>
            </div>
            <br class="clear" />
        <div id="map-canvas">
        </div>
    </div>
    </div>
</body>

I refer question This and This but it's not working with my code.

Here is my code in Head tag.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.1.0.min.css" />  
<link href="css/site.css" rel="stylesheet" type="text/css" />
<script src="./js/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" 
src="http://maps.googleapis.com/maps/api/js?key=xxxxxxxx&sensor=false">
</script>
        <script type="text/javascript">
            function initialize() {
                var myLatlng = new google.maps.LatLng(<?php echo $longtitude ?>, <?php echo $latitude ?>);

                var mapOptions = {
                  zoom: 10,
                  center: myLatlng,
                  mapTypeId: google.maps.MapTypeId.ROADMAP
                };

                var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

                var marker = new google.maps.Marker({
                    position: myLatlng,
                    map: map,
                    title: 'Location'
                });
            }
             google.maps.event.addDomListener(window, 'load', initialize);

             $(document).delegate('#content', 'pageinit', function () {
               navigator.geolocation.getCurrentPosition(initialize);
                });
        </script>
</head>

Here is my Body Tag

<body >
    <div id="wrapper">
        <div class="header">
            <a href="index.html"><img src="images/logo-small.png" alt="logo"/></a>
        </div>
        <div class="back">
        <a data-rel="back"><img src="images/back.png"/></a>
    </div> 
        <div id="content">
            <div class="list">
                <div class="list-items" id="info">
                    <?php echo "<h3>$sa1<span>$postcode<span>$sa2</span></span></h3><h2>$price</h2>";?>
                <br class="clear" />
                <br class="clear" />
                </div>
            </div>
            <br class="clear" />
        <div id="map-canvas">
        </div>
    </div>
    </div>
</body>

I refer question This and This but it's not working with my code.

Share Improve this question edited May 23, 2017 at 10:31 CommunityBot 11 silver badge asked Apr 8, 2013 at 6:33 Chrishan 4,1067 gold badges49 silver badges68 bronze badges

Have you tried data-ajax="false" on the map page link? – Omar Commented Apr 8, 2013 at 9:29

Add a comment |

5 Answers 5

Sorted by: Reset to default 8

Problems

First of all, why are you using jQuery Mobile? I don't see the point in your current example.

In this case jQuery Mobile is the main problem. Because jQuery Mobile is used everything will be loaded into the DOM. When you "navigate from the previous page" page is not refreshed and this line:

google.maps.event.addDomListener(window, 'load', initialize);

can't trigger. It will trigger only if you manually refresh the page.

Second thing, you cant use jQuery Mobile page events without having any page what so ever. In your code you have this part:

$(document).delegate('#content', 'pageinit', function () {
    navigator.geolocation.getCurrentPosition(initialize);
});

For it to initialize successfully div with an id content MUST have another attribute called data-role="page", like this:

<div id="content" data-role="page">

</div>

Third thing. Lets assume everything else is ok. Pageinit will not trigger from the HEAD. When jQuery Mobile loads pages it loads them into the DOM and only BODY part will be loaded. So for your map to work you need to move our javascript to the BODY (including a css). In you first example it didnt worked because you were triggering page even on a non-page div container.

And last thing, if you want to use jQuery Mobile properly you will need to take care correct version of jQuery is used with a correct version of jQuery Mobile. If you want to be safe use jQ 1.8.3 with jQM 1.2

Solution

Here's a working solution:

<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script src="http://www.dragan-gaic.info/js/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>                  
    </head>
    <body>
        <style>
            #map-canvas {
                width: 300px;
                height: 300px;
            }
        </style>            
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>       
        <script type="text/javascript">
            function initialize() {     
                var myLatlng = new google.maps.LatLng(33.89342, -84.30715);

                var mapOptions = {
                  zoom: 10,
                  center: myLatlng,
                  mapTypeId: google.maps.MapTypeId.ROADMAP
                };

                var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

                var marker = new google.maps.Marker({
                    position: myLatlng,
                    map: map,
                    title: 'Location'
                });
            }

            //google.maps.event.addDomListener(window, 'load', initialize);
            
            $(document).on('pageshow', '#wrapper', function(e, data){       
                initialize();
            });             
        </script>   
        <div id="wrapper" data-role="page">
            <div class="header">
                <h3>Test</h3>
                <a href="index.html"><img src="images/logo-small.png" alt="logo"/></a>
            </div>
            <div id="content">
                <div id="map-canvas"></div>
            </div>
        </div>  
    </body>
</html>

Working examples and much more information regarding this topic can be found in this ARTICLE.

just add: data-ajax="false" to the link tag which redirects to the page that contains your map. for example, if map.aspx contains your map, you can link to it like this:

<a href="map.aspx" data-ajax="false">

I was having same problem but I have no any jquery-mobile libraray or any other which would conflict the map. Struggling a hard time, I found a solution for my project:

Doesn't work:

<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY" async defer>
</script>

Works (Removing async and defer attributes):

<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

Hope! This helps someone if the other solutions doesn't work. Try this only if none of other solution work because it is not good suggestion as we know google page speed guide or google map api guide says to use it.

I have also same problem with google.maps.event.addDomListener(window, 'load', initialize); where initialize is my method . I just add few line of code before google.maps.event.addDomListener(window, 'load', initialize);

Code is

 $(document).ready( function () {
        initialize();
    });

and this code is working for me

You should use the pageloadevent to load everything. This way everything is loaded once jquery Mobile has done all the DOM changes it needs. I've had this same problem and that's what helped.

$(document).on('pageload', function() {
  initialize();
});

It's in the docs: http://api.jquerymobile.com/pageload/

EDIT: Sometimes it also helps to load the markers in a separate function than the one loading the map.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Google Map is not loading for the first time - Stack Overflow

5 Answers 5

Problems

Solution

与本文相关的文章

评论列表(0)