Google Maps - Bentuk
Di bab sebelumnya, kita mempelajari cara menggunakan penanda di Google Maps. Bersama dengan penanda, kita juga dapat menambahkan berbagai bentuk seperti lingkaran, poligon, persegi panjang, polylines, dll. Bab ini menjelaskan cara menggunakan bentuk yang disediakan oleh Google Maps.
Polylines
Polyline, disediakan oleh Google Maps, berguna untuk melacak jalur yang berbeda. Anda dapat menambahkan polyline ke peta dengan membuat instance kelasgoogle.maps.Polyline. Saat membuat instance kelas ini, kita harus menentukan nilai yang diperlukan dari properti polyline seperti StrokeColor, StokeOpacity, dan strokeWeight.
Kita bisa menambahkan polyline ke peta dengan meneruskan objeknya ke metode setMap(MapObject). Kita bisa menghapus polyline dengan meneruskan nilai null ke metode SetMap ().
Contoh
Contoh berikut menunjukkan polyline yang menyorot jalur antara kota Delhi, London, New York, dan Beijing.
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap(){
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:3,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var tourplan = new google.maps.Polyline({
path:[
new google.maps.LatLng(28.613939, 77.209021),
new google.maps.LatLng(51.507351, -0.127758),
new google.maps.LatLng(40.712784, -74.005941),
new google.maps.LatLng(28.213545, 94.868713)
],
strokeColor:"#0000FF",
strokeOpacity:0.6,
strokeWeight:2
});
tourplan.setMap(map);
//to remove plylines
//tourplan.setmap(null);
}
</script>
</head>
<body onload = "loadMap()">
<div id = "googleMap" style = "width:580px; height:400px;"></div>
</body>
</html>Ini akan menghasilkan keluaran sebagai berikut -
Poligon
Poligon digunakan untuk menyorot area geografis tertentu dari suatu negara bagian atau negara. Anda dapat membuat poligon yang diinginkan dengan membuat instance kelasgoogle.maps.Polygon. Saat membuat instance, kita harus menentukan nilai yang diinginkan ke properti Polygon seperti path, strokeColor, strokeOapacity, fillColor, fillOapacity, dll.
Contoh
Contoh berikut menunjukkan cara menggambar poligon untuk menyorot kota Hyderabad, Nagpur, dan Aurangabad.
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap(){
var mapProp = {
center:new google.maps.LatLng(17.433053, 78.412172),
zoom:4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var myTrip = [
new google.maps.LatLng(17.385044, 78.486671),
new google.maps.LatLng(19.696888, 75.322451),
new google.maps.LatLng(21.056296, 79.057803),
new google.maps.LatLng(17.385044, 78.486671)
];
var flightPath = new google.maps.Polygon({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});
flightPath.setMap(map);
}
</script>
</head>
<body onload = "loadMap()">
<div id = "googleMap" style = "width:580px; height:400px;"></div>
</body>
</html>Ini akan menghasilkan keluaran sebagai berikut -
Persegi panjang
Kita dapat menggunakan persegi panjang untuk menyorot area geografis suatu wilayah atau negara bagian tertentu dengan menggunakan kotak persegi panjang. Kita bisa memiliki persegi panjang pada peta dengan membuat instance kelasgoogle.maps.Rectangle. Saat membuat instance, kita harus menentukan nilai yang diinginkan ke properti persegi panjang seperti path, strokeColor, strokeOapacity, fillColor, fillOapacity, strokeWeight, bounds, dll.
Contoh
Contoh berikut menunjukkan cara menyorot area tertentu pada peta menggunakan persegi panjang -
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap(){
var mapProp = {
center:new google.maps.LatLng(17.433053, 78.412172),
zoom:6,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var myrectangle = new google.maps.Rectangle({
strokeColor:"#0000FF",
strokeOpacity:0.6,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4,
map:map,
bounds:new google.maps.LatLngBounds(
new google.maps.LatLng(17.342761, 78.552432),
new google.maps.LatLng(16.396553, 80.727725)
)
});
}
</script>
</head>
<body onload = "loadMap()">
<div id = "googleMap" style = "width:580px; height:400px;"></div>
</body>
</html>Ini memberi Anda output berikut -
Lingkaran
Sama seperti persegi panjang, kita dapat menggunakan Lingkaran untuk menyorot area geografis suatu wilayah atau negara bagian tertentu menggunakan lingkaran dengan membuat instance kelas google.maps.Circle. Saat membuat instance, kita harus menentukan nilai yang diinginkan ke properti lingkaran seperti path, strokeColor, strokeOapacity, fillColor, fillOapacity, strokeWeight, radius, dll.
Contoh
Contoh berikut menunjukkan cara menyorot area di sekitar New Delhi menggunakan lingkaran -
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap(){
var mapProp = {
center:new google.maps.LatLng(28.613939,77.209021),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var myCity = new google.maps.Circle({
center:new google.maps.LatLng(28.613939,77.209021),
radius:150600,
strokeColor:"#B40404",
strokeOpacity:0.6,
strokeWeight:2,
fillColor:"#B40404",
fillOpacity:0.6
});
myCity.setMap(map);
}
</script>
</head>
<body onload = "loadMap()">
<div id = "googleMap" style = "width:580px; height:400px;"></div>
</body>
</html>Ini akan menghasilkan keluaran sebagai berikut -