Kursus a2fahmi Gratis klik disini

Kursus Android Gratis, dengan syarat:

  • 1. Laki-laki beragama islam dan sholat 5 waktu, domisili bogor
  • 2. Masih SMK/SMA (matematika=6) / Mahasiswa (jurusan IT) / Pengganguran (Menguasai dasar JAVA)
  • 3. No HandPhone selain indosat
  • 4. Saat belajar bersedia membantu projek tanpa dibayar / membuat aplikasi di playstore dengan copyright saya
  • 5. Membawa Laptop

Kursus Framework CodeIgniter, dengan syarat:

  • 1. Laki-laki beragama islam dan sholat 5 waktu, domisili bogor
  • 2. Masih SMK/SMA (matematika=6) / Mahasiswa (jurusan IT) / Pengganguran (suka dengan komputer)
  • 3. No HandPhone selain indosat
  • 4. Saat belajar bersedia membantu projek tanpa dibayar
  • 5. Membawa Laptop

Fahmi Basya Kartapura On July - 17 - 2013

Contoh Kasus:

Saya ingin menampilkan tool gambar dalam Google Maps seperti yang ditunjukkan panah dalam gambar dibawah ini:

Pertanyaan:

Bagaimana cara membuatnya … ?

Jawaban:

Buatlah sebuah file bernama tool_gambar.html dengan isi seperti terlihat pada kode dibawah ini:

<html> 

<head>

<style type=”text/css”>

#petaBogor { height: 50%; width:50% }

</style>

<script type=”text/javascript” src=”https://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=false&libraries=drawing”>    </script>

<script type=”text/javascript”>

function initialize() {

var myLatLng = new google.maps.LatLng(-6.582717,106.778648);

var mapOptions = {

zoom: 14,

center: myLatLng,

mapTypeId: google.maps.MapTypeId.ROADMAP

};

var map = new google.maps.Map(document.getElementById(“petaBogor”),      mapOptions);

var drawingManager = new google.maps.drawing.DrawingManager({

drawingMode: google.maps.drawing.OverlayType.MARKER,

drawingControl: true,

drawingControlOptions: {

position: google.maps.ControlPosition.TOP_CENTER,

drawingModes: [

google.maps.drawing.OverlayType.MARKER,

google.maps.drawing.OverlayType.CIRCLE,

google.maps.drawing.OverlayType.POLYGON,

google.maps.drawing.OverlayType.POLYLINE,

google.maps.drawing.OverlayType.RECTANGLE

]

},

markerOptions: {

icon: ‘images/beachflag.png’

},

circleOptions: {

fillColor: ‘#ffff00′,

fillOpacity: 1,

strokeWeight: 5,

clickable: false,

editable: true,

zIndex: 1

}

});

drawingManager.setMap(map);

}

google.maps.event.addDomListener(window, ‘load’, initialize);

</script>

</head>

<body>

<div id=”petaBogor”/>

</body>

</html>

Keterangan:

  • Sebelumnya kamu harus membaca artikel menampilkan peta dalam browser
  • <script type=”text/javascript” src=”https://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=false&libraries=drawing”>, pada kode ini kita menambahkan libraries=drawing.
  • drawingManager = new google.maps.drawing.DrawingManager(), Kode ini digunakan untuk membuat objek DrawingManager.
  • drawingMode: google.maps.drawing.OverlayType.MARKER, Kode ini digunakan untuk menghighlight tool gambar bertipe MARKER.
  • markerOptions adalah opsion untuk tool gambar google.maps.drawing.OverlayType.MARKER
  • circleOptions adalah opsion untuk tool gambar google.maps.drawing.OverlayType.CIRCLE
  • drawingControl: true, Kode ini digunakan untuk menampilkan tool gambar, beri nilai false untuk menyembunyikannya.
  • drawingManager.setMap(map), Kode ini untuk menambahkan objek drawingManager ke dalam peta.

Hasil:

Buka File HTMLmu dalam browsermu dan lihatlah hasilnya apakah sudah sesuai.




Categories: Google Map

Leave a Reply