Posted in IT

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

Advertisements

Author:

Siapa itu hilwa? Oh, itu pertanyaan yang sangat bagus! Hilwa itu adalah nickname dari seseorang yang bernama Wirda Hilwa, Tapi Wirda Hilwa itu masih punya nickname yang lain, yaitu wirda, dan iwa. Dari beberapa nickname itu Wirda Hilwa paling suka dipanggil Hilwa, karena arti dari hilwa itu adalah... hmm..., ga jadi deh, rahasia :P . [Sekarang serius mode:on ] Singkatnya aja, hilwa itu adalah seseorang yang hobi baca blog2 orang utk diambil manfaat & pelajaran dari blog tsb. Lalu terinspirasi pula utk membuat blog sendiri, utk berbagi yang bisa dibagi kpd orang lain. Semoga blog ini dapat bermanfaat buat yang baca. Amiin.

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