Archive for July, 2011

Why are those Polylines not appearing on my Google map?

Yes, I’m asking that age-old question: Where are my Polylines?

Here is my initialization function for loading a Google map on my page:

    function initialize() {
        var myLatlng = new google.maps.LatLng(43.771550677242345, -85.410699874864946);
        var myOptions = {
            zoom: 12,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        // Set Polyline variable
        var polyOptions = { strokeColor: '#000000', strokeOpacity: 1.0, strokeWeight: 3 }
        path = new google.maps.Polyline(polyOptions);
        path.setMap(map);
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        for (var i = 0; i < locationList.length; i++) {
            var args = locationList[i].split(",");
            var location = new google.maps.LatLng(args[0], args[1])
            var marker = new google.maps.Marker({
                position: location,
                map: map
            });
            // Polyline
            path.getPath().push(location);
        }
    }

Alas, this didn’t work. The Markers appeared, but the Polylines didn’t. (BTW, my markers are being populated from code behind, which I’ll get into in another post shortly.)

The problem is that I was assigning the Polyline to a map that wasn’t initialized. Oops. Here is the working function:

    function initialize() {
        var myLatlng = new google.maps.LatLng(43.771550677242345, -85.410699874864946);
        var myOptions = {
            zoom: 12,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        // Set Polyline variable
        var polyOptions = { strokeColor: '#000000', strokeOpacity: 1.0, strokeWeight: 3 }
        path = new google.maps.Polyline(polyOptions);
        path.setMap(map);
        for (var i = 0; i < locationList.length; i++) {
            var args = locationList[i].split(",");
            var location = new google.maps.LatLng(args[0], args[1])
            var marker = new google.maps.Marker({
                position: location,
                map: map
            });
            // Polyline
            path.getPath().push(location);
        }
    }

 

Advertisements

Leave a comment