Image by Telendro via Flickr

Setup API Key

In order to be able to utilize Google Map API for our web application, we need to get the API Key. It can be obtained for free from Google website. This Key will be valid for one URL only, so each time we move the application to another server, we need to obtain a new key for that server URL.

The Key can be obtained from this URL:

http://www.google.com/apis/maps/signup.html

Then, a page similar to the following will appear:

Next, to get a key for your URL:

• Enter your URL website, the URL your web application using Google Map API will reside, at the My web site URL column, for example http://localhost/gmaptest. Note: You need to get an API key for each URL for your application.
• Click the Generate API Key button. Save the key which will be in the form berupa XXX encrypted character. This Key will be used at the initialization step of the Google Map at your application which will be valid for the URL you register.

Start Creating Application with Google Map

Create a new HTML file, say test-01.html. Type the following code on that file:

The above code was actually just a standard HTML code with Javascript.

All function that is needed to access and manipulate Google Map is stored online at Google server and can only be retrieved when we already have the key for the URL where the file is located. This is done at line 6. You need to modify the key=abc code, change abc to be you key obtained at the registration step at Google Map. If the key is not correct the the access to the Google Map functions will failed.

There is a Javascript function called load() which will be invoked at the time the HTML page was completely downloaded by the browser.

This load() function is used to initialize the Google Map:

• At line 15, checking whether the browser can display Google Map or not. If it does then contunui to the next initialization process. The Function GbrowserIsCompatible() is used for this purpose, and is a part of the Google Map API.
• At line 17, we define an object variable called map which will represent the Google Map class, the GMap2(). This Object was initialized to use a DIV element that later will contain the map provided by Google Map. This is done with the parameter used at the javascript function document.getElementById(“map”). That means that we should have a DIV element called map later.

At line 18 setCenter() method of the map object variable is invoked. This Method is used to determine the center point for the map display. It’s parameter are the coordinate of the center point and the zoom level. The center point coordinate was previously defined using the GLatLon() object that have two parameter latitude and longitude of the coordinate. The zoom level is an integer value that determine how deep the zoom level is for the map display. In this case we use level 12.

At line 25 we can see the definition of the HTML BODY tag that will call the javascript function load() that has already defined before.

At line 26 there is the definition of HTML DIV tag called map which will be used by the Google Map object to display the map. We can modify the size by changing the width and height of the style attribute. The most important thing here is that the id attribute must be the same as the one called at the initialization of the  Google Map object at line 17 above.

When everything was correct, then you will see something like this when the above file is opened in a browser window.

Centering a map at a coordinate

To move the center point of the Google Map we can call the method setCenter(). The parameter for the method are the new coordinate we want as the new center point and the new zoom level.

The center point coordinate must be an object of type GLatLng that can be created easily using the GLatLng() object. As in the previous example, the parameter for this GLatLng() object are the coordinate in lattitude and longitude. The return value of this object can be stored in a variable of type GLatLng. The Object variable of this type can be used directly as the parameter for the setCenter() method.

The next parameter of setCenter() method is the integer value of zoom level . This parameter determined how deep the map will be displayed. The bigger the value the the deeper the map will be displayed. This value starts from 0 (display the earth) to 19 (detailed road map level).

For example:
[js]
var point = new GLatLng(-6.8790, 107.63520);
map = new GMap2(document.getElementById(“map”));
map.setCenter(point, 12);
[/js]

Adding Marker

Marker is a symbol or icon that can be placed on top of Google Map. An external image file or a deafult icon provided by Google Map can be used for the icon.

To put a marker on top of Google Map, we need to create an object variable of type GMarker.

The Parameter for that GMarker() function was the coordinate where the marker will be plotted. This Parameter must be in type of GLatLng that can be created by GLatLng() as we have done before.

After the Marker object was successfully created, the the object is used as a parameter of the map Google Map addOverlay() method. This Method will show a marker icon at the coordinate specified.

As an example, create a new file called test-02.html like the following.

When everything was correct, then you will see something like this when the above file is opened in a browser window.

Adding Marker with Information Box

A Marker can be displayed with an information box that usually contains the detailed information about the marker. This can be done by calling the openInfoWindowHtml() method of the map object when defined.

The Paremeter for this method is the description to be displayed at the box in HTML code.

As an example, create a new file called test-03.html like the following.

When everything was correct, then you will see something like this when the above file is opened in a browser window.

Memilih Jenis Map

Google Map has several type of map defined by calling the setMapType() method:

• G_NORMAL_MAP This map type (which is the default) displays a normal street map.
• G_SATELLITE_MAP This map type displays satellite images. All places in this earth has been captured by satellite and can be accessed through Google Map. But several places are still in low resolution while other places are already in high resolution.
• G_HYBRID_MAP This map type displays a transparent layer of major streets on satellite images.
• G_DEFAULT_MAP_TYPES An array of the first three predefined map types described above (G_NORMAL_MAP, G_SATELLITE_MAP, and G_HYBRID_MAP).
• G_PHYSICAL_MAP This map type displays maps with physical features such as terrain and vegetation. This map type is not displayed within map type controls by default.

One thing that we must consider is that the calling of thus method must be done after the calling of setCenter() or zoom() method.

As an examlpe, create a new file calles test-05.html with the following source code.

We can change the line 19 change it to the type of  G_NORMAL_MAP,  G_SATELITTE_TYPE_MAP or G_HYBRID_MAP. For the type of  G_NORMAL_MAP, for some places if we zoom too deep we will not see any information. This is because Google Map still does not have the requested map for that area.

Below is an example of map with hybrid type.

Adding Markers from Data

Marker can be added to Google Map dinamically from a data source, for example in case we have a data file containing coordinate of markers to be displayed on top of Google Map.

For that purpose we need to call the GDownloadUrl() function used to download the data from an URL of a file containing XML data. The XML data received will be parsed by Google Map GXml object. This Object has a method parse() that can be used to do the XML data parsing.

After the parsing, we will get the XML data ready to be processed further.

For example, create a new file called test-06.html with the following source code.

At line 21, we run GDownloadUrl() function. This function has two parameter, the URL of the file to be downloaded, in this case data.xml and the function to handle the data and the responseCode received after downloading the data. Both of the data are already defined and can be consumed as the parameter of that handler function so they can be processed inside the function.

