简体   繁体   中英

Googlemaps markers dont load

I'm new to this site new to google maps and fairly new to javascript so please be a little patient.

I've been tasked with adding some google maps interfaces to a site I adminster so I followed the google tutorials and I'v got as far as displaying the map, geocoding address strings and setting up the markers. Heres the problem, the first geocoded pointer always appears but the rest only appear intermittently (normally on first load or after several reloads). Firebug is reporting the following error:

"Invalid value for property : (53.3800136, -1.475428500000021) on line 28 of main.js"

I think I've found the offending function, the script seems to be intermittently stalling at this point stopping the other markers from loading. I've tried every relevant solution I can find and nothings worked now I'm stumped can anyone help? heres my code for reference:

     function load_map() {
            var startLatLng = new google.maps.LatLng(52.485809,-1.888783);
            // create a new Google latLang marker object with co-ords for
            // start location

            // create a JASON object to store map configuration
            var config = {
                zoom: 5,
                center: startLatLng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };


            map = new google.maps.Map(document.getElementById("map"), config);
            // initialise the map passing the display divs id and the config
            // object

            var startMarker = new google.maps.Marker({
                position: startLatLng,
                map: map
            })

            // create a new marker object for start location
            startMarker.setMap(map);
            // Add the marker to the map

            geocodeAddress("ARM Ltd Rockingham Court 152 Rockingham Street Sheffield Great Britain");
            geocodeAddress("Centrum House 36 Station Road Egham Surrey");
            geocodeAddress("Pipers Way Swindon United Kingdom");
            // call the geocoding function to add markers to the map hard coded right now for testing 
           // but to be pulled from a DB in future
        }

        /*
         * This function loads a marker overlay on to the location provided
         * and calls the addInfoWindow function to add an info window to it
         *
         * @ param a google location object representing the location at which
         * the marker is to be placed
         * @ param a String variable representing the information to be attached
         * to the window.
         */

        function loadMarker(location,windowText) {
            var tempMarker = new google.maps.Marker({
                position: location,
                map: map
            });

            addInfoWindow(windowText,tempMarker);
            // add an information window anchored on the marker

            tempMarker.setMap(location); // seems to work ok up to this point.
            // add the marker to the map at this location

        }

        /*
         * A function to geocode the string type address passed into usable
         * lat lng type co-ords
         * @ param a String representing the address to be geocoded
         */

        function geocodeAddress (address) {
            var geocoder = new google.maps.Geocoder();
            geocoder.geocode( {'address': address}, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    loadMarker(results[0].geometry.location,"Info here");
                } else {
                    alert("Geocode was not successful for the following reason: " + status);
                }
            });
        }

        /*
         * This function adds an info window to each marker and allows it
         * to be activated on click.
         * @Param
         */

        function addInfoWindow (infoText,marker) {
            var contentString = infoText;
            var tempInfoWindow = new google.maps.InfoWindow({
                content: contentString
            });
            google.maps.event.addListener(marker, 'click', function() {
                tempInfoWindow.open(map,marker);
            });
        }
        // initialise all the page components by calling there load functions

        // called using a standard body onload to intilise the map
        function init () {
            load_map();
        }   

Line 53 incorrectly references location instead of map

Change your code from:

tempMarker.setMap(location);

to

tempMarker.setMap(map);

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM