Easy Code Stuff: Latitude

Showing posts with label Latitude. Show all posts

Mar 18, 2016

Google Maps Creating Polygon And Retrieving Coordinates

In this article I'm going to explain you about getting the latitude and longitude of a polygon in order to do a google map polygon search. In-order to do that first you should let the user to draw a polygon. Then you should get the latitude and longitude of the corners of the polygon. After getting the latitude and longitude of the area drawn by user, what you have to do is, search it in the database or what ever you want. It's completely up to you.

In this example I'm not telling you guys about the polygon search. I'm just trying to help you in the first step by giving the latitude and longitude array of the drawn area.Following example will help you to develop your own google map.Then you can draw a Polygon area on it.

<html>
<head>
    <title>Google Maps Creating Polygon And Retrieving Coordinates</title>
    <script type="text/javascript" src='https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false'></script>
    <style>
        #map-canvas
        {
            width: auto;
            height: 500px;
        }
    </style>
</head>
<body onload="initialize()">
    <div id="map-canvas"></div>
    <div id="result"></div>
    <script type="text/javascript">
        function initialize() {
            var myLatLng = new google.maps.LatLng(6.92814, 79.9124);
            var mapOptions = {
                zoom: 12,
                center: myLatLng
            };
            var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

            var triangleCoords = [
                new google.maps.LatLng(6.92814, 79.9124),
                new google.maps.LatLng(6.89746, 79.87636),
                new google.maps.LatLng(6.88553, 79.93644)
            ];

            myPolygon = new google.maps.Polygon({
                paths: triangleCoords,
                draggable: true,
                editable: true,
                strokeColor: '#FF0000',
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: '#FF0000',
                fillOpacity: 0.35
            });

            myPolygon.setMap(map);

            google.maps.event.addListener(myPolygon.getPath(), "insert_at", getPolygonCoords);

            google.maps.event.addListener(myPolygon.getPath(), "set_at", getPolygonCoords);
        }

        function getPolygonCoords() {
            var len = myPolygon.getPath().getLength();
            var htmlStr = "";
            for (var i = 0; i < len; i++) {
                htmlStr += "<p>" + myPolygon.getPath().getAt(i).toUrlValue(5) + "</p>";
            }
            document.getElementById('result').innerHTML = htmlStr;
        }
    </script>
</body>
</html>

Then you can get the coordinates in the selected area. Above example I have draw a triangle so, Ill will get three coordinates. Actually what Google Map returning is the Latitude and Longitude of the corners.

1	myPolygon.getPath().getAt(i).toUrlValue(5);

Above code line returns the Latitude and Longitude of a corner. But if your trying to get a lat-lng object out of it, you cant do it directly. because above methods returns the lat lng as a string. But new google.maps.LatLng(lat,lng) expects two numbers separated with commas. So to do that's follow below lines of codes.

function getPolygonCoords() {
    var len = myPolygon.getPath().getLength();
    points = [];
    for (var i = 0; i < len; i++) {
        var strLatLng = myPolygon.getPath().getAt(i).toUrlValue(5);
        var arrLatLng = strLatLng.split(",");
        var objLatLng = new google.maps.LatLng(Number(zzz[0]), Number(zzz[1]));
        points.push(objLatLng);
    }
}

Hope you found this article useful.

Check My Other Articles About Google Maps.

1. Creating A Google Map Using Google Map API v3
2. Show Current Location In A Google Map Using Google Map API v3
3. Getting The Address Of Selected Location In Google Map Using Google Map API v3
4. Getting The Selected Latitude And Longitude From Google Map Using Google Map API v3
5. Google Map With Multiple Markers & Info Windows Using Google Map API v3
6. Getting The Direction Between Two Markers In Google Map Using Google MAP API
7. Getting The Direction Between Two Locations Using Google MAP API
8. Getting The Distance Between Two Markers In Google Map Using Google MAP API
9. Getting The Distance Between Two Locations Using Google MAP API
10. Getting The Nearest Places For A Location In Google Map Using Google MAP API
11. Google Map With InfoBubble
12. Google Maps Creating Polygon And Retrieving Coordinates

