google maps polygons
HTML
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&extension=.js"></script>
<div id="map"></div>
CSS
#map {
width: 400px;
height: 400px;
}
JavaScript
$( function() {
var centerPosition = new google.maps.LatLng( 47.5317892503, 7.70558059221 );
var options = {
zoom: 16,
center: centerPosition,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map($('#map')[0], options);
var result = "{ u'poly1': ( ( 47.5317790059, 7.70534455782 ), ( 47.5319557221, 7.70540356642 ), ( 47.5317892503, 7.70558059221 ), ( 47.5317790059, 7.70534455782 ) ), u'poly2': ( ( 47.5321093878, 7.70504951483 ), ( 47.5321452431, 7.70517826086 ), ( 47.5319403555, 7.70537674432 ), ( 47.5321093878, 7.70504951483 ) ) }";
/* var coords = { "poly1": [
[ 47.5317790059, 7.70534455782],
[ 47.5319557221, 7.70540356642 ],
[ 47.5317892503, 7.70558059221 ],
[ 47.5317790059, 7.70534455782 ]
], "poly2": [
[ 47.5321093878, 7.70504951483 ],
[ 47.5321452431, 7.70517826086 ],
[ 47.5319403555, 7.70537674432 ],
[ 47.5321093878, 7.70504951483 ]
] }; */
var coords = JSON.parse( result.replace( /u/g, "" ).replace( /'/g, '"' ).replace( /\(/g, "[" ).replace( /\)/g, "]" ) );
var path;
var polygon;
for ( var poly in coords ) {
console.log( poly );
path = [];
for ( var i = 0; i < coords[ poly ].length; i ++ ) {
console.log( coords[ poly ][ i ] );
path.push( new google.maps.LatLng( coords[ poly ][ i ][ 0 ], coords[ poly ][ i ][ 1 ] ) );
}
polygon = new google.maps.Polygon( {
paths: path,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35
} );
polygon.setMap( map );
}
} );