Draw line after every click event - Google Maps click event only fires once

Question

I want to allow the user to click on the map

• the last click event will be used to set the X and Y coordinates for point B

• point A has predefined coordinates 2.42249, 3.82618.

EDIT:

• The previous lines should be cleared - and not visible on the map.

Find the code bellow, the issue with my code is that the click-event only fires once. I want to draw the line after every click.

function initialize() 
{
    var mapOptions = 
    {
        zoom: 3,
        center: new google.maps.LatLng(2.42249, 3.82618),
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };

    var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

    google.maps.event.addListener(map, 'click', function(event)
    {
        drawLine(event.latLng);
    });
}

function drawLine(loc)
{

    mapOptions = 
    {
        zoom: 3,
        center: new google.maps.LatLng(2.42249, 3.82618),
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };
    map = new google.maps.Map(document.getElementById('map-canvas'),
        mapOptions);

    flightPlanCoordinates = [
        new google.maps.LatLng(2.42249, 3.82618),
        new google.maps.LatLng(loc.lat(), loc.lng())
    ];
    flightPath = new google.maps.Polyline({
        path: flightPlanCoordinates,
        geodesic: true,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2
    });

    flightPath.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

Andy points out the problem, you're recreating the map each time you click it. Try making your map variable global so it's available to both functions, and get rid of the duplicate code between both functions. Something like:

var map, flightPath = new google.maps.Polyline();

function initialize() 
{
    var mapOptions = 
    {
        zoom: 3,
        center: new google.maps.LatLng(2.42249, 3.82618),
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    google.maps.event.addListener(map, 'click', function(event)
    {
        drawLine(event.latLng);
    });
}

function drawLine(loc) {
    var flightPlanCoordinates = [
        new google.maps.LatLng(2.42249, 3.82618),
        loc
    ];

    flightPath.setMap(null);

    flightPath = new google.maps.Polyline({
        path: flightPlanCoordinates,
        geodesic: true,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2
    });

    flightPath.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);

(updated to demonstrate clearing the polyline off the map each time you click)

Answer 2

This should work. Create the map only once. Create the poligon only once. Then just keep adding lines

var map;
var flightPath;
var firstLatLng = new google.maps.LatLng(2.42249, 3.82618);

function initialize()
{
    var mapOptions = 
    {
        zoom: 3,
        center: new google.maps.LatLng(2.42249, 3.82618),
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };

    map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

    google.maps.event.addListener(map, 'click', function(event)
    {
        drawLine(event.latLng);
    });
}

function createLine(loc){

    flightPath = new google.maps.Polyline({
        geodesic: true,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2
    });

    flightPath.setMap(map);
}

function drawLine(loc)
{
    if (flightPath == null)
        createLine();

    flightPlanCoordinates = [
        firstLatLng,
        loc
    ];
    flightPath.setPath(flightPlanCoordinates);
}
google.maps.event.addDomListener(window, 'load', initialize);