Pasang Google Maps Pada web anda

Peta paling terkenal adalah Google Maps. Google Maps yang didukung oleh mesin kuat dan juga memiliki dukungan masyarakat korban besar. 
Google memungkinkan web master untuk menambah dan menyesuaikan peta di situs mereka dengan Google Maps API. Untuk menggunakan Google Maps API, Anda harus mendapatkan kunci API dari Google. Setiap kunci API berlaku untuk domain tertentu tetapi Anda mendapatkan menghasilkan sebagai kunci yang Anda inginkan. 

Membuat peta pertama sederhana kami
Melaksanakan Google Maps pada situs Anda adalah jelas mudah. Anda hanya harus menambahkan:

    Sebuah link ke sebuah file JavaScript yang disediakan oleh Google
    Beberapa baris JavaScript dengan beberapa parameter
    lapisan A dimana peta kami akan ditampilkan.
Link ke file JavaScript:

charset="UTF-8" src="http://maps.google.com/maps?file=api&v=2&hl=en&oe=utf-8&key=API_KEY" <script type="text/javascript"> </ script>
Catatan: Kita dapat mengubah bahasa yang digunakan dalam pelaksanaan peta kami dengan mengubah "hl = en" bagian dan menggunakan bahasa pilihan kami, misalnya "hl = el" untuk bahasa Yunani atau "hl = fr" untuk bahasa Prancis. Kami juga mengubah "API_KEY" bagian dengan kunci yang kami dapatkan dari Google.
Perhatian: Google Maps bekerja lebih baik bila dimuat dalam UTF-8 halaman dikodekan.
Kode JavaScript dengan parameter: 
Di sinilah keajaiban beberapa dapat terjadi dengan Google Maps. Kita dapat menambahkan beberapa parameter dalam JavaScript dan mengubah cara kita melihat peta, bereaksi terhadap umpan balik pengguna dan banyak lagi. Misalnya kita dapat mengatur peta untuk memuat dan menampilkan koordinat tertentu di tengah pandangan kita. Kode ke pusat peta untuk lokasi tertentu adalah:

fungsi initialize () {if (GBrowserIsCompatible ()) {var map = new GMap2 (document.getElementById ("map_canvas"));map.setCenter (GLatLng baru (37,97918, 23,71665), 13);map.setUIToDefault ();}}
Ini bagian dari kode ini di mana kita mengatur koordinat kita ingin peta untuk fokus:
map.setCenter (GLatLng baru (37,97918, 23,71665), 13);
Opsi "13" adalah tingkat zoom peta kami. Kita dapat mengatur nomor dari 1 sampai 17.
Untuk mendapatkan Lintang dan Bujur dari lokasi tertentu Anda dapat menggunakan alat ini. Hal ini sangat mudah digunakan. Anda hanya memindahkan peta di sekitar dan tempat lokasi minat Anda di tengah peta.Menempatkan spidol
Anda dapat menandai tempat menarik di peta dengan menggunakan spidol. Kode untuk menempatkan marker di tempat adalah:

var titik GLatLng = baru (37,97110, 23,72601);map.addOverlay (baru GMarker (point));
Jadi, kode kami setelah kami menempatkan penanda, terlihat seperti ini:

fungsi initialize () {if (GBrowserIsCompatible ()) {var map = new GMap2 (document.getElementById ("map_canvas"));map.setCenter (GLatLng baru (37,97918, 23,71665), 13);var titik GLatLng = baru (37,97110, 23,72601);map.addOverlay (baru GMarker (point));map.setUIToDefault ();}}
Contoh di atas pusat peta kami di Athena Yunani, dan menambahkan penanda di Acropolis.
Balon:Balon adalah semacam alat-tips yang dapat Anda gunakan untuk memberikan info tambahan untuk tempat yang ditandai. Sebagai contoh kode di bawah ini akan menambahkan balon di Bukit Acropolis dan menampilkan beberapa informasi:

fungsi initialize () {if (GBrowserIsCompatible ()) {var map = new GMap2 (document.getElementById ("map_canvas"));map.setCenter (GLatLng baru (37,97110, 23,72601), 13);var html = "Parthenon, Alamat: Acropolis Hill";map.openInfoWindow (map.getCenter (),document.createTextNode (html));map.setUIToDefault ();}}
Aktif Marker
Kita dapat menggabungkan spidol dan balon untuk menciptakan penanda aktif yang akan menampilkan balon hanya bila pengguna mengklik marker.Kode untuk melakukan ini adalah:

fungsi initialize () {if (GBrowserIsCompatible ()) {var map = new GMap2 (document.getElementById ("map_canvas"));map.setCenter (GLatLng baru (37,97918, 23,71665), 13);var baseIcon = baru GIcon (G_DEFAULT_ICON);baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";baseIcon.iconSize baru = GSize (20, 34);baseIcon.shadowSize baru = GSize (37, 34);baseIcon.iconAnchor = new GPoint (9, 34);baseIcon.infoWindowAnchor = new GPoint (9, 2);
fungsi createMarker (titik, indeks) {var redIcon = GIcon (baseIcon) baru;redIcon.image = "http://www.google.com/mapfiles/marker.png";markerOptions = {icon: redIcon};var marker = new GMarker (point, markerOptions);GEvent.addListener (marker, "klik", fungsi () {marker.openInfoWindowHtml ("Parthenon, Alamat: Acropolis Hill");});return marker;}
var latlng GLatLng = baru (37,97110, 23,72601);map.addOverlay (createMarker (latlng));}}
Mari kita pergi ke kode lagi. Bagian ini menambahkan bayangan di bawah penanda kami:
var baseIcon = baru GIcon (G_DEFAULT_ICON);baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";baseIcon.iconSize baru = GSize (20, 34);baseIcon.shadowSize baru = GSize (37, 34);baseIcon.iconAnchor = new GPoint (9, 34);baseIcon.infoWindowAnchor = new GPoint (9, 2);
Kami mengatur tindakan penanda di sini:

fungsi createMarker (titik, indeks) {var redIcon = GIcon (baseIcon) baru;redIcon.image = "http://www.google.com/mapfiles/marker.png";markerOptions = {icon: redIcon};var marker = new GMarker (point, markerOptions);GEvent.addListener (marker, "klik", fungsi () {marker.openInfoWindowHtml ("Parthenon, Alamat: Acropolis Hill");});return marker;}
Di sinilah penanda kita akan:
var latlng GLatLng = baru (37,97110, 23,72601);map.addOverlay (createMarker (latlng));
Loading peta
Kita bisa memuat peta dengan 2 cara. Kami dapat mengatur untuk memuat peta secepat halaman kami dimuat dengan menggunakan aktivitas onload badan, atau kita bisa menetapkan proses loading untuk acara lain. Either way, fungsi kita butuhkan adalah:

    initialize () Untuk memuat peta
    GUnload () Untuk membongkar peta dan bebas beberapa memori yang digunakan oleh peta.
Kita juga perlu menambahkan lapisan div (setiap elemen blok akan melakukan karya) menugaskan id yang digunakan oleh kode JavaScript (Dalam "map_canvas" contoh kita). Kita juga dapat menerapkan aturan CSS untuk lapisan.Menyesuaikan Maps Anda
Anda dapat menggunakan ikon kustom untuk penanda dan bayangan. Dua alat besar untuk menciptakan ikon sendiri dapat ditemukan di sini dan di sini. Anda juga dapat menyesuaikan tampilan balon menggunakan HTML dan CSS. Anda benar harus melarikan diri tanda kutip ("s dan 's) sekalipun.Menambahkan beberapa spidol dan mengelompokkan mereka
Kita dapat menandai beberapa lokasi pada peta kami dan kelompok mereka sesuai dengan kebutuhan kita. Jadi, kita dapat mengatur peta kami untuk menampilkan ikon penanda yang berbeda untuk hotel berdasarkan kategori mereka, kita dapat mengatur sebuah ikon dengan bangunan untuk membantu penggunaikon dengan bangunan untuk membantu pengguna kami mengidentifikasi bangunan kepentingan atau ikon lain untuk jembatan. Untuk melakukan ini, kita harus menggunakan file XML file.A XML sederhana terlihat seperti ini:

<markers><Penanda name = "Judul Anda di sini" label = "Ini adalah label penanda" "Deskripsi balon" desc = lat = "37,97167" lng = "23,72581" type = "Di sini kita menetapkan jenis penanda itu. Misalnya Jembatan "Alamat =" Alamat di sini "icona =" Kami menempatkan path gambar di sini "/></ Spidol>
Anda dapat menambahkan penanda sebanyak yang Anda inginkan di file.Satu hal yang harus sangat sadar, adalah bahwa Anda harus melarikan diri karakter khusus seperti tanda kutip dan tanda kutip ganda, dan "#@$<>" buku Anda, dan link Anda harus melarikan diri juga. JavaScript yang dibutuhkan adalah:
src="http://gmaps-utility-library.googlecode.com/svn/trunk/labeledmarker/release/src/labeledmarker.js" <script type="text/javascript"> </ script>
dan kami juga mengatur beberapa parameter:

var iconRed GIcon baru = ();iconRed.image = '.. / img / penanda-red.png';iconRed.shadow ='';iconRed.iconSize baru = GSize (32, 32);iconRed.shadowSize baru = GSize (22, 20);iconRed.iconAnchor = new GPoint (16, 16);iconRed.infoWindowAnchor = new GPoint (5, 1);var customIcons = [];
customIcons ["kuno"] = iconRed;markerGroups var = {"kuno": []};
Jadi kita mengatur properti customIcons untuk "kuno" untuk iconRed dan kita juga harus menggunakan tipe ini (kuno) dalam file XML kita. Jika kita nama kita file XML sebagai markers.xml, maka kita harus menggunakan kode ini:

GDownloadUrl ("markers.xml", fungsi (data) {/ / Kita mengatakan Google Maps untuk memuat file kamixml var = GXml.parse (data);var marker = xml.documentElement.getElementsByTagName ("marker"); / / dan membaca spidolfor (var i = 0; i markers.length <; i) {nama var = penanda [i] getAttribute ("nama");. / / Dari sini turun kita menetapkan variabel.. Label var = penanda [i] getAttribute ("label");desc var = penanda [i] getAttribute ("desc").;alamat var = penanda [i] getAttribute ("alamat").;. Jenis var = penanda [i] getAttribute ("type");. Icona var = penanda [i] getAttribute ("icona");titik GlatLng = var baru (parseFloat (markers [i]. getAttribute ("lat")), / / dan kami mengatur lat-panjangparseFloat (markers [i] getAttribute (. "lng ")));penanda createMarker = var (titik, nama, label, desc, alamat, jenis, icona);map.addOverlay (penanda);}});}}
fungsi createMarker (titik, nama, label, desc, alamat, jenis, icona) {var marker = new LabeledMarker (titik, {icon: customIcons [jenis], labelText: label, labelOffset: GSize baru (-6, -8 )})};
Anda dapat bermain dengan GSize () parameter fungsi dan mengatur label penanda masing-masing berada di perbatasan penanda itu. Untuk Grup penanda kita perlu melakukan ini:

markerGroups [jenis] push (penanda).;html = var "<img src=" icona" height=150 border=0 /> <br> <span> <b> "nama" </ b> <br/> "desc "<br/> <b> Alamat: </ b>" Alamat "<br/> <br/> <span>";GEvent.addListener (marker, 'klik', fungsi () {marker.openInfoWindowHtml (html);});return marker;}
Untuk mengatur ikon yang berbeda berdasarkan kepentingan Anda dapat melakukannya dengan menggunakan metode yang sama dijelaskan di atas dengan beberapa variasi. Untuk setiap ikon kita menggunakan kode ini:

var iconRed GIcon baru = ();iconRed.image = '.. / img / penanda-red.png';iconRed.shadow ='';iconRed.iconSize baru = GSize (32, 32);iconRed.shadowSize baru = GSize (22, 20);iconRed.iconAnchor = new GPoint (16, 16);iconRed.infoWindowAnchor = new GPoint (5, 1);
iconGreen = GIcon var baru ();iconGreen.image = '.. / img / penanda-green.png';iconGreen.shadow ='';iconGreen.iconSize baru = GSize (32, 32);iconGreen.shadowSize baru = GSize (22, 20);iconGreen.iconAnchor = new GPoint (16, 16);iconGreen.infoWindowAnchor = new GPoint (5, 1);
iconBrown = GIcon var baru ();iconBrown.image = '.. / img / penanda-brown.png';iconBrown.shadow ='';iconBrown.iconSize baru = GSize (32, 32);iconBrown.shadowSize baru = GSize (22, 20);iconBrown.iconAnchor = new GPoint (16, 16);iconBrown.infoWindowAnchor = new GPoint (5, 1);
var customIcons = [];
customIcons ["hotel"] = iconRed;customIcons ["jembatan"] iconGreen =;customIcons ["bukit"] iconBrown =;markerGroups var = {"hotel": [], "jembatan": [], "bukit": []};
 
Jadi, jika kita mengatur jenis setiap penanda dalam file XML kita sebagai hotel, jembatan dan bukit, kami juga menetapkan warna yang berbeda untuk setiap ikon.Membuat penanda kita lebih dinamis
Kita dapat membuat penanda kita sedikit lebih user friendly. Kita dapat membiarkan pengguna memutuskan penanda untuk menampilkan atau menyembunyikan menggunakan peristiwa dari tombol, kotak centang atau links.To melakukan hal ini Anda harus menambahkan kode berikut tepat setelah "map.addMapType (G_SATELLITE_3D_MAP);" bagian:

. Document.getElementById ("hotelCheckbox") diperiksa = true;. Document.getElementById ("bridgeCheckbox") diperiksa = true;. Document.getElementById ("hillCheckbox") diperiksa = true;. Document.getElementById ("labelsCheckbox") diperiksa = true;
dan pada akhir kode JavaScript Anda menambahkan ini:

fungsi toggleGroup (jenis) {for (var i = 0; i <markerGroups [jenis] panjang;. i) {var marker = markerGroups [jenis] [i];if (marker.isHidden ()) {marker.show ();} Else {marker.hide ();}}}
fungsi toggleLabels () {var showLabels = document.getElementById ("labelsCheckbox") diperiksa.;untuk (groupname dalam markerGroups) {for (var i = 0; i <markerGroups [groupname] panjang;. i) {var marker = markerGroups [groupname] [i];marker.setLabelVisibility (showLabels);}}}
fungsi hideAll () {var kotak = document.getElementsByName ("mark");for (var i = 0; i boxes.length <; i) {jika (kotak [i]. dicentang) {. Kotak [i] diperiksa = false;switchLayer (palsu, lapisan [i] obj.);chosen.push (i);}}}
fungsi checkChecked () {var kotak = document.getElementsByName ("mark");for (var i = 0; i boxes.length <; i) {jika (kotak [i] dicentang.) return true;}return false;}
Hal terakhir yang harus dilakukan adalah dengan menambahkan elemen kotak centang pada halaman Anda:
<input type="hidden" id="labelsCheckbox" onclick="toggleLabels()" checked="checked" /><label for="hotelCheckbox"> Hotel </ label> <input type="checkbox" id="hotelCheckbox" onclick="toggleGroup('hotel')" checked="checked" /><label for="bridgeCheckbox"> Jembatan </ label> <input type="checkbox" id="bridgeCheckbox" onclick="toggleGroup('bridge')" checked="checked" />
Kami siap Google Maps. Saya harap Anda untuk menemukan artikel ini bermanfaat. Kami menutupi sebagian besar dari Google Maps API dan sekarang Anda harus dapat menambahkan Google Maps ke situs Anda, spidol tempat dalam kelompok dan membiarkan pengguna memilih tanda harus terlihat dan yang tidak seharusnya.

Tutorial lengkapnya baca disini