Home > Google Maps > How to Make Google map application using PHP/Mysql

How to Make Google map application using PHP/Mysql

Hi,

This is my second post.Since first one in October 2010 I was very busy with my academic and Internship stuffs.So to day I will show you step by step how to develop a  Google map application using PHP/MYSQL.

Fist of all you must get a key for using Google maps so go to http://code.google.com/apis/maps/signup.html and follow the steps then you will have a key for using Google maps.Please read the terms and conditions for using that.Smile .

 

To follow this tutorial you must have to have these tools below .I will tell for  both windows and Linux users how to sets up the infrastructure.

For Linux Users.

1.Just Google “How to install LAMP”

-> you will have thousands of links how to do that.I am not going to tell how to do that here.Smile

For Windows users

1.Download XMAPP from here http://www.apachefriends.org/en/xampp-windows.html

2.install it on your computer.There will be a nice GUI so just start the MySQL server and Apache Server.

Now we have the infrastructure to run the PHP codes and powered it by the MySQL database connection.Smile

(Both linux and windows users   Linux users have to start Apache and MySQL manually On the Terminal)

Now the Second step.For this step we should have some IDE because it is convenient when we go in to further when code become complex it will not easy to find error or fault when we use direct development scenario.However I know most of Linux users like vim and on the other hand windows users notepad for this kind of stuff its up to you.But for the easiness of me and beginners who will see this I am using Net beans IDE for this purpose.

If you do not have it download it from here.

After install it.Now you have the full infrastructure to develop our application.Smile

(Please check weather your apache server and MySQL server running properly you can do it easly by googling one query to how to do so Smile)

open Netbeans you will have screen like below.

intial

 

Go to File->New Project

Then a wizard will appear and find the PHP item on the right panel and select it.It will look like below.

intial

 

Select PHP Application from the right panel and press next…

Then give the details for the next wizard page it will ask the project name –> give it as “map”

and the most important thing is set the project location in the right place in the relevant server in XAMPP it is “ XAMPP\xampp\htdocs”  in WAMP or LAMP  it is “www” folder.

see the below screen shot if any droughts post it on the comment section.Smile.

2

 

Press Next –> you can go to the next wizard page section it will ask the running configurations for this application.It will look like below and leave the default settings but do not do things blindly read those fields and what are they up to Smile.

Press the finish button and then you will have a newly created PHP project with index.php file.

Smile

hhmmh…tired ha..do not give up I tell you hoe to do this.

4

 

This is how tit will looks like.

if you want to cheek your settings juzt put your name in to the auto generated php code Winking smile

<?php
echo "Your name";
?>

now save the content and rigkt clik the project and select run if every thing is ok your browswe will apper and show your name just like below.

5

 

Now tis time to create out Google map application.

As the first step we should create a Data base.It is very simple I will give you the sql for create the data base for this application.Smile

For that  type this Url in your browser address area. http://localhost/phpmyadmin/

create a data base with name “tankmap”

image

Download tankmap.sql file from here.

After creating the data base go to the “Import” tab in the PhPMyAdmin dash board..

image

now locate the tankmap.sql file in your file system and make sure to select the radio button “SQL” from “Format of Imported files Section”. Smile

 

huuyaa..now you have the database that we want develop this application. Open-mouthed smile

Lest begun the code….

1.Right click the Source Files Filder on the Project go to New->PHP file

image

 

give the name as “dbinfo” copy past the below content to it.Smile

<?php
$username="root";
$password="";
$database="tankmap";
?>

It is to hold the database related details ..

now the most interesting part is how we going to consume the database we created in our map??

Surprised smile

PHP is for that….Winking smile   in this tutorial I have developed a PHP file that can make XML file from reading the data base..OK OK I know things getting bad..back to code then I will explain every thing it a promise.Smile

2.Crate a new PHP file call xml_gen.php

add these content to it I have add comments for the code and I will explain those below.Smile

<?php

require("dbinfo.php");

// Start XML file, create parent node

$dom = new DOMDocument("1.0");
$node = $dom->createElement("tanks");
$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 tanks table