Oct 17, 2015

Getting The Direction Between Two Markers In Google Map Using Google MAP API

In this article I'm going to show guys to get the direction between two locations. In-order to do that I have created a simple html page consisting google map with two markers. You can drag the markers as you wish. In the page below the map I have shown the selected locations Latitude and Longitude. After moving the markers you will get the direction.

Have a look on the code. It's simply created using Html and JavaScript.

<html>
<head>
    <title>Getting The Direction Between Two Markers In Google Map Using Google MAP API</title>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,places"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.1.min.js"></script>
</head>
<body>
    <div id="map-canvas" style="height: 75%;"></div>
    <div>
        <strong>From Location</strong><br />
        <span>Latitude : </span>
        <input type="text" id="fromLat" />
        <span>Longitude : </span>
        <input type="text" id="fromLng" />
        <br /><br />
        
        <strong>To Location</strong><br />
        <span>Latitude : </span>
        <input type="text" id="toLat" />
        <span>Longitude : </span>
        <input type="text" id="toLng" />
        <br /><br />

        <div id="direction"></div>
    </div>
    <script type="text/javascript">
        var map;
        var fromLat = 6.928940573589038;
        var fromLng = 79.87219331750487;
        var toLat = 6.929110981212029;
        var toLng = 79.87013338098143;

        var fromIcon = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=O|FFFF00|000000';
        var toIcon = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=D|FF0000|000000';

        loadMap();
        setFromMarker();
        setToMarker();

        function loadMap() {
            map = new google.maps.Map(document.getElementById('map-canvas'), {
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                center: new google.maps.LatLng(fromLat, fromLng),
                zoom: 15
            });
        }

        function setFromMarker() {
            var fromMarker = new google.maps.Marker({
                map: map,
                position: new google.maps.LatLng(fromLat, fromLng),
                icon: fromIcon,
                animation: google.maps.Animation.DROP,
                draggable: true
            });

            google.maps.event.addListener(fromMarker, 'dragend', function (event) {
                fromLat = event.latLng.lat();
                fromLng = event.latLng.lng();
                setLatLngDetails();
            });
        }

        function setToMarker() {
            var toMarker = new google.maps.Marker({
                map: map,
                position: new google.maps.LatLng(toLat, toLng),
                icon: toIcon,
                animation: google.maps.Animation.DROP,
                draggable: true
            });

            google.maps.event.addListener(toMarker, 'dragend', function (event) {
                toLat = event.latLng.lat();
                toLng = event.latLng.lng();
                setLatLngDetails();
            });
        }

        function setLatLngDetails() {
            $("#fromLat").val(fromLat);
            $("#fromLng").val(fromLng);
            $("#toLat").val(toLat);
            $("#toLng").val(toLng);
            getDirection();
        }

        function getDirection() {
            var fromLocation = new google.maps.LatLng(fromLat, fromLng);
            var toLocation = new google.maps.LatLng(toLat, toLng);
            var service = new google.maps.DistanceMatrixService();
            service.getDistanceMatrix({
                origins: [fromLocation],
                destinations: [toLocation],
                travelMode: google.maps.TravelMode.DRIVING,
                unitSystem: google.maps.UnitSystem.METRIC,
                avoidHighways: false,
                avoidTolls: false
            }, callback_direction);
        }

        function callback_direction(response, status) {
            if (status != google.maps.DistanceMatrixStatus.OK) {
                alert('Error was: ' + status);
            } else {
                var origins = response.originAddresses;
                var destinations = response.destinationAddresses;
                var str = '';

                for (var i = 0; i < origins.length; i++) {
                    var results = response.rows[i].elements;
                    if (results[0].status != 'ZERO_RESULTS') {
                        for (var j = 0; j < results.length; j++) {
                            str += origins[i] + '<strong> to </strong>' + destinations[j] + '<strong> : </strong>' + results[j].distance.text + '<strong> in </strong>' + results[j].duration.text + '<br/>';
                        }
                    } else {
                        str = 'No Direction Found.';
                    }
                }

                $("#direction").html(str);
            }
        }
   
    </script>
