Menganti Icon Marker Google Maps

Posted: December 3, 2010 in Maps Dasar
Tags: , , ,

Icon standar dari google kadang-kadang membuat kita bosan,  lalu bagaimana membuat icon sendiri / memanfaatkan icon lain yang disediakan google.

ok, lets check this out. sebenarnya google sudah menyediakan macam-macam bentuk icon untuk menjadi icon view dari peta yang ditampilkan.

Google meletakkan icon pada 4 folder “yang saya tau loh😀 ”

  1. http://maps.google.com/mapfiles/kml/pal2/
  2. http://maps.google.com/mapfiles/kml/pal3/
  3. http://maps.google.com/mapfiles/kml/pal4/
  4. http://maps.google.com/mapfiles/kml/pal5/

berikut beberapa list icon yang terdapat difolder tersebut

http://maps.google.com/mapfiles/kml/pal2/

icon0.png icon1.png icon2.png icon3.png icon4.png icon5.png icon6.png icon7.png
icon8.png icon9.png icon10.png icon11.png icon12.png icon13.png icon14.png icon15.png
icon16.png icon17.png icon18.png icon19.png icon20.png icon21.png icon22.png icon23.png
icon24.png icon25.png icon26.png icon27.png icon28.png icon29.png icon30.png icon31.png
icon32.png icon33.png icon34.png icon35.png icon36.png icon37.png icon38.png icon39.png
icon40.png icon41.png icon42.png icon43.png icon44.png icon45.png icon46.png icon47.png
icon48.png icon49.png icon50.png icon51.png icon52.png icon53.png icon54.png icon55.png
icon56.png icon57.png icon58.png icon59.png icon60.png icon61.png icon62.png icon63.png

http://maps.google.com/mapfiles/kml/pal3/

icon0.png icon1.png icon2.png icon3.png icon4.png icon5.png icon6.png icon7.png
icon8.png icon9.png icon10.png icon11.png icon12.png icon13.png icon14.png icon15.png
icon16.png icon17.png icon18.png icon19.png icon20.png icon21.png icon22.png icon23.png
icon24.png icon25.png icon26.png icon27.png icon28.png icon29.png icon30.png icon31.png
icon32.png icon33.png icon34.png icon35.png icon36.png icon37.png icon38.png icon39.png
icon40.png icon41.png icon42.png icon43.png icon44.png icon45.png icon46.png icon47.png
icon48.png icon49.png icon50.png icon51.png icon52.png icon53.png icon54.png icon55.png
icon56.png icon57.png icon58.png icon59.png icon60.png icon61.png icon62.png icon63.png

http://maps.google.com/mapfiles/kml/pal4

icon0.png icon1.png icon2.png icon3.png icon4.png icon5.png icon6.png icon7.png
icon8.png icon9.png icon10.png icon11.png icon12.png icon13.png icon14.png icon15.png
icon16.png icon17.png icon18.png icon19.png icon20.png icon21.png icon22.png icon23.png
icon24.png icon25.png icon26.png icon27.png icon28.png icon29.png icon30.png icon31.png
icon32.png icon33.png icon34.png icon35.png icon36.png icon37.png icon38.png icon39.png
icon40.png icon41.png icon42.png icon43.png icon44.png icon45.png icon46.png icon47.png
icon48.png icon49.png icon50.png icon51.png icon52.png icon53.png icon54.png icon55.png
icon56.png icon57.png icon58.png icon59.png icon60.png icon61.png icon62.png icon63.png

http://maps.google.com/mapfiles/kml/pal5

icon0.png icon1.png icon2.png icon3.png icon4.png icon5.png icon6.png icon7.png
icon8.png icon9.png icon10.png icon11.png icon12.png icon13.png icon14.png icon15.png
icon16.png icon17.png icon18.png icon19.png icon20.png icon21.png icon22.png icon23.png
icon24.png icon25.png icon26.png icon27.png icon28.png icon29.png icon30.png icon31.png
icon32.png icon33.png icon34.png icon35.png icon36.png icon37.png icon38.png icon39.png
icon40.png icon41.png icon42.png icon43.png icon44.png icon45.png icon46.png icon47.png
icon48.png icon49.png icon50.png icon51.png icon52.png icon53.png icon54.png icon55.png
icon56.png icon57.png icon58.png icon59.png icon60.png icon61.png icon62.png icon63.png

*list yang anda bisa manfaatkan iconnya

Bagaimana caranya memasukkan icon ini. kita kembali ke script peta dasar yang pernah kita buat

LUPA ?? Silahkan cek link ini😀


sekarang kita coba memanfaatkan icon di PAL4, kita ambil alamat nya saja, lalu kita tambahkan ke script kita, ketikkan code ini taruh diatas function createMarker

 var baseIcon = new GIcon();
          baseIcon.iconSize=new GSize(32,32);
          baseIcon.shadowSize=new GSize(56,32);
          baseIcon.iconAnchor=new GPoint(16,32);
          baseIcon.infoWindowAnchor=new GPoint(16,0);

      var ico1 = new GIcon(baseIcon, "http://maps.google.com/mapfiles/kml/pal4/icon40.png", null,
"http://maps.google.com/mapfiles/kml/pal4/icon40s.png");
      var ico2 = new GIcon(baseIcon, "http://maps.google.com/mapfiles/kml/pal4/icon41.png", null,
"http://maps.google.com/mapfiles/kml/pal4/icon41s.png");
      var ico3 = new GIcon(baseIcon, "http://maps.google.com/mapfiles/kml/pal4/icon42.png", null,
"http://maps.google.com/mapfiles/kml/pal4/icon42s.png");
      var ico4 = new GIcon(baseIcon, "http://maps.google.com/mapfiles/kml/pal4/icon43.png", null,
"http://maps.google.com/mapfiles/kml/pal4/icon43s.png");

Tambahkan/ edit  kode pada function createMarker, untuk mengkoordinir inisialisasi icon yang kita buat tadi

function createMarker(point,html,icon) {
        var marker = new GMarker(point,icon);
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });
        return marker;
    }

Tambahkan inisialisasi nama icon, pada point marker yang anda buat, seperti contoh salah satu point berikut.

      var point = new GLatLng(-7.231699,112.368164);
      var marker = createMarker(point,'Marker WIndow 1, dari icon yang anda klik',ico1)
      map.addOverlay(marker);

var marker = createMarker(point,’Marker WIndow 1, dari icon yang anda klik’,ico1) <- inisialisasi nama icon yang anda sudah deklarasikan tadi.

Sekarang coba refresh halaman web yang anda edit, kira-kira hasilnya akan seperti ini

Oke, selamat mencoba ….:D

CMIIW……😀

Comments
  1. hadi says:

    jin botol,
    tanya nih… gimana jika long dan lat nya ambilnya dari database SQL?
    plus jawaban ke email ya…

    terima kasih.

    • kurniawandwi says:

      sebenarnya mudah kok mas hadi..

      yang penting mas tau dasar2 Javascript, kan basic dari Google maps tuh Javascript,

      bisa gunakan Ajax atau mainin DOMx buat ambil data bs dr XML atau langsung dari database pake JSON😀

      *banyak yang tanya itu dr kemaren, secepatnya aj saya buatin artikel, biar ngerti temen2 yang baca d blog ini😀

      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