$query = "SELECT * FROM tanks 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("tank");
    $newnode = $parnode->appendChild($node);
    $newnode->setAttribute("tankname",$row['tankName']);
    $newnode->setAttribute("lat", $row['latitude']);
    $newnode->setAttribute("lng", $row['longitude']);
    $newnode->setAttribute("damtype", $row['damtype']);
    $newnode->setAttribute("damheight", $row['damheight']);
    $newnode->setAttribute("nofCanals", $row['nofCanals']);
    $newnode->setAttribute("capacity", $row['capacity']);
    $newnode->setAttribute("presentCondition", $row['presentCondition']);
    $newnode->setAttribute("maintainAuthority", $row['maintainAuthority']);
    $newnode->setAttribute("surface", $row['surface']);
    $newnode->setAttribute("catchment", $row['catchment']);
    $newnode->setAttribute("purpose", $row['purpose']);
    $newnode->setAttribute("nofFamerFamilies", $row['nofFamerFamilies']);
    $newnode->setAttribute("nearestTown", $row['nearestTown']);
    $newnode->setAttribute("rainfallData", $row['rainfallData']);
    $newnode->setAttribute("image", $row['image']);
}

echo $dom->saveXML();

?>

You must see the out put of this php file .You can see it using IE past the url as http://localhost/map/xml_gen.php then you will have a generated xml content like this.

image

here goes the explanation Smile

image

 

image

 

image

3.Now its time to create the presentaion layer of this application and use the Cooool Google Map Api …

create a new HTML file and copy this content on to it…

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAR0TWf73rulOP_SnETQPFKxRj5djmSsmVAgDaRb1psFcJlThRhxSjxifqM96NjrBsBn2XrZWSE-QQqQ"
                type="text/javascript"></script>
        <link type="text/css" href="css/style.css" rel="stylesheet" media="all" />
        <script type="text/javascript">
            //<![CDATA[

            var iconBlue = new GIcon();
            iconBlue.image = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';
            iconBlue.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
            iconBlue.iconSize = new GSize(12, 20);
            iconBlue.shadowSize = new GSize(22, 20);
            iconBlue.iconAnchor = new GPoint(6, 20);
            iconBlue.infoWindowAnchor = new GPoint(5, 1);

            function load() {
                if (GBrowserIsCompatible()) {
                    // var map = new GMap2(document.getElementById("map"));
                    var map = new google.maps.Map(document.getElementById('map'));
                    map.addControl(new GSmallMapControl());
                    map.addControl(new GMapTypeControl());
                    map.setCenter(new GLatLng(6.082083, 80.542277), 13);
                    map.enableScrollWheelZoom();

                    GDownloadUrl("xml_gen.php", function(data) {
                        var xml = GXml.parse(data);
                        var markers = xml.documentElement.getElementsByTagName("tank");
                        for (var i = 0; i < markers.length; i++) {
                            var name = markers[i].getAttribute("tankname");
                            var damtype = markers[i].getAttribute("damtype");
                            var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                            parseFloat(markers[i].getAttribute("lng")));
                            var damheight = markers[i].getAttribute("damheight");
                            var nofCanals = markers[i].getAttribute("nofCanals");
                            var capacity = markers[i].getAttribute("capacity");
                            var presentCondition = markers[i].getAttribute("presentCondition");
                            var maintainAuthority = markers[i].getAttribute("maintainAuthority");
                            var surface = markers[i].getAttribute("surface");
                            var catchment = markers[i].getAttribute("catchment");
                            var purpose = markers[i].getAttribute("purpose");
                            var nofFamerFamilies = markers[i].getAttribute("nofFamerFamilies");
                            var nearestTown = markers[i].getAttribute("nearestTown");
                            var rainfallData = markers[i].getAttribute("rainfallData");
                            var imagePath=markers[i].getAttribute("image");
                            if(imagePath == ""){
                                imagePath = "Image Not Availabe at this time";
                            }
                            var marker = createMarker(point, name, damtype,damheight,nofCanals,capacity,presentCondition
                            ,maintainAuthority,surface,catchment,purpose, nofFamerFamilies,nearestTown,rainfallData,imagePath);
                            // var marker = createMarker(point, name, damtype,damheight);
                            map.addOverlay(marker);
                        }
                    });
                }
            }
            function createMarker(point,name,damtype,damheight,nofCanals,capacity,presentCondition
            ,maintainAuthority,surface,catchment,purpose, nofFamerFamilies,nearestTown,rainfallData,imagepath) {
                // var marker = new GMarker(point, customIcons[type]);
                var marker = new GMarker(point,iconBlue);
                var tabs = [];
                // Create tabs and add them to the array


                var html = "<b>" + name + "</b> <br/>"  +'<small>Dam Type:</small>'+ '<small>'+damtype+'</small>'
                    + "<br/>" +'<small>Dam Height:</small>'+'<small>'+damheight+'</small>'
                    + "<br/>" + '<small>Num Of Canales:</small>'+'<small>'+nofCanals+'</small>'
                    + "<br/>" + '<small>Capacity :</small>'+'<small>'+capacity+'</small>'
                    + "<br/>" + '<small>Present Condition :</small>'+'<small>'+presentCondition+'</small>'
                    + "<br/>" + '<small>Authority :</small>'+'<small>'+maintainAuthority+'</small>'
                    + "<br/>" + '<small>Surface :</small>' +'<small>'+surface+'</small>'
                    + "<br/>" + '<small>Cathment :</small>' +'<small>'+catchment+'</small>'
                    + "<br/>" + '<small>Purpose :</small>' +'<small>'+purpose+'</small>'
                    + "<br/>" + '<small>No Of Farmer Families :</small>' +'<small>'+nofFamerFamilies+'</small>'
                    + "<br/>" + '<small>Nearest Town :</small>'+'<small>'+nearestTown+'</small>'
                    + "<br/>" + '<small>Rain Fall Data :</small>' +'<small>'+rainfallData+'</small>';

                var content = '<div id="info">'+
                    '<img src="'+imagepath+'" alt=""  width="150px" height="150px"/>' +
                    '<h2>'+name+'</h2>' +
                    '</div>';

                tabs.push(new GInfoWindowTab('Information', html));

                var tab2 = new GInfoWindowTab("Location", content);
                tabs.push(tab2);
                
                GEvent.addListener(marker, 'click', function() {
                    marker.openInfoWindowTabsHtml(tabs);

                });
                return marker;
            }

            //]]>
        </script>
    </head>

    <body onload="load()" onunload="GUnload()">
        <div id="map" style="width: 100%; height: 100%"></div>
    </body>