</body>
</html>

When you are getting the direction between two locaions, you must specify the mode of the travel. Following are the travel modes supported by google.

google.maps.TravelMode.DRIVING (Default) indicates standard driving directions using the road network.
google.maps.TravelMode.BICYCLING requests bicycling directions via bicycle paths & preferred streets.
google.maps.TravelMode.TRANSIT requests directions via public transit routes.
google.maps.TravelMode.WALKING requests walking directions via pedestrian paths & sidewalks.

Check My Other Articles About Google Maps.

1. Creating A Google Map Using Google Map API v3
2. Show Current Location In A Google Map Using Google Map API v3
3. Getting The Address Of Selected Location In Google Map Using Google Map API v3
4. Getting The Selected Latitude And Longitude From Google Map Using Google Map API v3
5. Google Map With Multiple Markers & Info Windows Using Google Map API v3
6. Getting The Direction Between Two Markers In Google Map Using Google MAP API
7. Getting The Direction Between Two Locations Using Google MAP API
8. Getting The Distance Between Two Markers In Google Map Using Google MAP API
9. Getting The Distance Between Two Locations Using Google MAP API
10. Getting The Nearest Places For A Location In Google Map Using Google MAP API
11. Google Map With InfoBubble
12. Google Maps Creating Polygon And Retrieving Coordinates

Getting The Direction Between Two Locations Using Google MAP API

In this article I'm going to show guys to get the direction between two locations. In-order to do that I have created a simple html page consisting four text fields to enter the from locations and to locations latitude and longitude. You can enter the locations latitude and longitudes of from and to locations and click the "Get Direction" button. After clicking the button you will get the direction.

Have a look on the code. It's simply created using Html and JavaScript.

<html>
 <head>
  <title>Getting The Direction Between Two Locations Using Google MAP API</title>
  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,places"></script>
  <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.1.min.js"></script>
 </head>
 <body> 
  <div>
   <strong>From Location</strong><br/>
   <span>Latitude : </span>
   <input type="text" id="fromLat"/>
   <span>Longitude : </span>
   <input type="text" id="fromLng"/>
   <br/><br/>

   <strong>To Location</strong><br/>
   <span>Latitude : </span>
   <input type="text" id="toLat"/>
   <span>Longitude : </span>
   <input type="text" id="toLng"/>
   <br/><br/>

   <input type="button" value="Get Direction" onclick="getDirection()"/>
   <br/><br/>
   <div id="direction"></div>
  </div>
  
  <script type="text/javascript">

      function getDirection() {
          var fromLocation = new google.maps.LatLng($("#fromLat").val(), $("#fromLng").val());
          var toLocation = new google.maps.LatLng($("#toLat").val(), $("#toLng").val());
          var service = new google.maps.DistanceMatrixService();
          service.getDistanceMatrix({
              origins: [fromLocation],
              destinations: [toLocation],
              travelMode: google.maps.TravelMode.DRIVING,
              unitSystem: google.maps.UnitSystem.METRIC,
              avoidHighways: false,
              avoidTolls: false
          }, callback_direction);
      }

      function callback_direction(response, status) {
          if (status != google.maps.DistanceMatrixStatus.OK) {
              alert('Error was: ' + status);
          } else {
              var origins = response.originAddresses;
              var destinations = response.destinationAddresses;
              var str = '';

              for (var i = 0; i < origins.length; i++) {
                  var results = response.rows[i].elements;
                  if (results[0].status != 'ZERO_RESULTS') {
                      for (var j = 0; j < results.length; j++) {
                          str += origins[i] + '<strong> to </strong>' + destinations[j] + '<strong> : </strong>' + results[j].distance.text + '<strong> in </strong>' + results[j].duration.text + '<br/>';
                      }
                  } else {
                      str = 'No Direction Found.';
                  }
              }

              $("#direction").html(str);
          }
      }
  </script>
 </body>
