views:

30

answers:

0

Hello,

So, when i draw a polygone with Google maps API the weirdest thing happens: on every click, I update a textarea with the position of the current set point and when i, let's say, draw a fullshape, but want to click inside it, the whole shape dissapears and it doesn't see that point I clicked as a google coordinate, causing a fatal error. if i click next to it, the shape will reappear, but none of the points i click after this will work because of the error.

Any ideas on this?

The code:

<script type="text/javascript">
if (GBrowserIsCompatible()) {
    map = new GMap2(document.getElementById("map_canvas"));
    map.setCenter(new GLatLng(44.435251, 26.102829), 13);
    map.setUIToDefault();
    GEvent.addListener(map, "click", mapClick);
    geocoder = new GClientGeocoder();
}

// mapClick - Handles the event of a user clicking anywhere on the map
// Adds a new point to the map and draws either a new line from the last point
// or a new polygon section depending on the drawing mode.
function mapClick(marker, clickedPoint) {
    polygonMode = true;

    // Push onto polypoints of existing polygon
    polyPoints.push(clickedPoint);
    drawCoordinates();
}

function drawCoordinates(){
    //Re-create Polyline/Polygon
    if (polygonMode) {
        polyShape = new GPolygon(polyPoints,lineColor,lineWeight,opacity,fillColor,opacity);
    } else {
        polyShape = new GPolyline(polyPoints,lineColor,lineWeight,opacity);
    }
    map.clearOverlays();

    // Grab last point of polyPoints to add marker
    marker = new GMarker(polyPoints[polyPoints.length -1]);
    map.addOverlay(marker);
    map.addOverlay(polyShape);
    logCoordinates();
}


function logCoordinates(){

    var header = "";

    // check mode
    if (polygonMode){
        header += "" + "";

        var footer = "";

        // print coords header
        document.getElementById("coords").value =  header;

        // loop to print coords
        for (var i = 0; i<(polyPoints.length); i++) {
            var lat = polyPoints[i].lat();
            var longi = polyPoints[i].lng();
            document.getElementById("coords").value += longi + ", " + lat + " ;";
        }
    } else {
        alert('error in google maps /zone - invalid draw mode')
    }
    document.getElementById("coords").value +=  footer;
}

Thanks