At line 22 we call the parse() method of the GXml object. The result of the parsing of the XML is stored in the xml variable which is an object that has an XML data structure and is ready to be read by other process. This process is, for example, easily searching for a key and value of an element.

At line 23, we read an XML element called marker. This Element must be exists on the XML data downloaded before, which was the data.xml. The result of the reading is stored on an array called markers. This is a simple javascript array in which the elements can be easily counted with the length property, or accessed by index, for example to access the first element we will use the notation markers[0].

At line 24, we do a loop beginning from 0 to the size of the element of markers array. For each iteration of the loop, we create an object called point of type  GLatLng with the coordinate of lattitude and longitude taken from the XML data. That information is obtained from markers array element by calling the getAttribute() method. The Attribute we read for each element are lat and lng attribut. The parseFloat() function us used to convert string data to float data needed to create an object of type GLatLng.

At line 28, after the point object is created, then it is used as a parameter for creating a new object of GMarker. This GMarker object is then used as a parameter for addOverlay() method of the Google Map’s map object. This will cause Google Map displays a new marker at the coordinate specified by point object.

After the iteration is done (the size of the markers array elements count), the at line 30 we call setCenter() method of map object to set the center point of out Google Map display.

Below is the example of the above data.xml used for the process:

When everything was correct, then you will see something like this when the above file is opened in a browser window.

Moving the Markers

Sometimes we need to move the position of an existing marker. By the time of this writing, Google Map does not provide this facility yet for example marker.move() or map.moveMarker().

For this purpose, we need to do the following step:

1. deleting all existing markers by using clearOverlays() method of Google Map map object.
2. creating new markers that replace the previously deleted markers so we will get an effect of markers movement from one coordinate to another

Below is an example source code of markers movement.

We have discussed the basics of programming web application using Google Map API. See you on the next article about creating GPS tracking application using Google Map API.

Refferences:

• Google Map API Documentation: http://code.google.com/apis/maps/documentation/introduction.html
• Google Map API Playground: http://code.google.com/apis/ajax/playground

Akhmad Daniel Sembiring

vITraining.com – Qualified IT Products, Outsourcing, and Services

Ligarwangi.com – Linux, E-book, Coffee, Gift, etc

In the previous article we have discussed the global architecture of the GPS Tracking system which consists of the Tracking Device and Monitoring Application. In this article we will discuss about the GPS Tracking Application Monitoring.

Introduction

The monitoring application will display a Marker on the map view provided by Google Map. This Marker represents the last position of the GPS Tracking Device. Marker coordinate data is taken from a table on a database which contains last GPS position data and is constantly updated by the GPS Tracking Device so that the information obtained is always the up to date position.

The monitoring application consists of several parts that can be described as follows.

Next let us study in detail the functional part of each Monitoring Application.

User Interface Design

Here is a display of user interface design for the monitoring application that we are going to build.

The user interface is very simple, consisting only of the Google Map object, the list box that contains the code of the moving objects that will be observed, and one button to zoom the map that will move the position of Google Map with a center point, that is the coordinates of the selected objects selected in the list box. Besides that, we will also see the information box that contains the detail information about the selected moving objects such as code, coordinates, time, and so forth.

Google Map Object initialization

Note the program source code below, which is a fragment of the file viewer.php.

On the line 10-13 variable initialization is done:

1. map : the Google Map object variables
2. timeOut: timer variable
3. markers : an array that holds all the Marker on the map
4. htmls : an array that holds all the HTML data for the information box of all existing Marker on the map

On the line 15-28 defined load () function, which is first called when the HTML document is downloaded by the user. The following is done here:

1. at line 19: make a Google Map object and store it in the variable map
2. at line 20: make the map object reacts to a button on the mouse wheel, that is if the button on the mouse wheel will cause the map to play in the zoom in and out. This is done by calling enableScrollWheelZoom() method
3. at line 21: added a map of the area control can be used to replace, men-in and zoom out the map. This is done by calling addControl () method with the parameter object GSmallMapControl.
4. On line 22: added a control area that can be used to select the type of map if the road map, satellite images, or both. This is done by calling addControl() method with the parameter object GMapTypeControl.
5. at line 23: we make a determination of the center map setCenter() method and select the type of map of the combined map and satellite map of the road (hybrid) with the method setMapType().
6. after the initialization is done, we call the function refreshMarkers() to display the Marker which is the correct representation of the moving objects that we want to monitor.

Displaying Marker from database

This is done by two functions: refreshMarkers() and createMarker(). Note the source code below, which also is part of the file viewer.php.

The above source code displays refreshMarkers() function that will be called by the load() function as noted before.

The first thing that will be done each time the function is called is to turn off the timer if it’s already defined on timeOut variable. Look at line 3.

Next on line 5 the function GDownloadUrl() is called. The invoked URL is the lastpos.xml.php file that is the file which will output a data in the form of XML that contains coordinates information for the markers which represents the moving object to be observed. This is a simple example of the lastpos.xml.php:

After downloading the data, this function will execute a function defined at it’s second parameter by giving it’s input parameter as the data obtained from the download and the responseCode (from the server).

This function the handle the data downloaded as shown from the line 6. First, it will show an information on the status bar about the response code to make it easy for debugging, especially if the download process from the URL was failed, which is the responseCode was not 200.

If the download was failed, the program is simply exits and wait for the next timer event, as seen on the line 7-10.

At line 12-15 we destroy all existing markers stored on the array variable markers. This is done by invoking removeOverlays() method of the map object for the markers with index i, where i begins from 0 until the size of the array element ot markers, the markers.length.

At line 17 we do the parsing of the XML data resulted from the download into a variable of type XML data called xml, which is done by parse() mehtod of the Gxml object.

After successfully parsed, the data in the object variable xml can be read to get any data element on it. For example at line 18, we read the element named “marker”, which is done by invoking getElementsByTagName(”marker”) method of the documentElement object contained in the xml object. The data element of the XML is then stored on JavaScript array variable called xmarkers.

After successfully read the element then we can do a looping through all xmarkers array elements to get the attributes of the XML. This is done at line 19 – 25, which are setting up a variable i that begins from 0 until the size of array xmarkers, that is xmarkers.length.

At every loop, we read the attribute “label” that exists on every XML element data. We do this by calling getAttribute(”label”) method on xmarkers object with index i. This Attribute is then stored on variable called “label”.

Next, at line 21-23 we also get the “lat” and “lon” attribute from every XML element data . But this time, the attribute is to be converted from string into float with the parseFloat() function, and is used as a parameter for creating a new object with type of GLatLng() and stored on a variable “point”.

At line 24, the “point” variable is used as a parameter for createMarker() function which is to be explained later. The Function createMarker() results a data with GMarker type which can be used to display a marker on the Google Map by calling addOverlay() method.

At line 28 we can see:

This is a JavaScript command that define a timer which will execute the function refreshMarkers() every period of time, i.e 5000 ms.

The command itself is executed inside the body of refreshMarkers() function that will cause an infinite loop of timer events.

Next, this is the complete definition of createMarker() function which will be used to create a new object with type of GMarker and a parameter.

The createMarker() function will be called by refreshMarkers() function as described before. This function can then be modified to result an object marker with a custom icon and not a standard icon from Google Map.

At line 1 is the definition of createMarker() function that have point parameter that represents the coordinate information on where the marker will be plotted on the map, an index that represents the index of the marker, and a label that will be displayed on the information box for that marker.

At line 2 we create a variable marker of type GMarker() object at the coordinate defined by point variable.

At line 3 we define a variable html that contains “<pre>” and the label variable taken from the function parameter and end it with “</pre>”.

At line 4 we register a new event with the help of Gevent.addListener for the marker object on “click” event. What will be done when the object marker receive a mouse click is to invoke the function that contains the command marker.openInfoWindowHtml(). This will result: when the marker is clicked then an information box will appear with the marker information on it.

At line 5-6 we store the new marker on the JavaScript array markers[] and the labels for the informatin box on the JavaScript array htmls[]. Both variable will be used when the user interface need to select one of the markers exists on the Google Map.

At line 13 the function returns the result which is the object marker with type of GMarker recently created before.

List of Objects monitored

As on the specification, we need a list box that lists the moving objects to be monitored. We can choose one object from the list and click Zoom To to display the object on the map by moving Google Map to the object’s coordinate.

Below is the source code to creating the list box which read the data from lastpos table.

Note on the PHP code to read the data and display them into a list box. At line 5 we define an SQL command to be sent to MySQL to result a data that consists of 2 fields:

1. the one that contained the concatenation of field unit_id, lat, and lon separated by pipe character “|”, which in here we use MySQL function CONCAT(). This field will be used as an identification of the item to be selected from list box as the “value” for that list box
2. field unit_id, to be used as the label for the list box

At line 7-11 there are a PHP commands to generated all query result from the SQL command to create a HTML syntax to display a list box as specified.

At line 15-17 there are HTML syntax to display a “Zoom To” button that will execute JavaScript zoomTo() function when clicked, with a parameter index of the item chosen from the list box, and the value of that item. The value of that item is the concatenation of unit_id, lat, and lon separated by pipe character “|”.

Below is the zoomTo() function needed above:

Note at line 5, we define the zoomTo() function. The function is to be called when the “Zoom To” button is clicked that will make Google Map to have a center point to be the same as the coordinate of the object selected from the list box and the do the zoom at a certain level.

At line 7-10 we do the checking of whether the parameter variable unit_id is not empty, which means that whether a user has chosen one of the item from the list box before. If not, then just exits from the function.

At line 12-13 we define an array variable temp to store the data from the separation of the variable unit_id with pipe character “|”. The results are the temp variable which has 3 element: unit_id, latitude, and longitude.

At line 14, we create an object variable p of type GLatLng() with parameter temp[1] and temp[2] which are lat and lon defined and converted info float by parseFloat() function before.

At line 15 we set the center point for Google Map to be the coordinate of the p variable which is the same as the cooirdinate of the item chosen at zoom level 13. The result is the map will move and show the marker right at the center.

At line 18 we call the function myClick() with the parameter index which is the variable of the zoomTo() parameter. This is the index of the list box item chosen by user.

Function myClick() is used to show the information box of a marker by calling openInfoWindowHtml() method of the marker. If we remember at the createMarker() function, we have assigned array variable markers[] and htmls[] with marker objects and the label for each markers.

On this myClick() function, that array is used again using the index taken from the list box index. One thing to be noted is that the index of the array markers[] and htmls[] must refer to the same index with the one at the list box, which in this case when we define the SQL command to read the data from lastpos tabel before.

The Completed File viewer.php

Below is the source code of the file viewer.php as described above.

Preview of the Application

Below is the preview of the GPS Tracking Monitoring Application:

On the next article we will discuss the J2ME application to be run on the Nokia N95 hand phone so that it can send it’s GPS position data to our GPS tracking server.

Related Article:

• Membuat Sistem GPS Tracking
• Membuat Aplikasi dengan Google Map API
• Menguasai Structured Query Language (SQL)

Akhmad Daniel Sembiring

vITraining.com – Qualified IT Products, Outsourcing, and Services

Ligarwangi.com – Linux, E-book, Coffee, Gift, etc

Pada artikel sebelumnya telah dijelaskan bagaimana arsitektur global sistem GPS Tracking yang terdiri dari Tracking Device dan Aplikasi Pemantau. Pada artikel ini dibahas mengenai Aplikasi Pemantau GPS Tracking.

Pendahuluan

Aplikasi pemantau akan menampilkan Marker di atas tampilan peta Google Map. Marker ini merepresentasikan posisi GPS Tracking Device terakhir. Data koordinat untuk Marker diambil dari tabel lastpos yang isinya senantiasa di-update oleh GPS Tracking Device sehingga selalu didapatkan informasi posisi yang up to date.

Aplikasi pemantau terdiri dari beberapa bagian yang dapat digambarkan sebagai berikut.

Selanjutnya mari kita bahas secara detail fungsional masing-masing bagian aplikasi pemantauan.

Desain Tampilan User Interface

Berikut ini adalah desain tampilan user interface aplikasi pemantauan yang akan kita bangun.

User interface nya sendiri sangat sederhana, hanya terdiri dari object Google Map, list box yang berisi kode benda bergerak yang akan dipantau, dan satu tombol Zoom To yang akan memindahkan posisi peta Google Map dengan titik tengah adalah koordinat benda bergerak yang dipilih pada list box. Selain ini, kita juga akan melihat kotak informasi yang berisi infromasi detail tentang benda bergerak yang dipilih seperti kode, koordinat, waktu dan sebagainya.

Inisialisasi Google Map Object

Perhatikan baris-baris kode program di bawah ini, yang merupakan penggalan dari file viewer.php.

