Menampilkan google map kedalam HTML sebenarnya bukan hal yang sulit dengan mengikuti tutorial ini saya yakin anda pasti bisa membuat google map sendiri, biasanya google digunakan untuk menentukan lokasi alamat kantor,perusahaan dan nama jalan dengan icon map marker berwarna merah. Untuk contoh sederhanya dibawah ini :
Kode HTML
<!DOCTYPE html >
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps</title>
<style>#map {
height: 500px;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}</style>
</head>
<body>
<div id="map"></div>
<script>
var customLabel = {
restaurant: {
label: 'R'
},
bar: {
label: 'B'
}
};
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(-33.863276, 151.207977),
zoom: 12
});
var infoWindow = new google.maps.InfoWindow;
downloadUrl('https://storage.googleapis.com/mapsdevsite/json/mapmarkers2.xml', function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName('marker');
Array.prototype.forEach.call(markers, function(markerElem) {
var id = markerElem.getAttribute('id');
var name = markerElem.getAttribute('name');
var address = markerElem.getAttribute('address');
var type = markerElem.getAttribute('type');
var point = new google.maps.LatLng(
parseFloat(markerElem.getAttribute('lat')),
parseFloat(markerElem.getAttribute('lng')));
var infowincontent = document.createElement('div');
var strong = document.createElement('strong');
strong.textContent = name
infowincontent.appendChild(strong);
infowincontent.appendChild(document.createElement('br'));
var text = document.createElement('text');
text.textContent = address
infowincontent.appendChild(text);
var icon = customLabel[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
label: icon.label
});
marker.addListener('click', function() {
infoWindow.setContent(infowincontent);
infoWindow.open(map, marker);
});
});
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=KEY&callback=initMap">
</script>
</body>
</html>Yang perlu di perhatikan ID map yang akan menampilkan map google ke dalam HTML ,
<div id="map"></div> google map di tampilkan disini.Untuk membuat KEY API map silakan menuju link ini setelah KEY API dibuat copas keynya letakan didalam tag <script> dibawah ini
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=KEY API(Letakan disini)&callback=initMap">
</script>Diatas adalah cara menampilkan google map kedalam HTML silakan dipelajari dan dikembangkan.
Posting Komentar
Posting Komentar