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
  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: