Skip to content

Instantly share code, notes, and snippets.

@calebwoods

calebwoods/index.html

Created November 27, 2012 14:53
Show Gist options
  • Save calebwoods/4154634 to your computer and use it in GitHub Desktop.
Save calebwoods/4154634 to your computer and use it in GitHub Desktop.
Download ZIP
Draw Polygons on Google Maps
Raw
index.html
<html>
<head>
<title>Draw Sample Polygons</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="https://raw.github.com/HPNeo/gmaps/master/gmaps.js"></script>
</head>
<body>
<div id="map" style="width: 600px; height: 600px"></div>
<script type="text/javascript">
var map;
$(document).ready(function(){
map = new GMaps({
div: '#map',
lat: 36.41,
lng: -90.47
});
poly1 = {
"type": "Polygon",
"coordinates": [
[
[-90.4738990305427,36.4133434167215],
[-90.473979105792,36.4106894643104],
[-90.4773486100253,36.4108323810396],
[-90.4738853926222,36.4135819451996],
[-90.4738990305427,36.4133434167215]
],
[
[-90.4748795899079,36.4122608328937],
[-90.4751238366577,36.4120176306662],
[-90.4750501289294,36.4117390431922],
[-90.4746434744808,36.4118880581738],
[-90.4746528723027,36.4123276807651],
[-90.4748795899079,36.4122608328937]
]
]
}
poly2 = {
"type": "Polygon",
"coordinates": [
[
[-90.4757952747994,36.4126336537819],
[-90.4780170081345,36.4109945744372],
[-90.4779751693138,36.412288080835],
[-90.4775438149632,36.4124700182065],
[-90.4770538333314,36.4124548843337],
[-90.4765777056992,36.412559450055],
[-90.4762265144677,36.4126379979474],
[-90.4758041492371,36.4127245920563],
[-90.4757952747994,36.4126336537819]
]
]
}
multi_poly = {
"type": "MultiPolygon",
"coordinates": [
[
[
[-90.4738990305427, 36.4133434167215],
[-90.473979105792, 36.4106894643104],
[-90.4773486100253, 36.4108323810396],
[-90.4738853926222, 36.4135819451996],
[-90.4738990305427, 36.4133434167215]
],
[
[-90.4748795899079, 36.4122608328937],
[-90.4751238366577, 36.4120176306662],
[-90.4750501289294, 36.4117390431922],
[-90.4746434744808, 36.4118880581738],
[-90.4746528723027, 36.4123276807651],
[-90.4748795899079, 36.4122608328937]
]
],
[
[
[-90.4757952747994, 36.4126336537819],
[-90.4780170081345, 36.4109945744372],
[-90.4779751693138, 36.412288080835],
[-90.4775438149632, 36.4124700182065],
[-90.4770538333314, 36.4124548843337],
[-90.4765777056992, 36.412559450055],
[-90.4762265144677, 36.4126379979474],
[-90.4758041492371, 36.4127245920563],
[-90.4757952747994, 36.4126336537819]
]
]
]
}
utm_poly = {
"type": "MultiPolygon",
"coordinates": [
[
[
[-90.00575, 35.99485],
[-89.99339, 35.99485],
[-89.99339, 36.00481],
[-90.00575, 36.00481],
[-90.00575, 35.99485]
]
]
]
}
split_utm_poly = {
"type": "MultiPolygon",
"coordinates": [
[
[
[-90.00575, 35.99485],
[-90.0, 35.99485],
[-90.0, 36.00481],
[-90.00575, 36.00481],
[-90.00575, 35.99485]
],
[
[-89.999999999, 35.99485],
[-89.99339, 35.99485],
[-89.99339, 36.00481],
[-89.999999999, 36.00481],
[-89.999999999, 35.99485]
]
]
]
}
drawPoly = function(points) {
map.drawPolygon({
paths: points,
useGeoJSON: true,
strokeColor: '#BBD8E9',
strokeOpacity: 1,
strokeWeight: 3,
fillColor: '#BBD8E9',
fillOpacity: 0.8
});
}
// drawPoly(poly1['coordinates'])
// drawPoly(poly2['coordinates'])
drawPoly(multi_poly['coordinates'])
// drawPoly(utm_poly['coordinates'])
// drawPoly(split_utm_poly['coordinates'])
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment