Membuat Beberapa Polygon di Google Maps

<!DOCTYPE html>
<html>
<head>
<title>Latihan Polygon</title>
</head>
<body>
<script src=”https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false”></script&gt;
<script>

var map;
var infoWindow;

function initialize2() {
var myLatLng = new google.maps.LatLng(-6.8118984663854905,112.8955078125);
var mapOptions = {
zoom: 7,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

var polygon1;
var polygon2;
map = new google.maps.Map(document.getElementById(‘map-canvas’),mapOptions);

var polyCoords1 = [
new google.maps.LatLng(-6.8118984663854905,112.8955078125),
new google.maps.LatLng(-6.806444048123682, 113.4173583984375),
new google.maps.LatLng(-6.828261348825097, 114.06005859375),
new google.maps.LatLng(-6.980954426458483, 114.2578125),
new google.maps.LatLng(-7.318881730366743, 114.10400390625),
new google.maps.LatLng(-7.373362480979634, 113.0328369140625),
new google.maps.LatLng(-7.411495021091396, 112.4505615234375),
new google.maps.LatLng(-7.144498849647323, 111.9781494140625),
new google.maps.LatLng(-6.844623671722899, 112.1978759765625)
];

var polyCoords2 = [
new google.maps.LatLng(-6.828261348825097,112.379150390625),
new google.maps.LatLng(-7.580327791330129, 112.32421875),
new google.maps.LatLng(-7.416942257739026, 111.2255859375),
new google.maps.LatLng(-6.68643125265198, 110.98388671875)
];

polygon1 = new google.maps.Polygon({
paths: polyCoords1,
strokeColor: ‘#FF0000’,
strokeOpacity: 0.8,
strokeWeight: 1,
fillColor: ‘#FF0000’,
fillOpacity: 0.35
});

polygon1.setMap(map);

//Add a listener for the click event
google.maps.event.addListener(polygon1, ‘click’, showArrays);

polygon2 = new google.maps.Polygon({
paths: polyCoords2,
strokeColor: ‘#FF0000’,
strokeOpacity: 0.8,
strokeWeight: 1,
fillColor: ‘#FF0000’,
fillOpacity: 0.35
});

polygon2.setMap(map);

//Add a listener for the click event
//google.maps.event.addListener(polygon2, ‘click’, showArrays());

infowindow = new google.maps.InfoWindow();
}

function showArrays(event) {

// Since this Polygon only has one path, we can call getPath()
// to return the MVCArray of LatLngs
var vertices = this.getPath();

var contentString = ‘<b>Contoh Polygon</b><br>’;
contentString += ‘Clicked Location: <br>’ + event.latLng.lat() + ‘,’ + event.latLng.lng() + ‘<br>’;

// Iterate over the vertices.
for (var i =0; i < vertices.length; i++) {
var xy = vertices.getAt(i);
contentString += ‘<br>’ + ‘Coordinate: ‘ + i + ‘<br>’ + xy.lat() +’,’ + xy.lng();
}

// Replace our Info Window’s content and position
infowindow.setContent(contentString);
infowindow.setPosition(event.latLng);

infowindow.open(map);
}

google.maps.event.addDomListener(window, ‘load’, initialize2);
</script>
<br />
<div id=”map-canvas” style=”height: 700px; width: 900px;”>
</div>  </body>
</html>

polygon1

2 thoughts on “Membuat Beberapa Polygon di Google Maps

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s