Jump to content

Google Maps V3 working with Polygon

MiCR01

By MiCR01
in Javascript Help

 Share

Recommended Posts

MiCR01 Newbie

MiCR01

Posted
Posted (edited)

Hey guys,  I modified a script that i found on the web and and i'm trying to load google maps polygon that could be set already and if they are then load them as default so user can edit them or remove them.

Everything I try does not work I could really do with some help with this. Thanks.

<script type="text/javascript">var map;
var polyShape;
var markers = [];
var drag_poly = false;
var mouseDownPos;
var oldVertexPos;
<!-- this is the default Polygon -->
var toplace = ["(52.63586014925004, 1.2875261303270236)","(52.63888119537785, 1.3024606701219454)","(52.632838894493, 1.325119971879758)","(52.626587360201505, 1.314305305131711)","(52.62294021941067, 1.304520606645383)","(52.62585795635695, 1.2856378551805392)","(52.6309635279822, 1.303147315629758)","(52.63190122128495, 1.281174659379758)"];

function createMarker(g) {
var f = google.maps;
var h = function (a) {
return {
url: a,
size: new f.Size(11, 11),
anchor: new f.Point(5, 5)
}
};
var e = new f.Marker({
position: g,
map: map,
icon: h("/images/google_maps/square.png"),
raiseOnDrag: false,
draggable: true
});

markers.push(e);
f.event.addListener(e, "mouseover", function () {
e.setIcon(h("/images/google_maps/m-over-square.png"))
});
f.event.addListener(e, "mouseout", function () {
e.setIcon(h("/images/google_maps/square.png"))
});
f.event.addListener(e, "drag", function (a) {
for (var b = 0, d; d = markers[b]; b++) {
if (d == e) {
var c = a.latLng;
break
}
}
polyShape.getPath().setAt(b, c);
showValues()
});
f.event.addListener(e, "click", function () {
for (var a = 0, b; b = markers[a]; a++) {
if (b == e) {
b.setMap(null);
markers.splice(a, 1);
break
}
}
polyShape.getPath().removeAt(a);
showValues()
});
return e
}
function movePoly(a) {
if (drag_poly) {
var b = a.latLng;
var d = polyShape.getPath();
for (var c = 0, g; g = oldVertexPos[c]; c++) {
var f = g.lat() + b.lat() - mouseDownPos.lat();
var h = g.lng() + b.lng() - mouseDownPos.lng();
var e = new google.maps.LatLng(f, h);
d.setAt(c, e)
}
}
}
function startDrag(a) {
var b = google.maps;
drag_poly = true;
mouseDownPos = a.latLng;
oldVertexPos = [];
for (var d = 0, c; c = markers[d]; d++) {
oldVertexPos[d] = c.getPosition();
b.event.clearInstanceListeners(c);
c.setMap(null)
}
markers.length = 0;
map.setOptions({
draggable: false
});
b.event.addListener(map, "mousemove", movePoly);
if (window.event) {
window.event.returnValue = false
}
a.stop()
}
function mouseUp() {
if (drag_poly) {
drag_poly = false;
map.setOptions({
draggable: true
});
google.maps.event.clearListeners(map, "mousemove");
var a = polyShape.getPath();
for (var b = 0; b < a.getLength(); b++) {
createMarker(a.getAt(b))
}
}
}
function setShape() {
var a = google.maps;
var b = {
strokeColor: "#3355ff",
strokeOpacity: .8,
strokeWeight: 3,
fillColor: "#335599",
fillOpacity: .3,
map: map
};
polyShape = new a.Polygon(b);
polyShape.listeners = [a.event.addListener(polyShape, "mousedown", startDrag), a.event.addListener(polyShape, "mousemove", movePoly)];
document.onmouseup = mouseUp
}
function showValues() {
var a = document.getElementById("report");
var b = google.maps.geometry.spherical;
var d = polyShape.getPath().getArray();
    document.getElementById("paths").value = d;
var c = b.computeArea(d, 6371);
if (markers.length <= 2) {
a.innerHTML = " "
} else if (markers.length > 2) {
a.innerHTML = c.toFixed(3) + " km²"
}
}
function leftClick(a) {
if (a.latLng) {        

if (!polyShape) setShape();
createMarker(a.latLng);
polyShape.getPath().push(a.latLng);
showValues()    

}
}
function buildMap() {
var a = google.maps;
var b = {
     center: new a.LatLng(52.6322568, 1.3127337),
            zoom: 12,
zoom: 8,
mapTypeId: a.MapTypeId.ROADMAP,
draggableCursor: 'auto',
draggingCursor: 'move',
disableDoubleClickZoom: true,
mapTypeControlOptions: {
mapTypeIds: [a.MapTypeId.ROADMAP, a.MapTypeId.SATELLITE, a.MapTypeId.TERRAIN]
},
panControl: false,
zoomControlOptions: {
style: a.ZoomControlStyle.SMALL
}
};
map = new a.Map(document.getElementById("map"), b);
setShape();
a.event.addListener(map, "click", leftClick)
    
}
function zoomToPoly() {
if (polyShape && polyShape.getPath().getLength() > 1) {
var b = new google.maps.LatLngBounds();
polyShape.getPath().forEach(function (a) {
b.extend(a)
});
map.fitBounds(b)
}
}
function clearPoly() {
var a = google.maps;
for (var b = 0, d; d = markers[b]; b++) {
a.event.clearInstanceListeners(d);
d.setMap(null)
}
if (polyShape) {
for (var c = 0, g; g = polyShape.listeners[c]; c++) {
a.event.removeListener(g)
}
polyShape.setMap(null);
polyShape = null
}
markers.length = 0;
document.getElementById("report").innerHTML = " "
}
window.onload = buildMap;
</script>