</html>

Just check the code in browser, you will get the following output.

When you are getting the direction between two locaions, you must specify the mode of the travel. Following are the travel modes supported by google.

google.maps.TravelMode.DRIVING (Default) indicates standard driving directions using the road network.
google.maps.TravelMode.BICYCLING requests bicycling directions via bicycle paths & preferred streets.
google.maps.TravelMode.TRANSIT requests directions via public transit routes.
google.maps.TravelMode.WALKING requests walking directions via pedestrian paths & sidewalks.

Getting The Distance Between Two Markers In Google Map Using Google MAP API

In this article I'm going to show guys to get the distance between two locations. Please note that, this is not the direction distance. That mean if you select two locations you will get distance, which is going to very less than the travel distance. In-order to do that I have created a simple html page consisting google map with two markers. You can drag the markers as you wish. In the page below the map I have shown the selected locations Latitude and Longitude. After moving the markers you will get the distance.

Have a look on the code. It's simply created using Html and JavaScript.

<html>
 <head>
  <title>Getting The Distance Between Two Markers In Google Map Using Google MAP API</title>
  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,places"></script>
  <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.1.min.js"></script>
 </head>
 <body> 
  <div id="map-canvas" style="height:75%;"></div>
  <div>
   <strong>From Location</strong><br/>
   <span>Latitude : </span>
   <input type="text" id="fromLat"/>
   <span>Longitude : </span>
   <input type="text" id="fromLng"/>
   <br/><br/>

   <strong>To Location</strong><br/>
   <span>Latitude : </span>
   <input type="text" id="toLat"/>
   <span>Longitude : </span>
   <input type="text" id="toLng"/>
   <br/><br/>

   <strong>Distance : </strong>
   <span id="distance">0.00</span>
   <span> meters</span>
  </div>
  <script type="text/javascript">
      var map;
      var fromLat = 6.928940573589038;
      var fromLng = 79.87219331750487;
      var toLat = 6.929110981212029;
      var toLng = 79.87013338098143;

      var fromIcon = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=O|FFFF00|000000';
      var toIcon = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=D|FF0000|000000';

      loadMap();
      setFromMarker();
      setToMarker();

      function loadMap() {
          map = new google.maps.Map(document.getElementById('map-canvas'), {
              mapTypeId: google.maps.MapTypeId.ROADMAP,
              center: new google.maps.LatLng(fromLat, fromLng),
              zoom: 15
          });
      }

      function setFromMarker() {
          var fromMarker = new google.maps.Marker({
              map: map,
              position: new google.maps.LatLng(fromLat, fromLng),
              icon: fromIcon,
              animation: google.maps.Animation.DROP,
              draggable: true
          });

          google.maps.event.addListener(fromMarker, 'dragend', function (event) {
              fromLat = event.latLng.lat();
              fromLng = event.latLng.lng();
              setLatLngDetails();
          });
      }

      function setToMarker() {
          var toMarker = new google.maps.Marker({
              map: map,
              position: new google.maps.LatLng(toLat, toLng),
              icon: toIcon,
              animation: google.maps.Animation.DROP,
              draggable: true
          });

          google.maps.event.addListener(toMarker, 'dragend', function (event) {
              toLat = event.latLng.lat();
              toLng = event.latLng.lng();
              setLatLngDetails();
          });
      }

      function setLatLngDetails() {
          $("#fromLat").val(fromLat);
          $("#fromLng").val(fromLng);
          $("#toLat").val(toLat);
          $("#toLng").val(toLng);
          getDistance();
      }

      function getDistance() {
          var fromLocation = new google.maps.LatLng(fromLat, fromLng);
          var toLocation = new google.maps.LatLng(toLat, toLng);

          var distance = google.maps.geometry.spherical.computeDistanceBetween(fromLocation, toLocation).toFixed(2);
          $("#distance").html(distance);
      }
   
  </script>
 </body>
</html>

Simply copy and paste the above codes in a text editor and it in a browser. You will get the below outputs.

