Map Markers Not Displaying (JavaScript/Google Maps API V3)

I’m having trouble getting map markers to display using Google Maps API v3. I’m attempting to keep them all in a single array, to make displaying a large amount relatively simple. Currently, the map loads fine, but throws the error Uncaught TypeError: Object #<Object> has no method 'setValues' when attempting to draw the markers. The error repeats with each iteration run by the setTimeout(). Any recommendations will be greatly appreciated.

This is the JavaScript used:

  • Google Maps v3 - using accented characters in marker titles
  • Google maps API referrer not allowed
  • JavaScript Load Order
  • How do I remove nearby places when embedding google map in an iframe?
  • Add Tooltip on a data.feature object like we can do for the marker
  • JavaScript: Initialising Google Maps in an external script
  • var map;
    var markers = [
        [
            45.768366,
            -108.5975760,
            'Fitness 19'
        ],
        [
            45.785684,
            -108.6144625,
            'Granite Fitness'
        ],
          ... (more, syntactically correct)
        [
            45.7920092,
            -108.4886232,
            'Steepworld'
        ]
    ];
    function mapinit() {
        var conf = {
            zoom: 11,
            center: new google.maps.LatLng(45.7832856,-108.5006904),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(document.getElementById('mapcont'),conf);
        for(i in markers) {
            window.setTimeout('mark('+i+')',i*200);
        }
    }
    function mark(i){
        google.maps.Marker({
            position: google.maps.LatLng(markers[i][0],markers[i][1]),
            animation: google.maps.Animation.DROP,
            title: markers[i][2]
        });
    }
    

  • Google Maps: How to move zoom controls?
  • Retrieving of coordinates from google maps and search
  • Reverse Geocode on Client Side (Google Maps V3 API)
  • Maximum Lat and Long bounds for the world - Google Maps API LatLngBounds()
  • JavaScript, objects and concurrency
  • Move google maps logo above custom interface on bottom. JavaScript
  • 2 Solutions collect form web for “Map Markers Not Displaying (JavaScript/Google Maps API V3)”

    It’s the new keyword that makes all the difference!

    I had the same problem. Using the new keyword when constructing the Marker object makes it work again in Chrome at least. Putting it in a differed timeout event didn’t. And here I thought new was nothing but syntactic sugar…

    Okay, after quite a bit of messing around in Chrome’s JavaScript console (I love that thing), I was able to get it working perfectly. I rewrote the mapinit() and mark() functions to this:

    function mapinit() {
        var conf = {
            zoom: 11,
            center: new google.maps.LatLng(45.7832856,-108.5006904),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(document.getElementById('mapcont'),conf);
        for(i in markers) {
            markers[i][3] = new google.maps.LatLng(markers[i][0],markers[i][1]);
            window.setTimeout('mark('+i+')',i*200);
        }
    }
    function mark(i){
        new google.maps.Marker({
            position: markers[i][3],
            animation: google.maps.Animation.DROP,
            map: map,
            title: markers[i][2]
        });
    }
    

    The main difference here is that the position variable of the marker seems to require being initialized in an outside variable for some reason, so when I loop through the markers array, I generate a google.maps.LatLng as the fourth item for each marker. This is then referenced within the mark() function, and the marker displays successfully. The setTimeout for staggering the display of the markers works wonderfully, especially on faster connections where the scripts and map load quickly.

    View the end result on my inClass site