Menggambar Peta Menggunakan Google Maps API

Diposkan oleh dragon on Senin, 10 Oktober 2011

Pada situs sebuah perusahaan umumnya diberikan informasi singkat tentang lokasi atau alamat perusahaan tersebut. Dengan menggunakan Google Maps API, Anda dapat memberikan sentuhan dengan menggambarkan lokasi perusahaan.

Masih mengupas kemampuan Google Web API, kali ini kita akan bermain-main dengan menggunakan Google Maps. Seperti namanya, Google Maps akan memetakan jalan, rute atau lokasi tertentu dari suatu wilayah dan menampilkannya secara visual, lengkap dengan fasilitas zoom dan foto satelit.

Langkah-langkah untuk membuatnya adalah:

  1. Membuat header utama untuk kode HTML




    Google Map





  2. Berikutnya adalah meng-generate map dengan menggunakan JavaScript. Namun untuk inisialisasi data, kita dapat lakukan dengan menggunakan PHP.


    $KEY = "Google Key Here";
    $MAPS_HOST = "maps.google.com";
    $delay = 0;
    $base_url = "http://" . $MAPS_HOST .
    "/maps/geo?output=xml" . "&key=" . $KEY;
    $geocode_pending = true;
    $address = "Malang, Indonesia";

    $latlonArr = array();


  3. Setelah mendefinisikan area yang hendak dipetakan, perlu ditentukan lokasi garis bujur dan garis lintang. Lokasi garis bujur dan garis lintang inilah yang akan menjadi parameter bagi Google Maps untuk menggambarkan peta.

    while($geocode_pending)
    {
    $request_url = $base_url . "&q=" . urlencode($address);
    $xml = simplexml_load_file($request_url) or die("url not loading");
    $status = $xml->Response->Status->code;
    if (strcmp($status, "200") == 0) {
    // Successful geocode
    $geocode_pending = false;
    $coordinates = $xml->Response->Placemark->Point->coordinates;
    $coordinatesSplit = split(",", $coordinates);
    // Format: Longitude, Latitude, Altitude
    $lat = $coordinatesSplit[1];
    $lng = $coordinatesSplit[0];
    $latlonArr['lat'] = $lat;
    $latlonArr['lon'] = $lng;

    } else if (strcmp($status, "620") == 0) {
    // sent geocodes too fast
    $delay += 100000;
    } else {
    // failure to geocode
    $geocode_pending = false;
    }
    usleep($delay);
    break;
    }

  4. Lalu kita memanggil Google Maps API dengan cara menyimpan ke dalam suatu variabel.

    //plot map
    $str = '\n";
    ?>

  5. Proses penggambaran peta adalah sebagai berikut:


    // plot the map with default marker icon
    echo $str;
    ?>




  6. Berikut adalah contoh tampilan yang didapatkan:


{ 0 komentar... read them below or add one }

Poskan Komentar