Tilføj kasse som består af latitude + longitude kordinater.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta name="Generator" content="Stone's WebWriter 4">
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<style type="text/css">
v\:* {
behavior:url(#default#VML);
}
</style>
<title>GM API: shape getter</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAH6gR4TcjkaLPaO9hB6_0ARR5bH6Db6o3HJBIWNvtad6FfROENBTBM7JExw3X4y5hxQkoDeJMrpeISQ"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
/* (c) 2007 Witold Rugowski http://nhw.pl
v0.1 - 2007-02-09 - Initial release, tested in FF, some quirks in IE
v0.2 - 2007-03-27 - Improved release - drag&drop, changed icon
v0.3 - 2007-05-15 - Fixed blocked drag&drop
*/
var points = new Array()
var markers = new Array()
var map
var line = undefined
var vertex = true
var new_icon = new GIcon()
new_icon.image = "http://nhw.pl/tmp/cross.png"
new_icon.size = new GSize(16,16)
new_icon.iconAnchor = new GPoint(8,9)
new_icon.infoWindowAnchor = new GPoint(7,7)
var opt
opt = {}
opt.icon = new_icon
opt.draggable = true
opt.clickable = false
opt.dragCrossMove = true
var geocoder = new GClientGeocoder();
function showAddress(address) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + " not found");
} else {
map.setCenter(point, 06);
}
}
);
}
function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(52.2419, 21.01), 4);
map.addControl(new GLargeMapControl())
map.addControl(new GMapTypeControl())
GEvent.addListener(map, "click", function (marker, point) {
if (!vertex) //dont add new points in Polygon mode
return
if (!marker) {
new_marker = new GMarker(point,opt)
map.addOverlay( new_marker )
markers.push(new_marker)
GEvent.addListener(new_marker,'dragend', function(){
points[markers.indexOf(this)] = this.getPoint()
reDraw()
asArray()
})
}
points.push(point)
asArray()
reDraw()
}
)
}
}
function clearPoints() {
points= new Array()
markers= new Array
map.clearOverlays()
document.getElementById("output").innerHTML = ""
line = undefined
vertex = true
}
function toArray() {
html = "var points = new Array()<br/>"
for (i=0; i<points.length; i++) {
html = html + 'points['+i+'] = [' + points[i].lat() +
', ' + points[i].lng() + ']<br/>'
}
return html
}
function toGLatLng() {
html = "[<br/>"
for (i=0; i<points.length; i++) {
html = html + ' new GLatLng(' + points[i].lat() +
',' + points[i].lng() + ')'
if (i <points.length-1)
html = html +',<br/>'
else
html = html + '<br/>]<br/>'
}
return html
}
function asArray() {
document.getElementById("output").innerHTML = toArray()
}
function asGLatLng() {
document.getElementById("output").innerHTML = toGLatLng()
}
function reDraw() {
if (vertex) {
if (line) {
map.removeOverlay(line)
}
line = new GPolyline( points )
map.addOverlay(line)
} else {
map.clearOverlays()
map.addOverlay(new GPolygon(points,'#000000',2,1,'#FF0000',.5))
}
}
function delLast() {
points.pop()
map.removeOverlay(markers.pop())
reDraw()
}
function reShape() {
map.clearOverlays()
vertex = !vertex
if (vertex)
for (i=0;i<markers.length;i++)
map.addOverlay(markers[i])
reDraw()
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div style="float:right;width:290px;">
<p style="font-size:0.8em; font-family:verdana,serif">(c) 2007 Witold Rugowski (NetManiac). <a href="http://nhw.pl/">Read more on my
blog</a>
</p>
<form action="#" onsubmit="showAddress(this.address.value); return false">
<p>
<input type="text" size="40" name="address" value=""></input>
<input type="submit" value="Find!"></input>
</p>
</form>
<input type="button" onclick="clearPoints();" value="Clear"/>
<input type="button" onclick="delLast();" value="Delete last"/>
<input type="button" onclick="asArray();" value="As Array"/>
<input type="button" onclick="asGLatLng();" value="As GLatLng"/>
<input type="button" onclick="reShape();" value="Vertexes/Polygon"/>
<div id="output" style="font-size:9px;font-face:Courier"></div></div>
<div id="map" style="width: 650px; height: 700px"></div>
<div style="width:600px;padding:10px;font-size:0.9em">
<p>
Find Your area, click to mark vertexes. Test shape with
<em>Vertex/Polygon</em> switch. When are You ready get output as array of
arrays with lat and lng values or as array of ready to use in GM API powered
applications GLatLng objects (<em>AsArray</em> and <em>As GLatLng</em>
buttons). Use drag&drop to rearrange vertexes.
</p>
<p>
<strong>Remarks:</strong><br/> It tends to become slow when You add more
than 20 points.<br/>
You may be interested in made by me <a href="states.html">shapes of 50 US states</a>.
</p> </div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-385614-1";
urchinTracker();
</script>
</body>
</html>
---------------------
Der skal tilføjes til ovennævnte en kasse udfra latitude longitude kordionater - det vand (lyseblå) som er indenfor kordinaterne skal ændre farve til mørkeblå.
