CODEWITHSUNDEEP
javascriptjquerygoogle-maps-api-3google-maps-markers
user468648
user468648

Reputation: 197

Google Maps API V3 requires page reload to show marker icons

I am reading points from a DB as JSON to create map markers and an unstructured list on a page. After adding some code to customize the list elements the map stopped showing the marker icons on first request - until a page reload is issued. Is this due to timing out from the API? Could the list object be built from the array after the map is loaded or is there some other way to speed up the code that might eliminate the problem? The map loaded markers fine with double this number of markers (300+) so I know problem is as a result of adding the formatting to the list object. No clustering required. A demo version of the page is available here

Signed a JS n00b. Thanks. ...... JSON POWERED GOOGLEMAP

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<script type="text/javascript" charset="utf-8"> 
var map;
    var infoWindow = new google.maps.InfoWindow();
    function initialize() {
        var myLatlng = new google.maps.LatLng(49.57154029531499,-125.74951171875);

        var myOptions = {
            zoom: 8,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.TERRAIN,
            streetViewControl: false
            }

        this.map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        } /* end initialize function */


<!--  load points from database into Locations JSON -->

$(document).ready(function () {
    initialize();
    $.getJSON("map-service.php?action=listpoints", function(json) {

    if (json.Locations.length > 0) {
        for (i=0; i<json.Locations.length; i++) {
            var location = json.Locations[i];
                addMarker(location); 
                }
            }
        });

    //define grn icon as closed
    var greenicon = 'http://maps.google.com/mapfiles/ms/icons/green-dot.png';

    function addMarker(location) {
            if(location.datesummit == "0000-00-00") {
                var markerOptions = {map: map, title: location.name, position: new google.maps.LatLng(location.lat, location.lng),icon: greenicon};
                //create marker info window content
                var html='<B>'+location.name+'</B><BR> Register a summit <A href="http://goo.gl/Nl0UQ">here</A>  ';
                //create list element text and onclick          
                $("<li class=\"notclimbed\">")
                .html(location.name+"</li>") 
                .click(function(){ 
                    infoWindow.close();
                    infoWindow.setContent(html);
                    infoWindow.open(map, marker)
                }) 
                .appendTo("#list"); 
            }
            else{
                var markerOptions = {map: map, title: location.name, position: new google.maps.LatLng(location.lat, location.lng)};
                //create marker info window content
                var html='<B>'+location.name+'</B><BR> Summitted: '+location.datesummit+'<BR> By:'+location.summitlog;
                //create list element text and onclick  
                $("<li class=\"climbed\">")
                .html(location.name+"</li>") 
                .click(function(){ 
                    infoWindow.close();
                    infoWindow.setContent(html);
                    infoWindow.open(map, marker)
                }) 
                .appendTo("#list"); 
            }
            var marker = new google.maps.Marker(markerOptions);

            // add a listener to open an info window when a user clicks on one of the markers
            google.maps.event.addListener(marker, 'click', function() {
                infoWindow.close();
                infoWindow.setContent(html);
                infoWindow.open(map, marker);
                });

        }; // end of addmarker function
});
</script>
</head>


<body>
<div id="banner" {vertical-align:text-top;} >
    <img src="test.jpg" alt="Logo" style="width:150px;height:150px;vertical-align:middle">
    <img src="test.png" alt="Logo" style="vertical-align:middle">
</div>

<div id="map_canvas" >
        Map Here!
</div>

<div id="mindthegap"></div>

<div id="list" >    </div>
</body>

Upvotes: 4

Views: 6640

Answers (1)

Corbin
Corbin

Reputation: 33437

You need to make sure the map variable is initialized before you pass it to markerOptions.

A bit of overzealous debugging showed me that on the times that the page fails, the map is still undefined.

The $(document).ready() will usually occur before body.onload, so either put a call to initialize() at the very top of your $(document).ready(function() { ... }); or put the code for initialize in there.

Also, though not strictly necessary, you should consider encapsulating your map variable instead of using a global. What if you ever want to have 2 maps on one page?

Upvotes: 5

Related Questions