Experiments with Google Map V3

Two months back, I was novice with absolutely zero experience of Google Maps API or JavaScript. Luckily or unluckily, I was put in the condition where I have to develop a WebGIS for visualization of datasets. I started hitting my head with the examples, samples and codes available online and was successful in preparing something acceptable to end users. Most of the time, I searched for relevant sample code on web, changed the parameters and adapted for my purpose in clean and more understandable form. I feel those pieces of codes might be helpful for other ‘forced to be developers’ like me. I will be sharing those JavaScripts and Google Map API v3 codes here regularly.

  1. Create Markers (with InfoWindows) from coordinates pasted in Text Box

I wrote this code in order to make user capable of copying data from Excel sheet and paste in text box to map it.

Once the data is copied from Excel, it comes as ‘TAB’ delimited text when pasted in box. The javascript code splits the data into lines, separates values in each line based on Tabs and then display the enteries as Markers on map using first two columns containing N, E respectively.

Specifying column number allows you to decide what to display in InfoWindow which displays while clicking on marker.


<!DOCTYPE html>


<meta name="viewport" content="initial-scale=1.0, user-scalable=yes" />

<script src="http://maps.googleapis.com/maps/api/js?v=3&sensor=false" type="text/javascript"></script>

   2: <style type="text/css">

   3:   html { height: 100% }

   4:   body { height: 100%; margin: 0px; padding: 0px }

   5:   #map_canvas { height: 100% }

   6:   #textarea {

   7:     position:absolute;

   8:     padding:0px;

   9:     z-index:888;

  10:     bottom:5px;

  11:     right:5px;

  12:     opacity:0.90;

  13:     text-align:center;

  14:     border:0px #ccc solid;

  15:     background-color: #FFF;

  16:     visibility: hidden; 

  17:     }

  18: </style>

  19: <script type="text/javascript"> 

  20: var map;

  21: var points = [];

  22: var lines;

  23: function initialize() {


  25:     map = new google.maps.Map(document.getElementById("map"), {

  26:         zoom: 5,

  27:         center: new google.maps.LatLng(30.637905104982618, 71.103515625),

  28:         mapTypeId: google.maps.MapTypeId.ROADMAP,


  30:                 });

  31:             }


  33: function createMarkers(coordinates){

  34:     lines = coordinates.split("\n");    //splits lines pasted in text box

  35:     alert('There are '+ lines.length +' points to display on map');

  36:     for (var i=0; i<lines.length; i++){

  37:         var xy = lines[i].split("\t");    //splits data in each line based on Tabs. Data copied from excel comes in Tab Delimited format

  38:         var x = xy[0];

  39:         var y = xy[1];    

  40:         var latlng =  new google.maps.LatLng(x,y);

  41:         points.push(latlng);

  42:         var marker = new google.maps.Marker({

  43:                 position: latlng,

  44:                 map:map

  45:         });


  47:         var labelingColumn = document.getElementById('labelingColumn').value;

  48:         addInfoWindow(marker, xy[labelingColumn]);    // Third column in each line is passed to addInfoWindow as content for showing in infowindow

  49:       }


  51:       zoomTo(points);

  52:   }


  54:       function addInfoWindow(marker, content) {

  55:     var infoWindow = new google.maps.InfoWindow({

  56:         content: content

  57:     });


  59:     google.maps.event.addListener(marker, 'click', function () {

  60:         infoWindow.open(map, marker);

  61:     });

  62:     }


  64:     function zoomTo(points){

  65:     bounds = new google.maps.LatLngBounds();

  66:       for (i = 0; i < points.length; i++) {

  67:       bounds.extend(points[i]);

  68:       }

  69:       map.fitBounds(bounds);


  71:     }

  72:     function clearMap(){

  73:         document.getElementById('coordinates').value = "";

  74:         initialize();

  75:         }

  76:     function showCoordinatesMapper(){

  77:         if(document.getElementById('csvToMap').checked){

  78:             document.getElementById('textarea').style.visibility = 'visible';

  79:             }

  80:         else {

  81:             document.getElementById('textarea').style.visibility = 'hidden';

  82:             }

  83:         }



<body onload="initialize()">

<!-- side panel div container -->

<div style="position:absolute; width:230px; height: 100%; overflow:auto; float:left; padding-left:10px; padding-right:10px;">

    <h1>Pakistan GIS</h1>

    <h3>Creating Markers (with Infowindows) from coordinates data in text box</h3>

    Show Coordinates Mapper: <input id="csvToMap" type="checkbox" onclick="showCoordinatesMapper();" />


<div id='textarea'>

  <form action="#" onsubmit="createMarkers(this.coordinates.value); return false">

    <textarea cols="40" rows="15" wrap="off" id="coordinates">Paste your data with coordinates here...</textarea>    


    <label>Select Column for Labeling</label>

    <select id="labelingColumn" width = "100px">

          <option value="2">Column 3</option>

          <option value="3">Column 4</option>

          <option value="4">Column 5</option>

          <option value="5">Column 6</option>



    <input type="submit" value="Put on Map"/>


    <button id="delete-button" onClick="clearMap();">Clear Markers</button>


<!-- map div container -->

  <div id="map" style="height:100%; margin-left:250px;"></div>



Surveying and Mapping Act 2013

In a recent GIS Working Group meeting in Lahore, it has been shared by Major (Retd.) Nadeem Ahmad Ch. Director, Survey of Pakistan that the bill has been approved by Standing Committee on Defence of National Assembly but due to paucity of time the bill could not be presented in National Assembly for passing. However, now the same has been initiated in shape Presidential Ordinance which is in process of approval by federal government. The copy of Surveying and Mapping 2013 is posted on the website of National Assembly which can be downloaded.

FloodInfo.pk : An online Flood Risk Estimator in Pakistan


Flood Risk Estimator has been developed to support rural communities, government agencies, non-government organization and other line actors working in flood prone areas of District Layyah by providing them scenario based precise information on flood risks.

It is one of the outputs of a project titled ‘Enhancing capacities of flood prone communities through GIS based early warning system’ implemented by Doaba Foundation with technical support of City Pulse (Pvt.) Ltd. It has been generously supported by Oxfam GB.

Flood Risk Estimator has its core based on GIS based flood plain modeling and mapping techniques coupled with indigenous knowledge of riverine communities. It has been developed with the objectives of creating a system which can help in:

  1. estimating flood water spread at a particular discharge
  2. finding depth of flood water at any location in flooded area
  3. estimating the affected elements* at any particular discharge

*villages, population, schools, health facilities, public buildings, livestock hospitals, bridges, culverts, sippers, embankments, roads

All information on elements at risk and communities’ capacities have been obtained through primary sources via field visit, community meeting and GPS survey. Flood plain modeling is based on high resolution satellite images, Digital Elevation Model and ground observations of discharges and water flow. All spatial and non spatial data have been processed using HECRAS and associated GIS technologies. See detailed presentation on development process here.

Flood risk estimation report

A snapshot of Flood Scenario Report generated for one Union council

Flood risk estimation report2

A snapshot of Flood Plain Mapping and Elements at Risk


A snapshot of Fly on Flooded Area