Cara Mudah Menampilkan Google Maps di Web Pribadi


Pada Kesempatan kali ini saya akan menjelaskan sedikit mengenai cara menampilkan Google Maps di halaman web. Untuk sebuah perusahaan atau website yang dipakai untuk usaha peran google maps atau alamat asli dari tempat usaha atau perusahaan tersebut sangat penting, salah satunya untuk meyakinkan pengguna bahwa website kita ini merupakan website yang dapat dipertanggung jawabnya selain itu maps juga dapat berfungsi untuk mempermudah user untuk mencari alamat perusahaan.

contoh maps di dalam sebuah website.

google maps perusahaan

baiklah akan kita mulai cara membuatnya.

pertama buatlah daerah yang akan dijadikan sebagai tempat menyimpan maps tersebut. misalnya di dalam sebuah div atau elemen apapun.

misalnya :

<div id="maps-here" style="width:500px;height:380px;">
</div>

selanjutnya masukkan kode javascript berikut ini di ke dalam dokumen yang sama :
berikut ini adalah kode yang harus dimasukkan untuk menampilkan google maps sebaiknya masukkan kode di bawah ini di atas elemen sebelumnya.

<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
  var mapProp = {
    center:new google.maps.LatLng(51.508742,-0.120850),
    zoom:5,
    mapTypeId:google.maps.MapTypeId.ROADMAP
  };
  var map=new google.maps.Map(document.getElementById("maps-here"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

Untuk mengubah alamatnya anda dapat mengubahnya di bagian

center:new google.maps.LatLng(51.508742,-0.120850)

ubah langitude dan latitudenya sesuai dengan alamat yang diinginkan.
contoh kode lengkap dari kode diatas sebagai berikut :

 <!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
  var mapProp = {
    center:new google.maps.LatLng(51.508742,-0.120850),
    zoom:5,
    mapTypeId:google.maps.MapTypeId.ROADMAP
  };
  var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="maps-here" style="width:500px;height:380px;"></div>
</body>
</html> 

selemat mencoba dan semoga berhasil. terimakasih telah berkunjung

Iklan

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s