Hello elpeople, saya akan melanjutkan membuat icon marker dan menambahkan ke dalam peta.
Kita hanya membutuhkan 2 file ini, peta.html, map.js, dan plugin tambahan dari google maps javascript.
1. peta.html
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false&libraries=places,visualization&key=AIzaSyBcgp9U9kqpa904ZaX8gsNYN3vojI2BfCE"></script>
<script type="text/javascript" src="map.js"></script>
</body>
</html>
2. map.js
// membuat loading fungsi pertama ketika halaman selesai di load
google.maps.event.addDomListener(window, 'load', init);
function init() {
// Basic options for a simple Google Map
// For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
var mapOptions = {
// How zoomed in you want the map to start at (always required)
zoom: 5, //besar zoom in out
zoomControl: false, //tombol zoom di peta false/true = hide/show
mapTypeControl: false, //pilihan tombol type peta
scaleControl: false,
streetViewControl: false,
rotateControl: false,
// The latitude and longitude to center the map (always required)
center: new google.maps.LatLng(0.656732, 113.951602), // Long Lat Indonesia
//https://mapstyle.withgoogle.com/ membuat style peta agar bagus
styles:
[{"elementType":"geometry","stylers":[{"color":"#1d2c4d"}]},{"elementType":"labels","stylers":[{"visibility":"off"}]},{"elementType":"labels.text.fill","stylers":[{"color":"#8ec3b9"}]},{"elementType":"labels.text.stroke","stylers":[{"color":"#1a3646"}]},{"featureType":"administrative","elementType":"geometry","stylers":[{"visibility":"off"}]},{"featureType":"administrative.country","elementType":"geometry.stroke","stylers":[{"color":"#4b6878"}]},{"featureType":"administrative.land_parcel","stylers":[{"visibility":"off"}]},{"featureType":"administrative.land_parcel","elementType":"labels.text.fill","stylers":[{"color":"#64779e"}]},{"featureType":"administrative.neighborhood","stylers":[{"visibility":"off"}]},{"featureType":"administrative.province","elementType":"geometry.stroke","stylers":[{"color":"#4b6878"}]},{"featureType":"landscape.man_made","elementType":"geometry.stroke","stylers":[{"color":"#334e87"}]},{"featureType":"landscape.natural","elementType":"geometry","stylers":[{"color":"#023e58"}]},{"featureType":"poi","stylers":[{"visibility":"off"}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#283d6a"}]},{"featureType":"poi","elementType":"labels.text.fill","stylers":[{"color":"#6f9ba5"}]},{"featureType":"poi","elementType":"labels.text.stroke","stylers":[{"color":"#1d2c4d"}]},{"featureType":"poi.park","elementType":"geometry.fill","stylers":[{"color":"#023e58"}]},{"featureType":"poi.park","elementType":"labels.text.fill","stylers":[{"color":"#3C7680"}]},{"featureType":"road","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"geometry","stylers":[{"color":"#304a7d"}]},{"featureType":"road","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"labels.text.fill","stylers":[{"color":"#98a5be"}]},{"featureType":"road","elementType":"labels.text.stroke","stylers":[{"color":"#1d2c4d"}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"color":"#2c6675"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#255763"}]},{"featureType":"road.highway","elementType":"labels.text.fill","stylers":[{"color":"#b0d5ce"}]},{"featureType":"road.highway","elementType":"labels.text.stroke","stylers":[{"color":"#023e58"}]},{"featureType":"transit","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"labels.text.fill","stylers":[{"color":"#98a5be"}]},{"featureType":"transit","elementType":"labels.text.stroke","stylers":[{"color":"#1d2c4d"}]},{"featureType":"transit.line","elementType":"geometry.fill","stylers":[{"color":"#283d6a"}]},{"featureType":"transit.station","elementType":"geometry","stylers":[{"color":"#3a4762"}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#0e1626"}]},{"featureType":"water","elementType":"labels.text.fill","stylers":[{"color":"#4e6d70"}]}]
};
// Get the HTML DOM element that will contain your map
// We are using a div with id="map" seen below in the <body>
var mapElement = document.getElementById('map');
// Create the Google Map using our element and options defined above
var mapkpi = new google.maps.Map(mapElement, mapOptions);
var markerNode = new google.maps.Marker({
position: new google.maps.LatLng (0.656732, 113.951602),
map: mapkpi,
animation: google.maps.Animation.BOUNCE,
icon: 'marker.ico',
title: 'Posisi Ku'
});
}
Jika ada pertanyaan untuk penjelasan script yang tidak dimengerti, bisa bertanya di kolom komentar!! Terimakasih,, happy coding!! :)
Download File Lengkap
Sign up here with your email
ConversionConversion EmoticonEmoticon