Create Complex polygon on GMap using Google Maps API v3

In this Section, I will show you how to create polygon on gmap using Google Maps API v3 that has complex edges.This example creates polygon using polyline based on user clicks.I have written this script to create complex geofences.

This example provides everything you need to draw polylines and polygons.You can use the search box to search & zoom location on the map .

How to Draw polygon on Gmap using Google Maps API v3. :

1. Click on the gmap to add a Marker.
2. Click on a Marker to remove it.
3. Drag a Marker to move it.


Getting Started :

/**
 * Include the Google Maps API JavaScript using a script tag.
*/

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

/**
* The following code instructs the application to load the Maps API after the page has fully loaded .
*/


 function initialize() {
 
    map = new google.maps.Map(document.getElementById("gmap"), {
      zoom:13,
      center: new google.maps.LatLng(18.520430, 73.856744),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    p = new google.maps.Polygon({
      strokeWeight: 3,
      fillColor: '#5555FF'
    });
    p.setMap(map);
    p.setPaths(new google.maps.MVCArray([path]));

    google.maps.event.addListener(map, 'click', addMarker);
  }

 /** 
* Handles click events on a map, and adds a new point to the Polyline.
*/
   
    function addMarker(event) {
    path.insertAt(path.length, event.latLng); //The path element used to draw polygon and polylines.


    var marker = new google.maps.Marker({
      position: event.latLng,
      map: map,
      draggable: true
    });
    markers.push(marker);
 
    google.maps.event.addListener(marker, 'click', function() {
      marker.setMap(null);
      for (var i = 0, I = markers.length; i < I && markers[i] != marker; ++i);
      markers.splice(i, 1);
      path.removeAt(i);
      }
    );

   google.maps.event.addListener(marker, 'dragend', function() {
      for (var i = 0, I = markers.length; i < I && markers[i] != marker; ++i);
      path.setAt(i, marker.getPosition());
      }
    );
  }


 /**
* Search and Zoom Location on Map.
*/

  function findAddress(address) {
        if (!address)
    var address=document.getElementById("address").value;

    if ((address != '') && geocoder) {
      geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
           if (results && results[0] && results[0].geometry && results[0].geometry.viewport)
             map.fitBounds(results[0].geometry.viewport);


          } else {
            alert("No results found");
          }
        } else {
          alert("Geocode was not successful for the following reason: " + status);
        }
      });
    }

  }


Example :


<html>
<title>Create Complex polygon on Gmap using Google Maps API v3</title>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  var poly, map;
  var markers = [];
  var path = new google.maps.MVCArray;
  var geocoder = new google.maps.Geocoder();

  function initialize() {
 
    map = new google.maps.Map(document.getElementById("gmap"), {
      zoom:13,
      center: new google.maps.LatLng(18.520430, 73.856744),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    p = new google.maps.Polygon({
      strokeWeight: 3,
      fillColor: '#5555FF'
    });
    p.setMap(map);
    p.setPaths(new google.maps.MVCArray([path]));

    google.maps.event.addListener(map, 'click', addMarker);
  }

  function addMarker(event) {
    path.insertAt(path.length, event.latLng); //The path element used to draw polygon and polylines.


    var marker = new google.maps.Marker({
      position: event.latLng,
      map: map,
      draggable: true
    });
    markers.push(marker);
 
    google.maps.event.addListener(marker, 'click', function() {
      marker.setMap(null);
      for (var i = 0, I = markers.length; i < I && markers[i] != marker; ++i);
      markers.splice(i, 1);
      path.removeAt(i);
      }
    );

   google.maps.event.addListener(marker, 'dragend', function() {
      for (var i = 0, I = markers.length; i < I && markers[i] != marker; ++i);
      path.setAt(i, marker.getPosition());
      }
    );
  }


function findAddress(address) {
        if (!address)
    var address=document.getElementById("address").value;

    if ((address != '') && geocoder) {
      geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
           if (results && results[0] && results[0].geometry && results[0].geometry.viewport)
             map.fitBounds(results[0].geometry.viewport);


          } else {
            alert("No results found");
          }
        } else {
          alert("Geocode was not successful for the following reason: " + status);
        }
      });
    }
  }


</script>
</head>
<body style="margin:0px; padding:0px;" onLoad="initialize()">

  Find Place: <input type="text" id="address"/><input type="button" value="Go" onClick="findAddress()">
   <div id="gmap" style="width:100%; height: 580;"></div>
</body>
</html>



This Example will help you to create any shape of polygons on gmap.In next article, I will show you how to integrate Gmaps in Drupal.