<div id="map"></div>        

<table id="desc">
<tr><td>
Click at least at three different places on the map to draw a polygon.
<b>Try to drag the shape of the polygon.</b> The corners of the polygon are draggable and removable at any position. You can add and remove vertices simply by click.
</td></tr>
<tr><td>
Area of polygon:
</td></tr>
<tr><td id="report"> </td></tr>
<tr><td style="height:20px">
 

</td></tr><tr><td>
<a href="#" class="button" onclick="zoomToPoly();return false;">Zoom To Polygon</a>
</td></tr><tr><td>
<a href="#" class="button" onclick="clearPoly();return false;">Remove Polygon</a>
</td></tr><tr><td style="padding-right:19px; height:30px;">
<span class="include"><a href="../index.html">Back</a></span>
<form action="" method="POST" >
<input name="paths" id="paths" value="" type="hidden" />
<input type="hidden" id="submitpath" value="Save Paths" name="save_paths">
<input type="submit" id="Save" value="Save" name="Save">
</form>
</td></tr>
</table>
    
Edited by MiCR01
Link to comment
https://forums.phpfreaks.com/topic/277950-google-maps-v3-working-with-polygon/
Share on other sites
MiCR01 Newbie

MiCR01

Posted
  • Author
Posted

I think i am close?

<script type="text/javascript">var map;
var polyShape;
var markers = [];
var drag_poly = false;
var mouseDownPos;
var oldVertexPos;
var toplace = [new google.maps.LatLng(52.63586014925004, 1.2875261303270236),new google.maps.LatLng(52.63888119537785, 1.3024606701219454),new google.maps.LatLng(52.632838894493, 1.325119971879758),new google.maps.LatLng(52.626587360201505, 1.314305305131711),new google.maps.LatLng(52.62294021941067, 1.304520606645383),new google.maps.LatLng(52.62585795635695, 1.2856378551805392),new google.maps.LatLng(52.6309635279822, 1.303147315629758),new google.maps.LatLng(52.63190122128495, 1.281174659379758)];

