Geek asks and answers

Google Map not loading for the first time

I use the Google Maps JavaScript API to load maps inside my mobile site. When I navigate from the previous page, the map does not load, but if I refresh the page loading, as expected. If I use JavaScript inside the body, even the page does not load. I can not understand the problem. Is this something with the previous page code?

Here is my code in the 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 to the question This and This , but it does not work with my code.

+5
source share
5 answers

Problems

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

jQuery Mobile. jQuery Mobile, DOM. , , :

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

. , .

-, jQuery Mobile, - . :

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

div id , data-role = "page", :

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

</div>

. , . Pageinit HEAD. jQuery Mobile , DOM, BODY. , , javascript BODY ( css). , div.

, jQuery Mobile, , jQuery jQuery Mobile. , jQ 1.8.3 jQM 1.2

:

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

.

+8

: data-ajax="false" , , . , map.aspx , :

<a href="map.aspx" data-ajax="false">
Hide result
+2

, jquery-mobile libraray - , . , :

:

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

( ):

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

! -, . , , , , google google map api guide , .

+1

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

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

and this code works for me

+1
source

You must use the event pageloadto load everything. This way everything loads as soon as jquery Mobile has completed all the DOM changes it needs. I had the same problem and that helped.

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

In the docs: http://api.jquerymobile.com/pageload/

EDIT: Sometimes it also helps to load markers into a separate function than the one that loads the map.

0
source

More articles:


All Articles