If you carefully read the above code, you will know that I have initialized the from and to locations. If you want to make this code more efficient way, where you want to get the user location as default location. Click Here to check the article.

Check My Other Articles About Google Maps.

1. Creating A Google Map Using Google Map API v3
2. Show Current Location In A Google Map Using Google Map API v3
3. Getting The Address Of Selected Location In Google Map Using Google Map API v3
4. Getting The Selected Latitude And Longitude From Google Map Using Google Map API v3
5. Google Map With Multiple Markers & Info Windows Using Google Map API v3
6. Getting The Direction Between Two Markers In Google Map Using Google MAP API
7. Getting The Direction Between Two Locations Using Google MAP API
8. Getting The Distance Between Two Markers In Google Map Using Google MAP API
9. Getting The Distance Between Two Locations Using Google MAP API
10. Getting The Nearest Places For A Location In Google Map Using Google MAP API
11. Google Map With InfoBubble
12. Google Maps Creating Polygon And Retrieving Coordinates

Aug 13, 2015

Getting The Distance Between Two Locations Using Google MAP API

Following example will help you to get distance between two location using 'googleapi' in java script. Please note that this is distance between two location. This is not the direction to travel or something.

Now lets have a look on code. In this example I have created four text fields to get the Latitude and Longitude of from location and To location.

I have used the online java script library of google map api library.

<html>
 <head>
  <title>Getting The Distance Between Two Locations Using Google MAP API</title>
  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,places"></script>
  <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.1.min.js"></script>
 </head>
 <body> 
  <div>
   <strong>From Location</strong><br/>
   <span>Latitude : </span>
   <input type="text" id="fromLat"/>
   <span>Longitude : </span>
   <input type="text" id="fromLng"/>
   <br/><br/>

   <strong>To Location</strong><br/>
   <span>Latitude : </span>
   <input type="text" id="toLat"/>
   <span>Longitude : </span>
   <input type="text" id="toLng"/>
   <br/><br/>

   <input type="button" value="Calculate Distance" onclick="getDistance()"/>
   <br/><br/>

   <strong>Distance : </strong>
   <span id="distance">0.00</span>
   <span> meters</span>
  </div>
  <script type="text/javascript">
      function getDistance() {
          var fromLocation = new google.maps.LatLng($("#fromLat").val(), $("#fromLng").val());
          var toLocation = new google.maps.LatLng($("#toLat").val(), $("#toLng").val());
          var distance = google.maps.geometry.spherical.computeDistanceBetween(fromLocation, toLocation).toFixed(2);
          $("#distance").html(distance);
      }
  </script>
 </body>
</html>

Just copy the code and create a html file and open in the browser. Enter the Latitude and Longitude of From and To locations and click the 'Calculate Distance' button.

If you want you can improve the code by sending the Latitude and Longitude of From and To locations by using a method and get the distance.

Check My Other Articles About Google Maps.

1. Creating A Google Map Using Google Map API v3
2. Show Current Location In A Google Map Using Google Map API v3
3. Getting The Address Of Selected Location In Google Map Using Google Map API v3
4. Getting The Selected Latitude And Longitude From Google Map Using Google Map API v3
5. Google Map With Multiple Markers & Info Windows Using Google Map API v3
6. Getting The Direction Between Two Markers In Google Map Using Google MAP API
7. Getting The Direction Between Two Locations Using Google MAP API
8. Getting The Distance Between Two Markers In Google Map Using Google MAP API
9. Getting The Distance Between Two Locations Using Google MAP API
10. Getting The Nearest Places For A Location In Google Map Using Google MAP API
11. Google Map With InfoBubble
12. Google Maps Creating Polygon And Retrieving Coordinates

Getting The Nearest Places For A Location In Google Map Using Google MAP API

Following example will help you to develop your own 'Google Map' to get the nearest places of a location by latitude and longitude using java script.

"mylocation" variables contains the location you want to search for places. In this example first it will load the map and center it to your given latitude and longitude. After loading the map it will create the marker in the map of the location searched. This is happening in the "setCurrentLocation()" function. If you want, you can get rid of this method, if you don't want to show your location on the map.

