tutorial javascript

Menampilkan Peta Di Website Dengan Javascript, Tutorial Google Maps

Menampilkan Peta Dengan Javascript – Kali ini kita akan membahas bagaimana cara menampilkan peta di website menggunakan javascript dengan memanfaatkan service yang disediakan oleh google maps. Untuk dapat menampilkan map pada webite, kita akan bagi menjadi dua cara, yang pertama adalah menggunakan tag iframe (cara ini hanya mampu menampilkan map saja tanpa ada fitur tambahan), cara kedua adalah dengan memanfaatkan API dari google maps itu sendiri (dengan cara ini kita bukan hanya akan menampilkan tapi juga kita akan menambahkan beberapa fitur seperti on click event dan kotak pencarian).

BACA JUGA : https://soft-gain.com/2020/07/02/daftar-library-javascript-terbaik-terpopuler/

Goals – Menampilkan Peta Di Website Kita Sendiri Dengan Javascript

Seperti yang sudah dibahas diatas, kita akan mencoba menampilkan map dengan dua cara, yang mana bisa disesuaikan dengan kebutuhan kita masing-masing. Khusus untuk cara kedua (yang menggunakan API) kita diharuskan memiliki key terlebih dahulu, silahkan ambil key-nya dari sini (https://developers.google.com/maps/documentation/javascript/get-api-key). Berikut ini adalah contoh dari google map yang berhasil kita tampilkan pada halaman website kita sendiri :

Menampilkan Peta Dengan Javascript
Cara pertama, menggunakan tag iframe
Menampilkan Peta Dengan Javascript
Cara kedua menggunakan API

Materi

1. Menggunakan tag iframe

Pertama kita akan membahas bagaimana menampilkan google maps dengan menggunakan tag iframe, apa itu iframe? Iframe itu sendiri adalah sebuah tag elemen dari HTML yang memungkinkan kita untuk men-embed media dari suatu halaman. Untuk menggunakannya dengan google maps, silahkan copy code dibawah ini :

<h1>Membuat Google Maps dengan tag iframe</h1>
<iframe width="100%" height="300" frameborder="10" scrolling="no" marginheight="0" marginwidth="0" src="https://www.google.com/maps?q=-6.175307,106.827131&hl=es;z=14&output=embed"></iframe>

Untuk menyesuaikan daerah mana yang ingin ditampilkan pada halaman web, kita tinggal menyesuaikan kordinat yang kita dapat dari google maps kedalam parameter q (contoh : ?q=-6.175307,106.827131). Jadi untuk mengganti tampilan map kedaerah yang lain kita hanya tinggal merubah kordinat yang ada pada parameter q tersebut.

2. Menggunakan API

Untuk menggunakan cara kedua ini, pastikan anda sudah memiliki key yang diperoleh dari website resmi google. Untuk cara yang kedua ini agak rumit karena kita juga akan menggunakan sedikit javascript. Pertama copy code dibawah ini :

<h1>Membuat Google Maps dengan API</h1>
<input id="search-input" class="controls" type="text" placeholder="Cari...">
<div id="googleMap" style="width:100%;height:300px;"></div>
<div id="address"></div>
<div id="latitude"></div>
<div id="longitude"></div>

Dan berikutnya copy javascript dibawah ini :

var marker;
var map;
var geocoder;
var infowindow;
var searchBox;

function gMap() {
	var mapProp= {
		center:new google.maps.LatLng(-6.175307,106.827131),
		zoom:15,
	};

	map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
	geocoder = new google.maps.Geocoder();
		infowindow = new google.maps.InfoWindow();

	google.maps.event.addListener(map, 'click', function(event) {
		placeMarker(event.latLng);
		geoDecode();
	});

	searchBox = new google.maps.places.SearchBox(document.getElementById('search-input'));
	map.controls[google.maps.ControlPosition.TOP_CENTER].push(document.getElementById('search-input'));

	google.maps.event.addListener(searchBox, 'places_changed', function() {
		searchBox.set('map', null);
		var places = searchBox.getPlaces();
		var bounds = new google.maps.LatLngBounds();
		var i, place;

		for (i = 0; place = places[i]; i++) {
			(function(place) {
				marker = new google.maps.Marker({
					position: place.geometry.location
				});

				marker.bindTo('map', searchBox, 'map');

				google.maps.event.addListener(marker, 'map_changed', function() {
					if (!this.getMap()) {
						this.unbindAll();
					}
				});

				bounds.extend(place.geometry.location);

				geocoder.geocode({
			      'latLng': marker.getPosition()
			    }, function(results, status) {
					if (status == google.maps.GeocoderStatus.OK) {
						if (results[0]) {
							document.getElementById("address").innerHTML = 'Alamat : ' + results[0].formatted_address;
							document.getElementById("latitude").innerHTML = 'Latitude : ' + marker.getPosition().lat();
							document.getElementById("longitude").innerHTML = 'Longitude : ' + marker.getPosition().lng();
							infowindow.setContent(results[0].formatted_address);
							infowindow.open(map, marker);
						}
					}
			    });
			}(place));
		}

		map.fitBounds(bounds);
		searchBox.set('map', map);
		map.setZoom(Math.min(map.getZoom(),15));
		geoDecode();
	});
}

function placeMarker(location) {
    if (marker == null) {
		marker = new google.maps.Marker({
			position: location,
			map: map
		});
    } else {
        marker.setPosition(location);
    }
}

function geoDecode(){
	geocoder.geocode({
      'latLng': marker.getPosition()
    }, function(results, status) {
		if (status == google.maps.GeocoderStatus.OK) {
			if (results[0]) {
				document.getElementById("address").innerHTML = 'Alamat : ' + results[0].formatted_address;
				document.getElementById("latitude").innerHTML = 'Latitude : ' + marker.getPosition().lat();
				document.getElementById("longitude").innerHTML = 'Longitude : ' + marker.getPosition().lng();
				infowindow.setContent(results[0].formatted_address);
				infowindow.open(map, marker);
			}
		}
    });
}

Sedikit penjelasan, fungsi gMap akan kita gunakan sebagai callback agar fungsinya dapat dijalankan oleh API google maps. Didalam fungsi gMap kita akan mendeklarasikan object google (new google.maps) dan menambahkan 2 event yaitu on click event (google.maps.event.addListener(map, ‘click’, function(event)) dan event untuk kotak pencarian (google.maps.event.addListener(searchBox, ‘places_changed’, function()). Selain itu kita juga memiliki fungsi placeMarker yang akan kita gunakan untuk melakukan pin point atau menempatkan titik pada map, dan fungsi geoDecode yang kita gunakan untuk memperoleh informasi wilayah dari titik yang kita tempatkan pada google maps.

Berikut ini adalah contoh full source code nya :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Google Maps</title>
</head>
<body>
	<h1>Membuat Google Maps dengan tag iframe</h1>
	<iframe width="100%" height="300" frameborder="10" scrolling="no" marginheight="0" marginwidth="0" src="https://www.google.com/maps?q=-6.175307,106.827131&hl=es;z=14&output=embed"></iframe>

	</br>

	<h1>Membuat Google Maps dengan API</h1>
	<input id="search-input" class="controls" type="text" placeholder="Cari...">
	<div id="googleMap" style="width:100%;height:300px;"></div>
	<div id="address"></div>
	<div id="latitude"></div>
	<div id="longitude"></div>

	<script>
		var marker;
		var map;
		var geocoder;
  		var infowindow;
  		var searchBox;

		function gMap() {
			var mapProp= {
				center:new google.maps.LatLng(-6.175307,106.827131),
				zoom:15,
			};

			map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
			geocoder = new google.maps.Geocoder();
  			infowindow = new google.maps.InfoWindow();

			google.maps.event.addListener(map, 'click', function(event) {
				placeMarker(event.latLng);
				geoDecode();
			});

			searchBox = new google.maps.places.SearchBox(document.getElementById('search-input'));
			map.controls[google.maps.ControlPosition.TOP_CENTER].push(document.getElementById('search-input'));

			google.maps.event.addListener(searchBox, 'places_changed', function() {
				searchBox.set('map', null);
				var places = searchBox.getPlaces();
				var bounds = new google.maps.LatLngBounds();
				var i, place;

				for (i = 0; place = places[i]; i++) {
					(function(place) {
						marker = new google.maps.Marker({
							position: place.geometry.location
						});

						marker.bindTo('map', searchBox, 'map');

						google.maps.event.addListener(marker, 'map_changed', function() {
							if (!this.getMap()) {
								this.unbindAll();
							}
						});

						bounds.extend(place.geometry.location);

						geocoder.geocode({
					      'latLng': marker.getPosition()
					    }, function(results, status) {
							if (status == google.maps.GeocoderStatus.OK) {
								if (results[0]) {
									document.getElementById("address").innerHTML = 'Alamat : ' + results[0].formatted_address;
									document.getElementById("latitude").innerHTML = 'Latitude : ' + marker.getPosition().lat();
									document.getElementById("longitude").innerHTML = 'Longitude : ' + marker.getPosition().lng();
									infowindow.setContent(results[0].formatted_address);
									infowindow.open(map, marker);
								}
							}
					    });
					}(place));
				}

				map.fitBounds(bounds);
				searchBox.set('map', map);
				map.setZoom(Math.min(map.getZoom(),15));
				geoDecode();
			});
		}

		function placeMarker(location) {
		    if (marker == null) {
				marker = new google.maps.Marker({
					position: location,
					map: map
				});
		    } else {
		        marker.setPosition(location);
		    }
		}

		function geoDecode(){
			geocoder.geocode({
		      'latLng': marker.getPosition()
		    }, function(results, status) {
				if (status == google.maps.GeocoderStatus.OK) {
					if (results[0]) {
						document.getElementById("address").innerHTML = 'Alamat : ' + results[0].formatted_address;
						document.getElementById("latitude").innerHTML = 'Latitude : ' + marker.getPosition().lat();
						document.getElementById("longitude").innerHTML = 'Longitude : ' + marker.getPosition().lng();
						infowindow.setContent(results[0].formatted_address);
						infowindow.open(map, marker);
					}
				}
		    });
		}
	</script>
	<script src="https://maps.googleapis.com/maps/api/js?key=YOUR-API-KEY&callback=gMap&libraries=places"></script>
</body>

Penutup

Demikianlah beberapa cara untuk menampilkan map pada website kita sendiri menggunakan google maps, hal-hal diatas bersifat dasar dan umum, untuk lebih jelasnya bisa langsung saja dibaca pada dokumentasi resmi milik google, terima kasih.

Leave a Reply

Your email address will not be published. Required fields are marked *