shad0w-share

Marker pada Google Map sanga dibutuhkan untuk menunjukan lokasi yang kita inginkan. Berkut sedikit

Tutorial untuk menambahkan marker pada Google Map dengan PHP .

Pertama-tama kita harus sign up ke google untuk mendapatkan Google API Key, atau bisa dibaca tutorial di artikel "Mendapatkan Google API Key"


Setelah kita mendapatkan Google API Map, berikut download GoogleMapAPIv3.php disini.

Berikut kode  php yang dimasukkan ke website:

<?php
require('GoogleMapAPIv3.php');
//contoh data
$data_array = array(
    array(
        "lat"=>"-7.80182", //bisa di dapat di GoogleMAP
        "lon"=>"110.350149", //bisa di dapat di GoogleMAP
        "address"=>"Wirobrajan",
        "title"=>"Daerah Wirobrajan, Yogyakarta",
        "desc"=>"Daerah Istimewa Yogyakarta"
    )'

);

$MAP_OBJECT = new GoogleMapAPI();
$MAP_OBJECT->_minify_js = isset($_REQUEST["min"])?FALSE:TRUE;
$MAP_OBJECT->disableSidebar();
$MAP_OBJECT->setAPIKey('--API KEY YANG DI DAPAT DARI GOOGLE');

$SIDEBAR_HTML = "";

//menambahkan marker ke Google MAP dan membuat Side Bar
$rec=0;
foreach($data_array as $location){
    //Menambahkan marker ke GoogleMAP.
    $marker_id = $MAP_OBJECT->addMarkerByCoords($location["lon"],$location["lat"], $location["title"], $location["desc"]);
    
    $opener_id = "opener_".$marker_id;

    $rec++;
    //Menambahkan Link ke sidebar agar bisa mengakses MAP sesuai id marker
    $MAP_OBJECT->addMarkerOpener($marker_id, $opener_id);
}
?>

Kode untuk CSS side bar :

 <style type="text/css">
 #map, #map_sidebar { float: left }
 .sidebar { list-style:none; margin:0 0 0 10px;padding:0;width: 200px; }
 .sidebar li { margin-bottom: 2px; }
 .sidebar p { background-color: #eee;margin:0; padding: 5px;cursor: pointer; }
 .sidebar p:hover { background-color: #ddd; }
 </style>

kemudian pemasangan di html : 

<div id="map">
  <?= $MAP_OBJECT->printOnLoad();?>
  <?= $MAP_OBJECT->printMap();?>
</div>

<div id="map_sidebar">
    <ul class="sidebar">
        <li id='opener_0'>
            <a href='#'>Wirobrajan, Yogyakarta</a>
        </li>
    </ul>
</div>

untuk mendapatkan "lon" (longitude) dan "lat" (latitude) , silahkan ke GoogleMAP. 

Contoh penerapan fungsi di atas bisa di lihat disini.

---