</html>


Explanation

1.This is how we use the obtained Google key.

image

2.Create the marker for our map

image

3.The locad function…

image

4.Extracts data from the xml

image

5.The rest of the code responsible to make the marker a fancy one Smile..

If you did it with me correctly then enter this url on your browser..

http://localhost/map/map.html

yahooo..

this will be the out put

output

 

image

 

image

So We make it (Note that if want those fancy images there add those in to folder call images/YOUR_IMAGE.jpg.png  ext)…

Thanks..

Advertisements
  1. Bhagya Maheshi
    June 6, 2011 at 6:15 pm

    Hi Kalpads,
    Nice work. You have mentioned every single stuff here. It is really good to beginners(like us). Can I suggest something???? If you can post much simpler stuff to freshers it will be a great help…
    Keep this up bro… Best of luck…..

    • June 7, 2011 at 12:19 pm

      Thanks for the comment sis.. 🙂 I know you are not a beginner and also i know you also have good writing and teaching ability use that and write blog
      its my suggestion. :)..

  2. Marvin
    February 29, 2012 at 11:26 am

    Hello Kalpads,

    Great stuff for learning on Google Maps, but the tankmap.sql does no longer available in the download links you provide. Is there any links we can go so that we can download it and practice with it.

    Again Thumbs Up! Great example! THanks for sharing.

  3. jhondeivid_18@hotmail.com
    April 17, 2013 at 2:17 am

    hello. Your post is very interesting. But I have a little problem, I have no access to sql says this removed. and the sample data that I would like to have them too. thank you very much for your input. bye

  4. April 17, 2013 at 7:23 am

    Hi all ,

    I am no longer maintaining this blog . Instad of I am writing at http://kalpads.blogspot.com
    At the relavent post http://kalpads.blogspot.sg/2011/06/how-to-make-google-map-application.html I will upload the sql by the this week end.

    Thanks for pointing it out.

    Kalpa.

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: