Pada artikel
sebelum sudah dibahas tentang layanan pencarian menggunakan geoocoding dan
telah mencoba menampilkan peta munggunakan static map akan tetapi peta tidak
bisa digeser dan diperbesar.
Jadi untuk
hasil peta yang lebih baik dari hasil pencarian, Google menyediakan library
dalam bentuk JavaScript dan Ajax untuk melakukan komunikasi dengan server jadi
bagi anda yang mau menoba Simple Map untuk menampilkan peta lokasi secara lebih
detail (bisa di-zoom, bisa digeser, bisa diberi marker) di pastikan sudah
memahami pemrogram javacript dan Ajax jika masih belum memahami silahkan
belajar dulu. . .!, hehehehehehe
Sebelum kita membuat skrip
simplemap.php kita tambah dulu skrip di pencarian geoocoding sebagai berikut.
... // kode lain
sebelumnya
echo
"<a href='detailplaces.php?lat=$lat&lng=$lng'>Cari sesuatu di
sini</a>";
echo " <a
href='simplemap.php?lat=$lat&lng=$lng'>Peta detail</a>";
}
... // kode lain
sesudahnya
Skrip yang bercetak tebal adalah skrip yang ditambah pada
skrip geoocoding, Selanjutnya buat file simplemap.php seperti berikut.
<?php
$lat = $_GET["lat"]; $lng =
$_GET["lng"];
?>
<!DOCTYPE html>
<html>
<head>
<title>Google Maps JavaScript API v3 Example: Map
Simple</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body,
#map-canvas {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script
src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
function initialize()
{ var latlng = new
google.maps.LatLng(<?php echo "$lat,$lng" ?>);
var mapOptions
= {
zoom: 8, // zoom level
center: latlng, // lokasi marker & titik tengah map
mapTypeId:
google.maps.MapTypeId.ROADMAP //
tampilan awal map
};
map = new
google.maps.Map(document.getElementById('map-canvas'),mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
Panggil ulang file pencarian lokasi, cari suatu lokasi, klik link Peta
Detail, maka ditampilkan peta detailnya yang bisa anda perbesar sampai detil.
Maka dari hasil pencarian maka akan bertambah peta detail
untuk melihat peta menggukan simplemap.php setelah klik peta detail akan tampil
seperti berikut.
Wah, sudah
lumayan detail tampilan petanya meskipun tidak se detail google.map punya
google, iya maklum lah namanya masih belajarkan ada tahapnya mungkin 1 atau 2 bulan
lagi pasti bisa buktinya sipemilik blog aja udah bisa mendevelopori sebuah
sistem geoografis cafe yang berada di kota malang, makanya jangan menyerahlah
untuk terus belajar.
Dengan simplemap
yang kita bisa memperbesar peta dengan klik pengatur sebelah kiri juga bisa
mengeser atau mengganti tampilan peta menjadi satelite dengan cara klik
satelite pada sebelah kanan atas.
Catatan : simplemap adalah
layanan api yang tidak menggunakan api key.
Semoga Bermanfaat. . .!
0 komentar
Posting Komentar