ngode.in: Google map API

Event,get Latitude Longitude, & Geocode (Google Maps API Js V3)

7:43 AM

Event Google Maps

Dalam tutorial pada source code javascript di bawah ini akan dijelaskan bagaimana memberikan event dan melakukan geocode pada google maps javascript v3. .
pada contoh di bawah menggunakan event click, adapun event lain yang disediakan oleh google maps adalah

'click'
'dblclick'
'mouseup'
'mousedown'
'mouseover'
'mouseout'

pada tutorial dibawah event yang ada adalah mengambil nilai latitude dan longitude, setelah itu dengan latlng yang telah didapatkan mengubah posisi tengah pada peta, latlng yang didapatkan juga di ubah menjadi string alamat menggunakan reverse geocoding. .

berikut screenshot hasil source code diatas. .

var geocoder = new google.maps.Geocoder();
    function initialize() {
        //deklarasi posisi awal default pada peta
        var posisi = new google.maps.LatLng(-7.813215,110.236273);
        var map = new google.maps.Map(document.getElementById('map_canvas'), {
            center: posisi,
            zoom: 5,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        //event listener click pada peta
        google.maps.event.addListener(map,'click',function(e){
            //mengambil latitude dan longitude tempat yang di click
            posisi=e.latLng;
            //merubah posisi center peta
            map.setCenter(posisi);
            //memanggil fungsi geocode
            geocode(posisi);
        });

    }
    function geocode(posisi){
        //melakukan reverse geocode dari posisi yang telah di click
        geocoder.geocode({'latLng': posisi},function(results, status){
            if(status==google.maps.GeocoderStatus.OK){
                if(results[1]){
                    var alamat=results[1].formatted_address;
                    //menampilkan alert
                    alert("anda menng-click "+posisi+" : "+alamat);
                }
            }
        });
    }

sumber : (google maps js v3)

GIS

Menggunakan SQL di Google Maps Javascript

2:47 AM

Integrasi SQL dengan Google Maps

Kali ini akan ditunjukkan cara untuk menampilkan marker menggunakan database dari MySQL. Langkah langkah dibawah ini hanyalah tutorial singkat yang saya ambil dan modifikasi dari developers.google.com

untuk menampilkan marker yang berasal dari SQL, tentu saja pertama kita harus membuat koneksi ke SQL kita menggunakan bahasa php yang ada. Untuk mengkoneksikan kita buat file php dengan isi sebagai berikut dan simpan dengan nama phpsqlajax_dbinfo.php

<?php
$username="username anda";
$password="password anda";
$database="nama database yang ingin anda pakai";
?>

setelah itu kita buat file php untuk mengubah database sql kita menjadi bentuk XML yang dapat dimengerti oleh google map javascript v3 API, sebenarnya ada 3 cara untuk mengubah sql menjadi bentuk xml tetapi kali ini yang akan saya jelaskan adalah cara yang bisa dilakukan jika kita menggunakan PHP 5. Buat dan simpan file berikut dengan nama phpsqlajax_genxml.php

<?php  
require("phpsqlajax_dbinfo.php"); 
// Start XML file, create parent node

$dom = new DOMDocument("1.0");
$node = $dom->createElement("markers");
$parnode = $dom->appendChild($node); 
// Opens a connection to a MySQL server

$connection=mysql_connect (localhost, $username, $password);
if (!$connection) {  die('Not connected : ' . mysql_error());} 
// Set the active MySQL database

$db_selected = mysql_select_db($database, $connection);
if (!$db_selected) {
  die ('Can\'t use db : ' . mysql_error());
} 
// Select all the rows in the markers table

$query = "SELECT * FROM markers WHERE 1";
$result = mysql_query($query);
if (!$result) {  
  die('Invalid query: ' . mysql_error());
} 

header("Content-type: text/xml"); 
// Iterate through the rows, adding XML nodes for each
while ($row = @mysql_fetch_assoc($result)){  
  // ADD TO XML DOCUMENT NODE  
  $node = $dom->createElement("marker");  
  $newnode = $parnode->appendChild($node);   
  $newnode->setAttribute("name",$row['name']);
  $newnode->setAttribute("address", $row['address']);  
  $newnode->setAttribute("lat", $row['lat']);  
  $newnode->setAttribute("lng", $row['lng']);  
  $newnode->setAttribute("type", $row['type']);
} 

echo $dom->saveXML();
?>

dari script diatas diasumsikan bahwa anda telah membuat database sql dengan tabel marker dan kolom sebagai berikut: name, address, lat, lng, type. Perlu diperhatikan kolom lat dan lng adalah hal yang penting karena tanpa data lat, lng atau koordinat dari marker maka marker yang diinginkan tidak akan tampil di google maps.
Script diatas melakukan iterasi untuk melakukan pengubahan ke dalam bentuk XML. Untuk mengecek apakah file xml kita sukses dibuat dapat langsung dilihat melalui browser dari file phpsqlajax_genxml.php(dapat dilakukan dengan local webserver).

Untuk menampilkan data yang sudah dalam bentuk xml tadi bersamaan dengan google map sebenarnya caranya cukuplah sederhana. Untuk contoh dibawah hanyalah file javascript nya saja, jadi anda harus membuat sendiri file HTML yang menampilkan javascript dibawah ini, untuk tutorial menampilkannya dapat dilihat dalam http://sleepingtux.blogspot.com/2012/11/hello-world-google-map-api.html
Berikut javascript untuk menggabungkan map dan xml yang telah ada.

    function initialize() {
        var myposition=new google.maps.LatLng(-6.231518,106.866674)
        var mapOptions = {
          center: myposition,
          zoom: 16,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);
        downloadUrl("phpsqlajax_genxml.php", function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          var name = markers[i].getAttribute("name");
          var point=new google.maps.LatLng(markers[i].getAttribute("lat"),markers[i].getAttribute("lng"));
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            title: name,
            icon: 'link icon, bisa dihilangkan jika ingin default'
          });

        }
      });
      }
    function downloadUrl(url, callback) {
      var request = window.ActiveXObject ?
          new ActiveXObject('Microsoft.XMLHTTP') :
          new XMLHttpRequest;

      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          request.onreadystatechange = doNothing;
          callback(request, request.status);
        }
      };

      request.open('GET', url, true);
      request.send(null);
        }

    function doNothing() {}