Then we should request details from " google.maps.places.PlacesService". In the request you should specify your location and types. In my example I have used types such as 'train_station', 'bus_station' and 'subway_station'.You can find more types here.

In the request I have specified another parameter called 'rankBy'. This will sort the results your getting. In my example I have specified 'google.maps.places.RankBy.DISTANCE', which will sort the results by nearest to the place search.

Now lets have a look on code.

<html>
<head>
    <title>Getting The Nearest Places For A Location In Google Map Using Google MAP API</title>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,places"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.1.min.js"></script>
</head>
<body>
    <div id="map-canvas" style="height: 100%;"></div>
    <script type="text/javascript">
        var map;
        var infowindow;
        var service ;
        var mylocation = new google.maps.LatLng(6.928940573589038, 79.87219331750487);
        //Set Your Current Location to 'mylocation'
        getGooglePlaces();

        function getGooglePlaces(lat,lng)
        {      
            //load the map
            map = new google.maps.Map(document.getElementById('map-canvas'), {
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                center: mylocation,
                zoom: 15
            });
     
            infowindow = new google.maps.InfoWindow();
            service = new google.maps.places.PlacesService(map);
    
            setCurrentLocation();
  
            var request = {
                location: mylocation,
                rankBy: google.maps.places.RankBy.DISTANCE,
                types: ['train_station','bus_station','subway_station'] 
                //More Types From
                //https://developers.google.com/places/supported_types
            };
            service.search(request, callback_googlePlaces);
        }
   
        function setCurrentLocation() {
            var marker = new google.maps.Marker({
                map: map,
                position: mylocation,
                icon: 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=O|FFFF00|000000',
                animation: google.maps.Animation.DROP
            });

            google.maps.event.addListener(marker, 'click', function() {
                var content='<strong>Current Place</strong>';
                infowindow.setContent(content);
                infowindow.open(map, this);
            });
        }

        function callback_googlePlaces(results, status) {
            if (status == google.maps.places.PlacesServiceStatus.OK) {
                for (var i = 0; i < results.length; i++) {
                    createMarker(results[i]);
                }
            }
        }

        function createMarker(place) {
            var marker = new google.maps.Marker({
                map: map,
                position: place.geometry.location,
                animation: google.maps.Animation.DROP
            });
    
            google.maps.event.addListener(marker, 'click', function() {
                var content='<strong>' + place.name + '</strong><br/>' + '<span>' + place.vicinity + '</span><br/>' + '<span>' + place.types[0] + '</span><br/>' + '<span>' + google.maps.geometry.spherical.computeDistanceBetween(mylocation, place.geometry.location).toFixed(2) + ' meters</span>';
                infowindow.setContent(content);
                infowindow.open(map, this);
            });
        } 
   
    </script>
</body>
</html>

In this example I have used the 'googleapis' online. So no need to include any java script files. Copy the code and save as a html file. Just open the file in the browser. You will see the below result.

If you click the marker you will get a info window which shows you the distance.
Please note that this distance is direct distance. This is not the direction distance.
That mean travelling distance.

Check My Other Articles About Google Maps.

1. Creating A Google Map Using Google Map API v3
2. Show Current Location In A Google Map Using Google Map API v3
3. Getting The Address Of Selected Location In Google Map Using Google Map API v3
4. Getting The Selected Latitude And Longitude From Google Map Using Google Map API v3
5. Google Map With Multiple Markers & Info Windows Using Google Map API v3
6. Getting The Direction Between Two Markers In Google Map Using Google MAP API
7. Getting The Direction Between Two Locations Using Google MAP API
8. Getting The Distance Between Two Markers In Google Map Using Google MAP API
9. Getting The Distance Between Two Locations Using Google MAP API
10. Getting The Nearest Places For A Location In Google Map Using Google MAP API
11. Google Map With InfoBubble
12. Google Maps Creating Polygon And Retrieving Coordinates