Cara Mudah Membuat Geo Location Map pada Website atau Blogger


Banyak website yang kita temui mempunyai berbagai macam cara untuk mempermudah user mengetahui tempat atau lokasi yang ditentukan, seperti halnya untuk menentukan daerah sang pembuat tinggal, dan lain lain. Maka dari itu kita sama sama belajar bagaimana cara mudah untuk membuat map lokasi sendri.?
Pertama tama kita harus tau google sudah menyediakan map untuk digunakan. lalu bagaimana agar kita bisa mengunakan codenya di website atau blogger kita.?

</head> 
Cari code diatas dan masukan script API google maps di atasnya.
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> 

Seperti ini contohnya:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
</head> 

lalu code cssnya:
<style>
#map-canvas {
height: 400px;
width: 300px;
      }
</style>

yang terakhir javascriptnya:

<script type="text/javascript">
function initialize() {
geocoder = new google.maps.Geocoder();
var mapOptions = {
   zoom: 9
   };
var map = new google.maps.Map(document.getElementById("map-canvas"),
    mapOptions);
geocoder.geocode( { 'address': 'yogyakarta'}, function(results, status) {
 if (status == google.maps.GeocoderStatus.OK) {
  map.setCenter(results[0].geometry.location);
      var marker = new google.maps.Marker({
          map: map,
          position: results[0].geometry.location,
    title: 'yogyakarta'
      });
   }
  });
}
  google.maps.event.addDomListener(window, 'load', initialize);
</script> 
code script diatas yang berwarna kuning ber tulisakan yogyakarta dapat kamu ubah nerdasarkan nama daerah yang diinginkan.

yg terakhir element tagnya

 <div id="map-canvas"></div>


lihat contoh nya ada di contact.

Tidak ada komentar:

Posting Komentar