Selamat mencoba ^_^v , GBU

GIS

Hello World Google Map API

1:26 AM

Dalam tutorial ini akan ditunjukkan cara dasar untuk menampilkan sebuah peta menggunakan Googlemap API.

Langkah pertama untuk memulainya tentu saja kita harus mempunyai akses key ke API google map, cara untuk memperolehnya adalah sebagai berikut:

Visit the APIs Console at https://code.google.com/apis/console and log in with your Google Account.
Click the Services link from the left-hand menu.
Activate the Google Maps API v3 service.
Click the API Access link from the left-hand menu. Your API key is available from the API Access page, in the Simple API Access section. Maps API applications use the Key for browser apps.

The Real Hello World. .

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
    </script>
    <script type="text/javascript">
      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(-6.224521,106.840553),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);
      }
    </script>
  </head>
  <body onload="initialize()">
    <div id="map_canvas" style="width:100%; height:100%"></div>
  </body>
</html>

Simpan kode Hello world di atas di dalam browser, misal map-simple.html
Untuk melihat hasilnya kita tinggal membuka browser kesayangan kita

Berikut beberapa keterangan dari kode diatas

center: new google.maps.LatLng(-6.224521,106.840553)

angka pada kode diatas menunjukkan posisi default dari map yang kita load.

zoom: 8

kode di atas menunjukkan zoom level dari peta, nilai paling kecil dari zoom adalah 0 , semakin besar zoom level yang kita load, maka semakin detail pula informasi yang kita dapat dari sebuah daerah, dan sebaliknya. Jika kita menggunakan zoom level 0 maka yang terlihat adalah peta dari bumi ini.

mapTypeId: google.maps.MapTypeId.ROADMAP

kode diatas menunjukkan default jenis peta yang ditampilkan

MapTypeId.ROADMAP menampilkan road map view sebagai default
MapTypeId.SATELLITE menampilkan Google Earth satelite images
MapTypeId.HYBRID menampilkan gabungan dari normal dan satelite view
MapTypeId.TERRAIN menampilkan peta beserta terrain information
setTilt menampilkan 45 degree imagery

Tutorial di atas diambil dari dokumentasi Google Map API google. .

Hasil :

Event,get Latitude Longitude, & Geocode (Google Maps API Js V3)

Event Google Maps

Menggunakan SQL di Google Maps Javascript

Integrasi SQL dengan Google Maps

Hello World Google Map API

Follow Us

Labels

Popular Posts

recent posts

Recent Comments

Blog Archive

adsense ngode.in

Instagram