Nak masukkn Google Map/Earth dlm website

mofarby

Nak tanya pakar2 kat sini yg terrer pasal google earth/google map. Mcmana nk masukkan google earth/map ni ke dalam website. Contohnya mcm website ni: http://www.skypigeon.com/

Pastu bleh ker letak add-on mcm driving direction smua tu ??

trimass

Kilokahn

macam kat website aku la: www.desakuhomestay.com.

Kau kena download GoogleMap API key dulu.

http://code.google.com/apis/maps/index.html

szerone9

kenape aku view kampung aku blur2 je gambanye? tapi tgk kl clear kemaen

mofarby

bro...saye dah downloap API tuh...bleh ajar lgi tak sikit2...hehee...mcm mana nk configure bagi dia fokus kt area yg kita nak.

Kilokahn

OK, dah download API key.

Contoh Googlemap API key (hanya boleh pakai kat domain yg kau register masa sebelum download API key tu) : ABQIAAAA9JU8qX0sYbJudZWl9LDHXRQWvQ
tIMmApka-Yxd5vR8VYrEWVRBQ-aZnio0ULVy1qX-A6kibnt83gZA.

Gantikan key ke dalam coding yang berikut:

1. src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA9JU8qX0sYbJudZWl9LDHXRQWvQ
   
2. 
   
3. tIMmApka-Yxd5vR8VYrEWVRBQ-aZnio0ULVy1qX-A6kibnt83gZA"
   
4.       type="text/javascript">

Copy the Code

Step seterusnya. kau kena determine coordinate tempat yang kau fokus tu dulu.

Bila dah dapat coordinate, kau gantikan coordinate dalam API asal, kepada coordinate baru.

cari line ini:

1. map.setCenter(new GLatLng(6.171556, 102.316986), 13);

Copy the Code

coordinate dlm code di atas (6.171556, 102.316986) tu coordinate Homestay aku. So kau gantikan coordinate tu dgn coordinate kau. Nilai 13 tu aku rasa nilai zoom. Berapa banyak kau nak map kau zoom.

Kalau nak tambah function zoom control, tambah code ini:

1. map.addControl(new GSmallMapControl());

Copy the Code

Kalau nak tambah function tukar jenis2 map (Hybrid, Map, Satellite), tambah code ini:

1. map.addControl(new GMapTypeControl());

Copy the Code

OK. Setakat ni dulu. Next tutorial: Taruk Marker atas Map.

More basics can be found here: http://code.google.com/apis/maps/documentation/introduction.html

Kalau aku boleh buat, kau pun mesti boleh buat.

Kalau ada apa2 soalan, tanya aku. TQ.

[ Last edited by  Kilokahn at 22-1-2008 07:12 AM ]

mofarby

ok...skrg dah ok sampai sini. Ermmm...bleh lar nak smbung next move. Heheee...mula2 pening sikit..tp lama2 ok ar..ehehee

Kilokahn

mintak URL webpage kau boleh? nak tengok googlemap kau macam mana.

mofarby

errr...bro..saye baru try and error kat pc sendiri...tk upload kt mana2 URL lagi pun....errr...bleh ker mcm tu ?? tkder url lagi la...plan nak siapkan website dulu pastu baru upload

Kilokahn

Untuk tandakan marker (bentuk macam raindrop terbalik) atas map, ada dua perkara kena buat:

1) Declare coordinate sebagai satu variable:

1. var DesakuH = new GLatLng(6.171556, 102.316986);

Copy the Code

Code dia atas menunjukkan coordinate position kita di declare sebagai variable bernama DesakuH.

2) Tambah code ini selepas declare coordinate:

1. map.addOverlay(new GMarker(DesakuH));

Copy the Code

Code di atas panggil function GMarker, dengan variable DesakuH.

Selesai!

Untuk tambah Info Window (macam talk bubble comic tu) pulak, tambah line ini:

1. map.openInfoWindow(map.getCenter(),
   
2. document.createTextNode("Desaku Homestay is here! Desaku Homestay is here!"));

Copy the Code

Gantikan "Desaku Homestay is here! Desaku Homestay is here!" dengan text lain.

Selamat mencuba!

mofarby

ok bro...dah dapat pun sampai sini. Tapi kan...bler nak kira direction kat KL kan...dia cakap cannot calculate blablablaa....tp kt negara lain2 bleh plak. Knp ek? Contoh kt singapore bleh jer tp bler kt malaysia dah tak bleh. Bler tgk kat microsoft vistual earth bleh plak nk calculate driving direction. So skrg ingat nk pakai microsoft virtual earth lar pulak .Bro tau tak mcmna nak edit dalam microsoft virtual earth ?

Kilokahn

hmmm. tak reti la. nanti bagi aku masa experiment dengan virtual earth pulak.