在谷歌地图中画线

Question

I try to draw a line in google maps, i try this code and nothing happen only the marker are there not the line, i already read some reference like https://developers.google.com/maps/documentation/javascript/v2/overlays#Icons_overview and try the code but the line still doesn't come out, anyone can help me? below are my code, assume address are array

for (var i = 0; i < address.length; i++) {
    geocoder.geocode({ 'address': address[i] }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {

            if (i == 2) {
                var pos1 = results[0].geometry.location;
                alert(pos1);
            }

            else if (i == 2) {
                var pos2 = results[0].geometry.location;
                alert(pos2);
            }

            map.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker
            (
                {
                    position: results[0].geometry.location,
                    map: map,
                    title: 'click me'
                }
            );
            var infowindow = new google.maps.InfoWindow
            (
                {
                    content: '<img src="http://wallpaperscraft.com/image/child_girl_emotion_sweet_face_25641_100x100.jpg"> Welcome to origineit'
                }
            );
            var flightPlanCoordinates = [
                new google.maps.LatLng(pos1),
                new google.maps.LatLng(pos2)
              ];

            if (i == 2) {

                var polyline = new google.maps.Polyline
                ({
                    path: flightPlanCoordinates,
                    strokeColor: '#FF0000',
                    strokeOpacity: 0.8,
                    strokeWeight: 3
                });
                polyline.setMap(map);
            }

            google.maps.event.addListener(marker, 'click', function () {
                // Calling the open method of the infoWindow 
                infowindow.open(map, marker);
            });
        }
        else {
            alert('Geocode was not successful for the following reason: ' + status);
        }
    });
}

Answer 1

The problem here is that you are using Google Maps V3 (which you should) for everything except the polyline which is from V2. You should read up on the API documentation for Google Maps V3 instead.

For Google Maps V3, it should look something like this:

Edit

When testing out your code (instead of just writing an answer from the top of my head) I also noticed that you hade some scoping problems (which you've failed to workaround checking if(i == 2) in your updated code, I would suggest this article for you to learn more about the problem) so I changed that as well. The code below is tested to work ( http://jsfiddle.net/YMyc9/ ) but it really should be refactored a bit to make it easier to follow.

var pos1 = null; // These need to be declared outside of the geocode-callback
var pos2 = null; // so we also remove 'var' from the assignment inside of that function
for (var i = 0; i < address.length; i++) {
    geocoder.geocode({'address': address[i]}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {

            // We can't use 'i' here since this happens in a callback and the loop will already
            // have progressed and 'i' is (with my two test addresses) always 2 here.
            if (pos1 == null) {
                pos1 = results[0].geometry.location;
            }
            else if (pos2 == null) {
                pos2 = results[0].geometry.location;
            }
            else {
                /* We already got two so maybe quit? */
                return;
            }

            map.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({
                position: results[0].geometry.location,
                map: map,
                title: 'click me'
            });
            var infowindow = new google.maps.InfoWindow({
                content: '<img src="http://wallpaperscraft.com/image/child_girl_emotion_sweet_face_25641_100x100.jpg"> Welcome to origineit'
            });

            /* NEW CODE HERE */
            if (pos2 != null) {
                var polyline = new google.maps.Polygon({
                    paths: [pos1, pos2],
                    strokeColor: '#FF0000',
                    strokeOpacity: 0.8,
                    strokeWeight: 3,
                    fillColor: '#FF0000',
                    fillOpacity: 0.35
                });

                polyline.setMap(map);
            } /* BACK TO THE OLD CODE HERE */

            google.maps.event.addListener(marker, 'click', function() {
                // Calling the open method of the infoWindow 
                infowindow.open(map, marker);
            });
        }
        else {
            alert('Geocode was not successful for the following reason: ' + status);
        }
    });
}