Pada baris 10-13 dilakukan inisialisasi variabel masing-masing:

1. map : variabel object Google Map
2. timeOut: variabel timer
3. markers : array yang menampung semua marker yang ada pada peta
4. htmls : array yang menampung semua data HTML untuk kotak informasi semua marker yang ada pada peta

Pada baris 15-28 didefinisikan function load() yang merupakan function yang pertama kali dipanggil ketika dokumen HTML di-download oleh user. Hal yang dilakukan disini adalah

1. Pada baris 19: membuat object Google Map dan menyimpannya pada variabel map
2. pada baris 20: menjadikan object map bereaksi terhadap wheel button pada mouse, yaitu jika tombol wheel pada mouse diputar akan menyebabkan peta di zoom out dan in. Ini dilakukan dengan memanggil method enableScrollWheelZoom()
3. pada baris 21: ditambahkan area kontrol peta yang dapat digunakan untuk menggeser, men-zoom in dan out peta. Ini dilakukan dengan memanggil method addControl() dengan parameter object GSmallMapControl.
4. Pada baris 22: ditambahkan area kontrol yang dapat digunakan untuk memilih jenis peta apakah peta jalan, foto satelit, atau keduanya. Ini dilakukan dengan memanggil method addControl() dengan parameter object GMapTypeControl.
5. Pada barus 23: kita melakukan penentuan titik pusat peta dengan method setCenter() dan memilih jenis peta gabungan peta satelit dan peta jalan (hybrid) dengan method setMapType().
6. Setelah inisialisasi dilakukan, kita memanggil function refreshMarkers() untuk segera menampilkan marker yang merupakan representasi dari benda bergerak yang hendak kita pantau.

Menampilkan Marker dari data

Hal ini dilakukan melalui dua function refreshMarkers() dan createMarker(). Perhatikan baris-baris kode dibawah ini, yang juga merupakan bagian dari file viewer.php.

Baris kode di atas menampilkan function refreshMarkers() yang dipanggil oleh function load() seperti sebelumnya.

Hal pertama yang dilakukan setiap kali function ini dipanggil adalah mematikan timer jika sudah pernah didefinisikan pada variabel timeOut. Ini terlihat pada baris 3.

Selanjutnya pada baris 5 dilakukan pemanggilan function GDownloadUrl(). URL yang dipanggil adalah file lastpos.xml.php yaitu file yang akan mengeluarkan data dalam bentuk XML yang berisi informasi koordinat marker atau benda bergerak yang akan dipantau. Ini contoh sederhana file tersebut:

Setelah selesai download function ini akan mengeksekusi function yang didedinisikan pada parameternya yang kedua dengan memberikan input berupa data yang diperoleh dari download dan responseCode (kode response dari server).

Hal yang dilakukan oleh function yang menhandle data yang berhasil didownload terlihat mulai dari baris 6. Hal pertama yang dilakukan adalah menampilkan status bar sehingga berisi informasi kode response untuk memudahkan kita melakukan debugging, terutama jika proses download dari URL yang ditentukan gagal alias responseCode buka angka 200.

Jika download gagal, maka langsung keluar dari function ini dan menunggu timer event berikutnya. Ini dilakukan pada baris 7-10.

Baris 12-15 melakukan penghapusan terhadap semua marker yang sebelumnya telah disimpan pada variabel array markers. Ini dilakukan dengan menjalankan method removeOverlays() dari object map terhadap markers dengan index i, dimana i dimulai dari 0 sampai dengan banyaknya jumlah elemen array markers, yaitu markers.length.

Pada baris 17 dilakukan parsing data XML hasil download menjadi variabel xml yang berjenis data XML, yang dilakukan oleh function mehtod parse() dari object Gxml.

Setelah berhasil diparsing, object variabel xml dapat dibaca datanya, salah satunya untuk mengambil suatu elemen data tertentu. Misalnya pada baris 18, kita mengambil elemen dengan nama “marker”, dilakukan dengan function menthod getElementsByTagName(“marker”) yang terdapat pada object documentElement yang terkandung didalam object xml. Elemen-elemen data XML ini kemudian disimpan dalam variabel array JavaScript yang bernama xmarkers.

Setelah diperoleh elemen yang dimaksud maka dapat dilakukan perulangan terhadap semua isi array xmarkers untuk mengambil atribut yang terdapat pada data XML yang diwakilinya. Ini dilakukan mulai dari baris 19 – 25, yaitu men-setup variabel i yang dimulai dari 0 sampai dengan banyaknya elemen array xmarkers, yaitu xmarkers.length.

Hal yang dilakukan pada setiap perulangan adalah mengambil atribut “label” yang terdapat pada setiap elemen data XML. Caranya adalah dengan memanggil method getAttribute(“label”) pada object xmarkers dengan index i. Atribut ini disimpan pada variabel label.

Selanjutnya pada baris 21-23 diambil juga atribut “lat” dan “lon” dari setiap elemen data XML. Namun atribut ini langsung dikonversi dari string menjadi data dengan tipe float oleh function parseFloat(), dan dijadikan parameter untuk pembuatan object baru dengan tipe GLatLng() yang disimpan pada variabel point.

Pada baris 24, variabel point tersebut digunakan sebagai parameter untuk function createMarker() yang akan dijelaskan selanjutnya. Function createMarker() ini mengeluarkan data dengan jenis GMarker sehingga dapat langsung dipakai untuk menampilkan marker pada Google Map yaitu dengan memanggil method addOverlay().

Perhatikan baris 28 pada kode di atas.

Ini adalah perintah JavaScript untuk mendefinisikan timer yang akan mengeksekusi perintah tertentu setiap periode waktu tertentu. Dalam hal ini ia akan mengeksekusi refreshMarkers() setiap 5000 ms alias 5 detik.

Perintah ini sendiri dijalankan di dalam function refreshMarkers() sehingga akan didapatkan suatu perulangan yang terjadi terus menerus.

Selanjutnya, ini adalah definisi function createMarker() yang digunakan untuk membuat object baru dengan tipe GMarker dan dengan paramter tertentu.

Baris kode di atas menampilkan function createMarker() yang akan dipanggil oleh function refreshMarkers() seperti yang telah dijelaskan sebelumnya. Function ini akan menghasilkan object marker dengan icon yang bukan berupa icon standard Google Map melainkan icon yang kita definisikan sendiri.

Pada baris 1 terdapat definisi function createMarker() yang memiliki parameter point berupa informasi koordinat dimana marker akan ditampilkan, index berupa informasi marker ini adalah yang keberapa, dan label yang akan ditampilkan pada kotak informasi untuk marker tersebut.

Pada baris 2, kita membuat variabel icon yang merupakan variable dari object GIcon, yaitu object Google Map API yang digunakan untuk menampilkan icon.

Pada baris 3, kita menentukan gambar yang akan digunakan pada icon. Pada baris 4, kita menentukan ukuran icon tersebut yaitu dengan menggunakan object GSize(). Pada baris 5 kita menentukan titik anchor icon yaitu dengan menggunakan object GPoint(). Pada baris 5, kita menentukan titik koordinat bagi kota informasi untuk marker dengan menggunakan object GPoint().

Kemudian pada baris 7 kita membuat variabel marker yang merupakan object GMarker() pada koordinat yang ditentukan oleh variabel point dengan menggunakan icon yang ditentukan oleh variabel icon.

Kemudian pada baris 8 kita mendefinisikan variabel html yang merupakan kombinasi “<pre>” dan variabel label yang diambil dari parameter function dan diakhiri lagi dengan “</pre>”.

Pada baris 9 kita mendaftarkan event baru dengan bantuan object Gevent.addListener untuk object marker pada event “click”. Hal yang dilakukan ketika object marker menerima mouse click adalah menjalankan function yang berisi perintah marker.openInfoWindowHtml(). Akibatnya ketika marker tersebut di-click maka akan muncul kotak informasi yang bersesuaian untuk marker tersebut.

Akhirnya kita pada baris 11-12 menyimpan marker yang baru terbuat tersebut pada variabel array JavaScript markers[] dan label untuk kotak informasinya pada variabel array JavaScript htmls[]. Kedua variabel ini kita perlukan pada saat user interface hendak memilih satu dari sekian banyak marker yang ada di atas peta Google Map.

Pada baris 13 function mengeluarkan hasil yaitu object marker yang bertipe GMarker yang baru saja dibuat di atas.

List pilihan object yang dipantau

Sesuai spesifikasi yang diinginkan, kita perlu membuat list box yang berisi daftar benda bergerak yang ingin kita pantau. Dari list ini dapat dipilih salah satu kemudian ketika kita klik tombol Zoom To maka tampilan peta Google Map akan mengarah ke koordinat dari benda bergerak tersebut.

Berikut adalah source code untuk membuat listbox yang mengambil data dari tabel lastpos.

Perhatikan baris-baris yang berhuruf tebal, yaitu kode-kode PHP untuk mengambil data dan menampilkannya menjadi listbox. Pada baris 5 kita mendefinisikan perintah SQL yang akan dikirimkan ke MySQL untuk menghasilkan data yang terdiri dari 2 kolom yaitu :

1. yang berisi data gabungan dari field unit_id, lat, dan lon yang disambung dengan karakter pipe “|”, disini kita menggunakan function MySQL CONCAT(). Kolom ini akan digunakan sebagai indentifikasi dari item yang dipilih pada list box yaitu sebagai “value” dari listbox tersebut
2. field unit_id, yang akan digunakan sebagai label dari listbox

Baris 7-11 adalah perintah PHP untuk mengeluarkan semua data hasil query dari SQL tersebut sehingga membentuk perintah HTML yang menampilkan listbox seperti spesifikasi.

Baris 15-17 adalah perintah HTML untuk menampilkan tombol “Zoom To” yang memiliki sifat ketika di-klik akan menjalankan function JavaScript zoomTo() dengan parameter index dari item yang dipilih pada listbox dan value dari item tersebut. Value dari item tersebut adalah gabungan dari unit_id, lat, dan lon yang dipisahkan oleh tanda pipe “|”.

Berikut ini adalah function zoomTo() yang diperlukan di atas.

Perhatikan pada baris 5, kita mendefinisikan function zoomTo(). Function ini akan dipanggil oleh tombol “Zoom To” yang akan mengakibatkan peta Google Map memiliki titik tengah sama dengan koordinat benda yang dipilih dan melakukan zoom pada level tertentu.

Pada baris 7-10 dilakukan pengecekan apakah variabel parameter unit_id ada isinya yaitu apakah sebelumnya user telah memilih salah satu item dari listbox. Jika belum maka langsung keluar dari function ini.

Pada baris 12-13 kita mendefinisikan variabel array temp untuk menampung data hasil pemisahan variabel unit_id dengan karakter pipe “|”. Hasilnya adalah variabel temp yang memiliki 3 elemen array yaitu unit_id, latitute, dan longitude.

Pada baris 14, kita membuat variabel object p yang berjenis GLatLng() dengan parameter temp[1] dan temp[2] yaitu lat dan lon yang sebelumnya telah di konversi menjadi tipe data float oleh function parseFloat().

Pada baris 15 kite menentukan titip pusat dari peta Google Map menjadi koordinat yang variabel p yang sama dengan koordinat item yang dipilih dengan level zoom 13. Akibatnya peta akan bergeser dan menampilkan marker tepat di tengah-tengah peta.

Pada baris 18 kita memanggil function myClick() dengan parameter index yaitu variabel yang diperoleh dari parameter function zoomTo(). Variabel ini adalah index dari item list box yang dipilih oleh user.

Function myClick() berguna untuk menampilkan kotak informasi pada suatu marker yaitu dengan memanggil method openInfoWindowHtml() pada marker tersebut. Kalau kita ingat pada function createMarker() kita telah mengisi variabel array markers[] dan htmls[] dengan object marker dan informasi label masing-masing marker.

Pada function myClick() ini array tersebut dipanggil lagi dengan menggunakan index yang diambil dari index listbox. Hal yang perlu diperhatikan adalah index dari array markers[] dan htmls[] harus mengacu ke index yang sama dengan yang ada pada listbox, yaitu pada saat mendefinisikan perintah SQL pada saat memanggil data dari tabel lastpos.

File viewer.php selengkapnya

Berikut ini adalah source code file viewer.php seperti yang telah dibahas di atas.

Preview Aplikasi

Berikut ini tampilan aplikasi Pemantau GPS Tracking:

Pada artikel selanjutnya kita akan membahas mengenai aplikasi J2ME yang ditanam di handphone Nokia N95 supaya dapat mengirimkan data posisi GPS nya ke server GPS tracking kita.

Artikel terkait:

• Membuat Sistem GPS Tracking
• Membuat Aplikasi dengan Google Map API
• Menguasai Structured Query Language (SQL)

Akhmad Daniel Sembiring

vITraining.com – Qualified IT Products, Outsourcing, and Services
Ligarwangi.com – Linux, E-book, Coffee, Gift, etc

Arsitektur sistem secara global

Sistem terdiri dari Tracking Devices yaitu alat yang secara periodik atau berdasarkan kondisi tertentu mengirimkan informasi posisinya pada saat itu. Informasi posisi diperoleh dari perhitungan data yang diterimanya dari satelit GPS yang senantiasa ada setiap saat. Pada seri artikel ini kita akan menggunakan handphone Nokia N95 yang telah dilengkapi dengan GPS receiver built in, dan membuat program J2ME sehingga hanphone dapat berfungsi sebagai GPS Tracking Device.

Sistem GPS Tracking secara global dapat digambarkan seperti di bawah.

Data posisi tersebut dikirimkan oleh N95 ke Server GPS Tracking melalui internet (disini kita menggunakan HTTP untuk mengirimkan data). Koneksi ke internet dilakukan melalui GPRS yang dimiliki oleh masing-masing operator GSM dan terhubung ke internet.

Di internet kita memiliki GPS Tracking Server yang diletakkan pada server hosting yang akan menampung data yang dikirimkan oleh Nokia N95 pada sebuah database (di sini kita menggunakan MySQL). Server tersebut kita lengkapi dengan aplikasi pemantau (di sini kita buat dengan PHP) sehingga dapat diakses oleh komputer pemantau melalui web browser.

Aplikasi di GPS tracking device

Pada Nokia 95 kita akan membuat aplikasi berbasis J2ME yang mengakses GPS Receiver yang telah ada secara built-in. Setelah informasi posisi didapat, maka data tersebut dikirimkan secara periodik melalui koneksi GPRS dengan protokol HTTP ke server GPS Tracking. Format URL untuk mengirimkan data melalui HTTP misalnya:

http://namaserver/up.php?unit=1&lat=-6.100&lon=107.2900

Struktur URL tersebut terdiri dari beberapa bagian dan dapat dijelaskan sebagai berikut:

Prinsip kerja aplikasi J2ME sendiri kita sederhanakan sebagai berikut:

1. Inisialisasi data
2. Baca data dari GPS dan tunggu sampai data posisi GPS sudah didapatkan
3. Jika data GPS sudah didapat dan perioda pengiriman data (misal setiap 1 menit) sudah dicapai maka buka koneksi GPRS dan kirimkan data melalui HTTP dengan format URL seperti di atas
4. Ulangi langkah ke 2, demikian seterusnya, proses ini dilakukan setiap 1 detik sekali.

Implementasi looping di atas akan dilakukan dengan fasilitas Timer yang sudah terdapat pada J2ME.

Flow chart aplikasi GPS Tracking Device dapat digambarkan sebagai berikut:

Aplikasi pemantau

Aplikasi pemantau diimplementasikan dengan web based application, yaitu aplikasi disimpan pada web server yang berfungsi sebagai GPS Tracking Server. Komputer pemantau akan melakukan koneksi ke alamat web server untuk dapat mematau posisi benda bergerak yang dimilikinya.

Aplikasi pemantau yang kita bangun menggunakan tampilan peta digital yang diambil dari Google Map. Peta Google Map tersebut kita program melalui API (application programming interface) yang tersedia untuk menampilkan objek yang mewakili posisi benda bergerak/ GPS Tracking Device.

Informasi posisi objek tersebut diambil dari database MySQL dimana datanya selalu diupdate oleh GPS Tracking Device secara periodik. Akibatnya kita akan mendapatkan efek bergerak setiap kali kita me-refresh data dan menampilkannya pada peta Google Map.

Arsitektur sistem pemantau dapat digambarkan sebagai berikut:

Berikut adalah deskripsi masing-masing file program PHP yang digunakan untuk membangun aplikasi GPS Tracking Server:

Struktur database

Database minimal harus terdiri dari satu tabel yang menyimpan informasi posisi terakhir dari benda bergerak yang ingin dipantau. Kita namakan saja tabel ini dengan tabel lastpos. Struktur data pada tabel tersebut adalah sebagai berikut:

Seperti telah disebutkan di atas, tabel ini akan senantiasa di-update datanya oleh GPS Tracking Device yang terdapat pada benda bergerak yang dipantau yang dilakukan oleh program up.php.

Tabel ini juga akan senantiasa dibaca oleh program viewer.php melalui program lastpos.xml.php ketika akan menampilkan repersentasi posisi benda tersebut pada tampilan peta Google Map.

Database ini kita namakan misalnya gpstracking. Berikut adalah struktur perintah SQL untuk membuat database tersebut.

Masukkan juga bebebrapa contoh data yang dapat digunakan selama proses pembuatan program aplikasi sbb:

Ikuti artikel selanjutnya tentang bagaimana membuat aplikasi J2ME di handphone Nokia N95 dan membuat aplikasi Pemantau menggunakan Google MAP API.

Source Code Program up.php

Berikut ini controh script PHP up.php yang digunakan untuk menerima data dari device Nokia N95 dan menyimpan data tersebut ke tabel.

Artikel terkait:

• Membuat Aplikasi dengan Google Map API
• Menguasai Structured Query Language (SQL)

Akhmad Daniel Sembiring

vITraining.com – Qualified IT Products, Outsourcing, and Services

Ligarwangi.com – Linux, E-book, Coffee, Gift, etc

Image by Telendro via Flickr

Setup API Key

Untuk dapat menggunakan Google Map API pada suatu aplikasi, kita perlu mendapatkan Key yang bisa diperoleh secara gratis dari Google. Key ini hanya berlaku untuk satu URL, jadi setiap kali kita pindahkan aplikasi tersebut dari suatu server ke server lain, maka kita perlu mendapatkan key lainnya untuk server tersebut.

Key tersebut dapat diperloleh melalui URL di bawah ini:

http://www.google.com/apis/maps/signup.html

Ketika URL tersebut dibuka akan muncul halaman yang pada saat buku ini ditulis, tampilannya adalah sebagai berikut:

Selanjutnya, cara melakukan registrasi key adalah:

• Masukkan URL website tempat anda meletakkan program yang mengakses Google Map API pada kolom My web site URL, misalnya http://localhost/gmaptest. Anda perlu mendaftarkan satu API Key untuk setiap domain.
• Klik tombol Generate API Key. Simpan key yang diperoleh, berupa XXX karakter yang telah di-encrypt. Key ini akan digunakan pada saat inisialisasi Google Map pada aplikasi kita dan berlaku hanya untuk URL yang diregistrasikan

Memulai Membuat Aplikasi Google Map

Buat satu file HTML baru, katakanlah test-01.html. Ketikkan isinya sebagai berikut.

Baris-baris kode di atas sebenarnya adalah kode HTML standard yang memiliki kode Javascript.

Semua akses yang digunakan untuk memanipulasi dan menggunakan Google Map tersimpan secara online pada server Google dan hanya dapat diakses ketika kita sudah memiliki key yang benar untuk URL yang kita gunakan. Hal ini dilakukan pada baris 6. Anda harus mengganti bagian key=abc, ganti abc menjadi key yang anda peroleh ketika registrasi pada Google Map. Jika key yang anda gunakan tidak sesuai maka akan ditolak oleh Google.

Terdapat function javascript load() yang akan dipanggil pada saat halaman tersebut selesai didownload oleh browser.

Function load() berguna untuk menginisialisasi Google Map. Hal yang dilakukan di sini adalah:

• Baris 15, mengecek apakah browser yang kita gunakan dapat menampilkan Google Map atau tidak, jika ya maka lanjut ke proses berikutnya. Function GbrowserIsCompatible() digunakan untuk hal ini, dan merupakan function yang terdapat pada Google Map API
• Baris 17, mendefinisikan variable object dengan nama map yang merupakan representasi object Google Map, yaitu GMap2(). Object ini diinisialisasi menggunakan elemen DIV yang nantinya akan menampung tampilan peta Google Map, dalam hal ini adalah parameter yang digunakan pada function javascript document.getElementById(“map”). Artinya nantinya kita harus memiliki elemen DIV yang bernama map.

Pada baris 18 dipanggil method setCenter() yang dimiliki oleh object map. Method ini berfungsi untuk menentukan titik pusat tampilan peta. Parameternya adalah koordinat titik pusat dan level zoom. Koordinat titik pusat terlebih dahulu dibuat menggunakan object GLatLon() yang memiliki parameter latitude dan longitude koordinat yang diinginkan. Sementara level zoom adalah angka integer yang menentukan seberapa dalam level zoom peta yang ingin dimunculkan. Dalam hal ini kita gunakan level 12.

Pada baris 25 dapat dilihat definisi tag BODY HTML yang akan memanggil function javascript load() yang telah didefinisikan sebelumnya.

Pada baris 26 terdapat definisi tag HTML DIV yang bernama map yang akan digunakan sebagai tempat menampilkan object Google Map. Kita dapat merubah ukurannya disini dengan mengganti width dan height pada atribut style yang terdapat di sana. Namun yang penting adalah atribut id harus sama dengan yang dipanggil pada saat inisialisasi object Google Map pada baris 17 di atas.

Jika semua berjalan sebagaimana mestinya, maka hasilnya akan terlihat seperti gambar di bawah.

Men-center map pada suatu titik

Untuk memindahkan titik pusat peta Google Map dapat dilakukan dengan memanggil method setCenter(). Parameter method ini adalah koordinat yang diinginkan sebagai titik pusat dan level zoom.

Koordinat titik pusat harus berupa object berjenis GLatLng yang dapat dengan mudah dibuat menggunakan object GLatLng(). Parameter object GLatLng() adalah koordinat dalam latitude dan longitude yang diinginkan. Hasil dari object ini dapat ditampung dalam satu variable yang akan berjenis GLatLng. Object variable berjenis ini dapat langsung dipakai sebagai parameter dari method setCenter().

Parameter setCenter() selanjutnya adalah level zoom yang berupa nilai integer. Parameter ini menentukan seberapa dalam peta akan dimunculkan. Semakin besar level zoom nya maka semakin dalam peta akan dimunculkan. Angka zoom level mulai dari 0 (seluruh dunia) s.d 19 (paling detil).

Contohnya adalah sebagai berikut.

Menambah Marker

Marker adalah simbol atau icon yang dapat diletakkan di atas peta Google Map. Icon tersebut dapat berupa file gambar maupun icon default bawaan Google Map.

Untuk meletakkan marker di atas peta Google Map, kita perlu membuat object berjenis GMarker yang dapat dilakukan dengan mudah dengan mendefinisikan variabel object dengan fungsi GMarker().

Parameter dari fungsi GMarker() adalah koordinat dimana marker tersebut akan dimunculkan. Parameter ini harus berupa object dengan jenis GLatLng yang dapat dibuat dengan mudah melalui GLatLng() yang sudah kita lakukan sebelumnya.

Setelah object Marker berhasil dibuat, maka object tersebut dijadikan parameter dari method addOverlay() yang terdapat pada object map Google Map. Method ini akan menampilkan icon marker pada koordinat yang telah ditentukan sebelumnya.

Sebagai contoh buatlah file test-02.html seperti di bawah ini dan perhatikan baris-baris yang berhuruf tebal.

Jika semua berhasil, maka tampilan file diatas adalah sebagai berikut.

Menambah Marker dengan kotak informasi

Marker dapat dilengkapi dengan kotak informasi yang biasanya berupa infromasi lengkap tentang marker tersebut. Hal ini dapat ditambahkan pada saat kita mendefinisikan object marker itu dengan memanggil method openInfoWindowHtml() pada object marker tersebut.

Paremeter dari method ini adalah isi keterangan yang hendak dimunculkan pada kotak informasi dan berupa kode-kode HTML.

Sebagai contoh, buat file test-03.html seperti di bawah ini, perhatikan baris-baris yang berhuruf tebal.

Perhatikan juga pada baris 21 kita menggunakan parameter map.getCenter() pada saat membuat object GMarker. Ini berarti kita menggunakan koordinat yang dihasilkan oleh method getCenter() dari object map untuk dijadikan parameter GMarker(). Object koordinat yang dihasilkan oleh getCenter() adalah koordinat titik pusat peta pada saat itu. Koordinat ini bisa berubah setiap saat jika kita menggeser atau men-zoom peta dengan mouse atau dengan sengaja diprogram menggunakan setCenter().

Jika semua berjalan dengan benar, maka tampilan dari kode di atas adalah sebagai berikut.

Memilih Jenis Map

Google Map memiliki tiga jenis peta yang dapat ditentukan dengan memanggil method setMapType(). Type map yang tersedia adalah:

• G_NORMAL_MAP berupa peta jalan/ digital, terdiri dari jalan, batas wilayah, nama jalan, nama tempat, dan sebagainya. Hanya beberapa negara saja yang sudah ada peta digitalnya pada Google Map.
• G_SATELLITE_MAP berupa foto satelit. Semua tempat dimuka bumi ini telah difoto melalui satelit dan dapat diakses melalui Google Map. Namun beberapa tempat masih berupa foto dengan resolusi rendah sementara beberapa tempat sudah berupa foto dengan resolusi tinggi.
• G_HYBRID_MAP adalah gabungan peta digital dan foto satelit
• G_DEFAULT_MAP_TYPES berisi array dari ketiga jenis di atas
• G_PHYSICAL_MAP menampilkan peta fisik berdasarkan informasi terrain

Hal yang perlu diperhatikan pada pemanggilan method ini adalah bahwa method ini harus dipanggil setelah pemanggilan method setCenter() atau zoom().

Sebagai contoh, buatlah file dengan nama test-05.html dan dengan source code seperti di bawah ini. Perhatikan baris-baris yang berhuruf tebal.

Kita dapat mengedit bari 19 dengan merubah jenis peta menjadi G_NORMAL G_SATELITTE_TYPE, atau G_HYBRID_TYPE. Untuk peta dengan jenis G_NORMALuntuk daerah-daerah tertentu, jika kita men-zoom terlalu dalam maka mungkin kita tidak dapat melihat peta yang dimaksud. Ini karena Google Map belum memiliki peta pada level zoom tersebut untuk daerah yang kita pilih.

Contoh tampilan peta dengan type hybrid adalah sebagai berikut.

Menambah Data Marker dari URL

Marker dapat ditambahkan pada Google Map secara dinamis dari suatu data, dimana misalnya kita memiliki file data yang berisi informasi koordinat banyak marker yang akan dimunculkan pada Google Map.

Untuk hal ini kita perlu menjalankan function GDownloadUrl() yang digunakan untuk men-download data dari suatu URL file yang berisi data XML. Data XML yang diterima kemudian diparsing oleh object Google Map GXml. Object ini memiliki method parse() yang berguna untuk melakukan parsing data XML.

Setelah dilakukan parsing, maka akan didapatkan data XML yang siap untuk dibaca isinya.

Contohnya, buatlah file misalnya test-06.html dengan source code seperti di bawah ini. Perhatikan baris-baris yang berhuruf tebal.

Pada baris 21, kita menjalankan function GDownloadUrl(). Function ini memiliki dua parameter yaitu lokasi URL file yang akan didownload, yaitu data.xml dan function yang akan meng-handle data dan responseCode yang diterima setelah dilakukan proses download. Kedua data itu sudah otomatis tersedia dan dijadikan sebagai parameter dari function handler tersebut sehingga dapat dibaca di dalam function.

Pada baris 22 dilakukan pemanggilan method parse() yang terdapat pada object GXml. Hasil parsing data XML tersebut disimpan dalam variabel xml yang merupakan object yang memiliki struktur data XML yang siap dibaca oleh proses lainnya. Proses ini misalnya mencari key dan value suatu elemen tertentu dengan mudah.

Pada baris 23, kita membaca elemen XML yang bernama marker. Elemen ini harus tersedia pada data XML yang didownload sebelumnya yaitu pada file data.xml. Hasil pembacaan disimpan pada array yang kita beri nama markers. Ini adalah array javascript biasa yang dapat dihitung jumlah elemennya dengan property length, atau diakses setiap elemennya melalui indexnya, yaitu dengan tanda kurung siku. Misalnya untuk mengakses elemen pertama maka digunakan notasi markers[0].

Pada baris 24, kita melakukan perulangan mulai dari 0 sampai dengan banyaknya elemen array markers. Selama perulangan tersebut, kita membuat object yang diberinama point yang merupakan object GLatLng dengan koordinat latitude dan longitude yang diambil dari data XML. Informasi tersebut kita dapatkan dari elemen array markers dengan memanggil method getAttribute(). Artribut yang kita panggil untuk setiap elemen tersebut adalah atribut lat dan lng. Function parseFloat() digunakan untuk menkonversi data string menjadi data dengan type float yang diperlukan untuk membuat object GLatLng.

Pada baris 28, setelah object point berhasil dibuat, maka object tersebut digunakan sebagai parameter untuk pembuatan object baru yaitu GMarker. Object GMarker ini kemudian dijadikan parameter untuk method addOverlay() dari object map Google Map sehingga Google Map akan menampilkan marker baru pada koordinat yang ditentukan pada point.

Setelah perulangan selesai sampai dengan jumlah elemen array markers, maka pada baris 30 dipanggil method setCenter() dari object map untuk menentukan koordinat titik tengah tampilan peta Google Map.

Contoh data.xml yang digunakan untuk proses di atas adalah sebagai berikut:

Jika semua berjalan semestinya, maka tampilannya dari kode diatas adalah sebagai berikut.

Memindahkan Marker

Kadang kita perlu untuk memindahkan posisi sebuah marker yang sudah ada sebelumnya. Namun sayangnya Google Map belum menyediakan fasilitas ini, misalnya marker.move() atau map.moveMarker().

Untuk keperluan ini kita perlu melakukan:

1. penghapusan marker yang sudah ada, dilakukan dengan method clearOverlays() yang terdapat pada object map Google Map.
2. pembuatan marker baru menggantikan marker yang sudah dihapus sehingga didapatkan efek perpindahan marker dari suatu koordinat ke koordinat lain.

Berikut ini adalah contoh program untuk memindahkan marker.

Demikian dasar-dasar pengembangan aplikasi web menggunakan Google Map API. Sampai ketemu pada aplikasi berikutnya tentang membuat aplikasi GPS tracking.

Referensi:

• Dokumentasi Google Map API: http://code.google.com/apis/maps/documentation/introduction.html
• Google Map API Playground: http://code.google.com/apis/ajax/playground

Akhmad Daniel Sembiring

vITraining.com – Qualified IT Products, Outsourcing, and Services

Ligarwangi.com – Linux, E-book, Coffee, Gift, etc