Menampilkan peta sederhana Map API

Code Snippet

Menampilkan peta sederhana Map Api

Berikut ini diberikan contoh, bagaimana menampilkan peta sederhana kota Palo Alto di mana Google berada. Peta ini ditampilkan tanpa Control dan Marker. Hanya peta. 

function initialize() {   if (GBrowserIsCompatible()) {

    var map = new GMap2(document.getElementById("map_canvas"));     map.setCenter(new GLatLng(37.4419, -122.1419), 13);

  } } 

Menambahkan 10 Marker secara random di kota Depok

Berikut saya coba berikan contoh bagaimana menampilkan kota Depok dan menambahkan 10 Marker yang lokasinya acak. Ini ditujukan agar Anda mendapat gambaran bagaimana menambahkan  Marker standar di atas peta. 

function initialize() {   if (GBrowserIsCompatible()) {

    var map = new GMap2(document.getElementById("map_canvas"));     map.setCenter(new GLatLng(-6.4, 106.8186111), 13);

    // Add 10 markers to the map at random locations     var bounds = map.getBounds();     var southWest = bounds.getSouthWest();     var northEast = bounds.getNorthEast();     var lngSpan = northEast.lng() - southWest.lng();     var latSpan = northEast.lat() - southWest.lat();     for (var i = 0; i < 10; i++) {

      var point = new GLatLng(southWest.lat() + latSpan * Math.random(),                               southWest.lng() + lngSpan * Math.random());       map.addOverlay(new GMarker(point));

    }   } }

Membuat peta yang berpindah dari Depok ke Palo Alto setelah 1 detik

Berikut ini contoh membuat peta yang dapat beranimasi, berpindah dari Depok kemudian pindah ke Palo Alto. Ini bukanlah contoh yang baik. Untuk implementasi yang baik, sebaiknya pindah ke lokasi yang dekat saja dan bertahap. Screenshot tidak diberikan karena tidak menggambarkan animasi.

function initialize() {   if (GBrowserIsCompatible()) {

    var map = new GMap2(document.getElementById("map_canvas"));     map.setCenter(new GLatLng(-6.4, 106.8186111), 13);     window.setTimeout(function() {

      map.panTo(new GLatLng(37.4569, -122.1569));

    }, 1000);

  } } 

Menampilkan window info di atas peta 

function initialize() {   if (GBrowserIsCompatible()) {

    var map = new GMap2(document.getElementById("map_canvas"));     map.setCenter(new GLatLng(-6.4, 106.8186111), 13);     map.openInfoWindow(map.getCenter(),

                       document.createTextNode("Hello, world"));

  } } 

Event: Menampilkan alert ketika user mengklik peta

Contoh program berikut ini menunjukkan bagaimana menangkap event click kemudian melakukan proses sederhana, yaitu menampilkan alert. 

function initialize() {   if (GBrowserIsCompatible()) {

    var map = new GMap2(document.getElementById("map_canvas"));     map.setCenter(new GLatLng(-6.4, 106.8186111), 13);     GEvent.addListener(map, "click", function() {       alert("You clicked the map.");

     });

  } }