Membuat Dual Maps dan Indeks Peta dengan Google Maps

Posted: December 6, 2010 in Maps Lanjutan
Tags: , ,

Bisanya dalam peta konvensional terdapat indeks peta. Indeks peta bisa berfungsi sebagai arah dan posisi umum sebuah peta. Disini saya akan sedikit berbagi bagaimana membuat Indeks peta dengan google maps, bisa juga sebagai model dual maps google.

dari tutorial yang dahulu, lupa… nih linknya… cukup tambahkan beberapa script, antara lain :

Tambahkan Mini Maps

di halaman web anda, terserah mau taruh dimana ni Indeks Peta
<div id="<span class=">minimap" style="height: 190px"></div>

Tambahkan icon baru di dalam script, seperti ini

var icon_hand = new GIcon();
      icon_hand.image = "xhair.png";
      icon_hand.iconSize = new GSize(21, 21);
      icon_hand.shadowSize = new GSize(0,0);
      icon_hand.iconAnchor = new GPoint(11, 11);
      icon_hand.infoWindowAnchor = new GPoint(11, 11);
      icon_hand.infoShadowAnchor = new GPoint(11, 11);

icon yang saya pakai

Tambahkan Script untuk membuat MiniMaps dan Inisialisasi aksi antara kedua Peta, peta Utama dan Indeksnya. Taruh didalam GBrowserIsCompatible

 var minimap = new GMap2(document.getElementById("minimap"));
		  minimap.setCenter(new GLatLng(-4.039618,114.65332), 3);
		  var xhair = new GMarker(minimap.getCenter(), icon_hand);
		  minimap.addOverlay(xhair);

		  var map_moving = 0;
		  var minimap_moving = 0;

		  function Move(){
			minimap_moving = true;
			if (map_moving == false) {
			  minimap.setCenter(map.getCenter());
			  xhair.setPoint(map.getCenter());
			  xhair.redraw(true);
			}
			minimap_moving = false;
		  }

		  function MMove(){
			map_moving = true;
			if (minimap_moving == false) {
			  map.setCenter(minimap.getCenter());
			  xhair.setPoint(minimap.getCenter());
			  xhair.redraw(true);
			}
			map_moving = false;
		  }

		  GEvent.addListener(map, 'move', Move);
		  GEvent.addListener(minimap, 'moveend', MMove);

Kalo Berhasil tampilannya akan seperti ini

OK Selamat Mencoba😀

CMIIW…..😀

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s