function createMarker(g) {
var f = google.maps;
var h = function (a) {
return {
url: a,
size: new f.Size(11, 11),
anchor: new f.Point(5, 5)
}
};
var e = new f.Marker({
position: g,
map: map,
icon: h("/images/google_maps/square.png"),
raiseOnDrag: false,
draggable: true
});

markers.push(e);
f.event.addListener(e, "mouseover", function () {
e.setIcon(h("/images/google_maps/m-over-square.png"))
});
f.event.addListener(e, "mouseout", function () {
e.setIcon(h("/images/google_maps/square.png"))
});
f.event.addListener(e, "drag", function (a) {
for (var b = 0, d; d = markers[b]; b++) {
if (d == e) {
var c = a.latLng;
break
}
}
polyShape.getPath().setAt(b, c);
showValues()
});
f.event.addListener(e, "click", function () {
for (var a = 0, b; b = markers[a]; a++) {
if (b == e) {
b.setMap(null);
markers.splice(a, 1);
break
}
}
polyShape.getPath().removeAt(a);
showValues()
});
return e
}
function movePoly(a) {
if (drag_poly) {
var b = a.latLng;
var d = polyShape.getPath();
for (var c = 0, g; g = oldVertexPos[c]; c++) {
var f = g.lat() + b.lat() - mouseDownPos.lat();
var h = g.lng() + b.lng() - mouseDownPos.lng();
var e = new google.maps.LatLng(f, h);
d.setAt(c, e)
}
}
}
function startDrag(a) {
var b = google.maps;
drag_poly = true;
mouseDownPos = a.latLng;
oldVertexPos = [];
for (var d = 0, c; c = markers[d]; d++) {
oldVertexPos[d] = c.getPosition();
b.event.clearInstanceListeners(c);
c.setMap(null)
}
markers.length = 0;
map.setOptions({
draggable: false
});
b.event.addListener(map, "mousemove", movePoly);
if (window.event) {
window.event.returnValue = false
}
a.stop()
}
function mouseUp() {
if (drag_poly) {
drag_poly = false;
map.setOptions({
draggable: true
});
google.maps.event.clearListeners(map, "mousemove");
var a = polyShape.getPath();
for (var b = 0; b < a.getLength(); b++) {
createMarker(a.getAt(b))
}
}
}
function setShape() {
var a = google.maps;
var b = {
strokeColor: "#3355ff",
strokeOpacity: .8,
strokeWeight: 3,
fillColor: "#335599",
fillOpacity: .3,
map: map
};
polyShape = new a.Polygon(b);
polyShape.listeners = [a.event.addListener(polyShape, "mousedown", startDrag), a.event.addListener(polyShape, "mousemove", movePoly)];
document.onmouseup = mouseUp
}
function showValues() {
var a = document.getElementById("report");
var b = google.maps.geometry.spherical;
var d = polyShape.getPath().getArray();
    document.getElementById("paths").value = d;
var c = b.computeArea(d, 6371);
if (markers.length <= 2) {
a.innerHTML = " "
} else if (markers.length > 2) {
a.innerHTML = c.toFixed(3) + " km²"
}
}
function leftClick(a) {
if (a.latLng) {        
if (!polyShape) setShape();
createMarker(a.latLng);
polyShape.getPath().push(a.latLng);
showValues()    

}
}
function buildMap() {
var a = google.maps;
var b = {
     center: new a.LatLng(52.6322568, 1.3127337),
            zoom: 12,
zoom: 8,
mapTypeId: a.MapTypeId.ROADMAP,
draggableCursor: 'auto',
draggingCursor: 'move',
disableDoubleClickZoom: true,
mapTypeControlOptions: {
mapTypeIds: [a.MapTypeId.ROADMAP, a.MapTypeId.SATELLITE, a.MapTypeId.TERRAIN]
},
panControl: false,
zoomControlOptions: {
style: a.ZoomControlStyle.SMALL
}
};

    var poly = new google.maps.Polygon({
                    path: toplace,
                    strokeWeight: 1,
                    fillColor: '#55FF55',
                    fillOpacity: 0.3
                });
     poly.setMap(map);
    
map = new a.Map(document.getElementById("map"), b);
setShape();
a.event.addListener(map, "click", leftClick);    
    
}
function zoomToPoly() {
if (polyShape && polyShape.getPath().getLength() > 1) {
var b = new google.maps.LatLngBounds();
polyShape.getPath().forEach(function (a) {
b.extend(a)
});
map.fitBounds(b)
}
}
function clearPoly() {
var a = google.maps;
for (var b = 0, d; d = markers[b]; b++) {
a.event.clearInstanceListeners(d);
d.setMap(null)
}
if (polyShape) {
for (var c = 0, g; g = polyShape.listeners[c]; c++) {
a.event.removeListener(g)
}
polyShape.setMap(null);
polyShape = null
}
markers.length = 0;
document.getElementById("report").innerHTML = " "
}
window.onload = buildMap;
</script>    

<div id="map"></div>        

<table id="desc">
<tr><td>
Click at least at three different places on the map to draw a polygon.
<b>Try to drag the shape of the polygon.</b> The corners of the polygon are draggable and removable at any position. You can add and remove vertices simply by click.
</td></tr>
<tr><td>
Area of polygon:
</td></tr>
<tr><td id="report"> </td></tr>
<tr><td style="height:20px">
 

