Geek Answers Handbook

Google Maps API v3 Download only after page refresh

I am using the Google Maps API for the webpage I'm working on. My problem right now is that the map loads exactly as I expect it, but only after the page is refreshed. If I do not refresh the page, all I see is canvas. The problem remains if I leave the page and return to it, so it seems to be a problem when calling the card in initialize.

Code:

<style>
    #map_canvas {
    width: 670px;
    height: 400px;
    background-color: #CCC;
    }
</style>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
    function initialize() {

        var myLatLng = new google.maps.LatLng(31.247681, 121.449504);

        var map_canvas = document.getElementById('map_canvas');

        var map_options = {
        center: new google.maps.LatLng(31.248195, 121.447431),
        zoom: 16,
                mapTypeControl: false,
                panControl: false,
        zoomControlOptions: {
                    position: google.maps.ControlPosition.LEFT_CENTER
        },
        streetViewControl: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    var map = new google.maps.Map(map_canvas, map_options);

        var contentString =
            '<b>Leung Gallery</b>' +
            '<p>50 Moganshan Rd. Building 7, Unit 108, Shanghai</p>' +
            '<p>&#19978;&#28023;&#26222;&#38464;&#21306;&#33707;&#24178;&#23665;&#36335;50&#21495;7&#21495;&#27004;108&#23460;</p>';

        var infowindow = new google.maps.InfoWindow({
            content: contentString
        });

        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
        });

        google.maps.event.trigger(map, 'resize');

        google.maps.event.addListener(marker, 'click', function(){
            infowindow.open(map,marker);
        });

    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>​

Looking through the previous questions, I did not find anything that exactly matched my problem, but I saw some similar situations that revolved around google.maps.event.addDomListener(window, 'load', initialize);, so I think this might be the problem. Any help is appreciated.

: . $(document).bind("projectLoadComplete", initialize); google.maps.event.addDomListener(window, 'load', initialize); . , . , , Cargo Collective.

+4
6

. $(document).bind("projectLoadComplete", initialize); google.maps.event.addDomListener(window, 'load', initialize); . , . , , Cargo Collective. , , .

+2

, Firefox, Internet Exploder. IE . , , . IE "map_canvas" (, , div ), div html - , , . div Developer Tools xml: < div id = "map_canvas" / > . , , , , script. , script, </body> . - , script , :

google.maps.event.addDomListener(
    window,
    'load',
    function () {
         //1000 milliseconds == 1 second,
         //play with this til find a happy minimum delay amount
        window.setTimeout(initialize, 1000);
    }
);
+4

, , :

:

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

:

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

API 3

google.maps.event.trigger(map, 'resize')

2

map.checkResize()

, google.maps.event.trigger(map, 'resize') map.fitBounds() .

+2

, :

try {google;} catch (e){location.reload();}

.

, , .

, Internet Explorer The Edge, Google Chrome.

0

More articles:


All Articles