</td></tr><tr><td>
<a href="#" class="button" onclick="zoomToPoly();return false;">Zoom To Polygon</a>
</td></tr><tr><td>
<a href="#" class="button" onclick="clearPoly();return false;">Remove Polygon</a>
</td></tr><tr><td style="padding-right:19px; height:30px;">
<span class="include"><a href="../index.html">Back</a></span>
<form action="" method="POST" >
<input name="paths" id="paths" value="" type="hidden" />
<input type="hidden" id="submitpath" value="Save Paths" name="save_paths">
<input type="submit" id="Save" value="Save" name="Save">
</form>
</td></tr>
</table>
ignace Advanced Member

ignace

Posted
Posted (edited)

If you expect someone to help you at the very least properly format your code when you post it. You have dumped your shit and expect us to weed through it and then give you the answer on a silver platter, most would be inclined to simply ignore your threat.

 

Put in effort or at the very least show that you tried to solve it and where you are currently stuck.

 

The code below is more pleasant to read don't you think? Anyway to return the favour I have inserted the answer in this wall of text:

 

<script type="text/javascript">
    var map;
    var polyShape;
    var markers = [];
    var drag_poly = false;
    var mouseDownPos;
    var oldVertexPos;
    var toplace = [new google.maps.LatLng(52.63586014925004, 1.2875261303270236), new google.maps.LatLng(52.63888119537785, 1.3024606701219454), new google.maps.LatLng(52.632838894493, 1.325119971879758), new google.maps.LatLng(52.626587360201505, 1.314305305131711), new google.maps.LatLng(52.62294021941067, 1.304520606645383), new google.maps.LatLng(52.62585795635695, 1.2856378551805392), new google.maps.LatLng(52.6309635279822, 1.303147315629758), new google.maps.LatLng(52.63190122128495, 1.281174659379758)];

    function createMarker(g) {
        var f = google.maps;
        var h = function (a) {
            return {
                url: a,
                size: new f.Size(11, 11),
                anchor: new f.Point(5, 5)
            }
        };
        var e = new f.Marker({
            position: g,
            map: map,
            icon: h("/images/google_maps/square.png"),
            raiseOnDrag: false,
            draggable: true
        });

        markers.push(e);
        f.event.addListener(e, "mouseover", function () {
            e.setIcon(h("/images/google_maps/m-over-square.png"))
        });
        f.event.addListener(e, "mouseout", function () {
            e.setIcon(h("/images/google_maps/square.png"))
        });
        f.event.addListener(e, "drag", function (a) {
            for (var b = 0, d; d = markers[b]; b++) {
                if (d == e) {
                    var c = a.latLng;
                    break
                }
            }
            polyShape.getPath().setAt(b, c);
            showValues()
        });
        f.event.addListener(e, "click", function () {
            for (var a = 0, b; b = markers[a]; a++) {
                if (b == e) {
                    b.setMap(null);
                    markers.splice(a, 1);
                    break
                }
            }
            polyShape.getPath().removeAt(a);
            showValues()
        });
        return e
    }

    function movePoly(a) {
        if (drag_poly) {
            var b = a.latLng;
            var d = polyShape.getPath();
            for (var c = 0, g; g = oldVertexPos[c]; c++) {
                var f = g.lat() + b.lat() - mouseDownPos.lat();
                var h = g.lng() + b.lng() - mouseDownPos.lng();
                var e = new google.maps.LatLng(f, h);
                d.setAt(c, e)
            }
        }
    }

    function startDrag(a) {
        var b = google.maps;
        drag_poly = true;
        mouseDownPos = a.latLng;
        oldVertexPos = [];
        for (var d = 0, c; c = markers[d]; d++) {
            oldVertexPos[d] = c.getPosition();
            b.event.clearInstanceListeners(c);
            c.setMap(null)
        }
        markers.length = 0;
        map.setOptions({
            draggable: false
        });
        b.event.addListener(map, "mousemove", movePoly);
        if (window.event) {
            window.event.returnValue = false
        }
        a.stop()
    }

    function mouseUp() {
        if (drag_poly) {
            drag_poly = false;
            map.setOptions({
                draggable: true
            });
            google.maps.event.clearListeners(map, "mousemove");
            var a = polyShape.getPath();
            for (var b = 0; b < a.getLength(); b++) {
                createMarker(a.getAt(b))
            }
        }
    }

    function setShape() {
        var a = google.maps;
        var b = {
            strokeColor: "#3355ff",
            strokeOpacity: .8,
            strokeWeight: 3,
            fillColor: "#335599",
            fillOpacity: .3,
            map: map
        };
        polyShape = new a.Polygon(b);
        polyShape.listeners = [a.event.addListener(polyShape, "mousedown", startDrag), a.event.addListener(polyShape, "mousemove", movePoly)];
        document.onmouseup = mouseUp
    }

    function showValues() {
        var a = document.getElementById("report");
        var b = google.maps.geometry.spherical;
        var d = polyShape.getPath().getArray();
        document.getElementById("paths").value = d;
        var c = b.computeArea(d, 6371);
        if (markers.length <= 2) {
            a.innerHTML = " "
        } else if (markers.length > 2) {
            a.innerHTML = c.toFixed(3) + " km²"
        }
    }

    function leftClick(a) {
        if (a.latLng) {
            if (!polyShape) setShape();
            createMarker(a.latLng);
            polyShape.getPath().push(a.latLng);
            showValues()

        }
    }

    function buildMap() {
        var a = google.maps;
        var b = {
            center: new a.LatLng(52.6322568, 1.3127337),
            zoom: 12,
            zoom: 8,
            mapTypeId: a.MapTypeId.ROADMAP,
            draggableCursor: 'auto',
            draggingCursor: 'move',
            disableDoubleClickZoom: true,
            mapTypeControlOptions: {
                mapTypeIds: [a.MapTypeId.ROADMAP, a.MapTypeId.SATELLITE, a.MapTypeId.TERRAIN]
            },
            panControl: false,
            zoomControlOptions: {
                style: a.ZoomControlStyle.SMALL
            }
        };

        var poly = new google.maps.Polygon({
            path: toplace,
            strokeWeight: 1,
            fillColor: '#55FF55',
            fillOpacity: 0.3
        });
        poly.setMap(map); // map is not (yet) defined --v You may also want to register to the event listener so that you only add the polygon to the map when it is fully loaded

        map = new a.Map(document.getElementById("map"), b);
        setShape();
        a.event.addListener(map, "click", leftClick);

    }

    function zoomToPoly() {
        if (polyShape && polyShape.getPath().getLength() > 1) {
            var b = new google.maps.LatLngBounds();
            polyShape.getPath().forEach(function (a) {
                b.extend(a)
            });
            map.fitBounds(b)
        }
    }

    function clearPoly() {
        var a = google.maps;
        for (var b = 0, d; d = markers[b]; b++) {
            a.event.clearInstanceListeners(d);
            d.setMap(null)
        }
        if (polyShape) {
            for (var c = 0, g; g = polyShape.listeners[c]; c++) {
                a.event.removeListener(g)
            }
            polyShape.setMap(null);
            polyShape = null
        }
        markers.length = 0;
        document.getElementById("report").innerHTML = " "
    }
    window.onload = buildMap;
</script>
<div id="map"></div>
<table id="desc">
    <tr>
        <td>Click at least at three different places on the map to draw a polygon.
<b>Try to drag the shape of the polygon.</b> The corners of the polygon are draggable and removable at any position. You can add and remove vertices simply by click.</td>
    </tr>
    <tr>
        <td>Area of polygon:</td>
    </tr>
    <tr>
        <td id="report"> </td>
    </tr>
    <tr>
        <td style="height:20px"> </td>
    </tr>
    <tr>
        <td>
<a href="#" class="button" onclick="zoomToPoly();return false;">Zoom To Polygon</a>

        </td>
    </tr>
    <tr>
        <td>
<a href="#" class="button" onclick="clearPoly();return false;">Remove Polygon</a>

        </td>
    </tr>
    <tr>
        <td style="padding-right:19px; height:30px;">
<span class="include"><a href="../index.html">Back</a></span>

            <form action="" method="POST">
                <input name="paths" id="paths" value="" type="hidden" />
                <input type="hidden" id="submitpath" value="Save Paths" name="save_paths">
                <input type="submit" id="Save" value="Save" name="Save">
            </form>
        </td>
    </tr>
</table>
Edited by ignace
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.