Recently I did some work for a company which needed some polygons drawn on Google Maps that would drill down over a series of pages starting large and narrowing in size as a visitor clicked: villages to communities and finally individual neighborhoods. The outline of these various geographics were very specific and you simply had to know the region well (along with have some accurate drawings) to know precisely how these were set up.

It's not difficult to create a polygon in Google Maps, but to know the coordinates of where each angle of the polygon was needed is a bit more challenging since I didn't know what they were and neither did the client. I didn't want to drive out there, of course, so the best alternative I could think of was to build them a tool - let them draw out the polygon and send me back the Lng/Lat coordinates.

I began to build it with an extremely simple/standard layout (really nothing complicated here, only using preprocessors to make the code shorter and quicker for myself):

Jade

  script(src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false")
body(onload="initialize()")
  #map-canvas
  .lngLat
    span.one Lat
    span.two ,Lng
  #info

Sass

  #map-canvas
  width: auto
  height: 500px
#info
  color: #ffc
.lngLat
  color: #fff
  .one
    padding-left: 210px
  .two 
    padding-left: 34px
#info, .lngLat
  font-family: arial, sans-serif
  font-size: 18px
  padding-top: 10px

JavaScript

  function initialize() {
  // Map Center
  var myLatLng = new google.maps.LatLng(33.5190755, -111.9253654);
  // General Options
  var mapOptions = {
    zoom: 12,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.RoadMap
  };
  var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
  // Polygon Coordinates
  var triangleCoords = [
    new google.maps.LatLng(33.5362475, -111.9267386),
    new google.maps.LatLng(33.5104882, -111.9627875),
    new google.maps.LatLng(33.5004686, -111.9027061)
  ];
  // Styling & Controls
  myPolygon = new google.maps.Polygon({
    paths: triangleCoords,
    draggable: true, // turn off if it gets annoying
    editable: true,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });

  myPolygon.setMap(map);
}

Google Maps Polygon - stage 1

Pretty good so far. I can create my map center and a polygon with three starting coordinates (too add or more coordinates simply copy and paste). Also, my map takes advantage of Google's draggable feature and the polygon can increased in size by simply dragging out the circles in between coordinates. I also warn the user that they can turn off draggable, which could get annoying if it's a large shape and they don't want to accidently move it while making a polygon.

It's great for my client now, but not so great for me. I really need to copy and paste the coordinates they make back into my own Google Maps call, which is going to change for every page/instance.

First I need to add a couple event listeners so that when changes happen I can capture them.

JavaScript

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

Second I need to take those coordinates and render them out as HTML and text.

JavaScript

  function getPolygonCoords() {
  var len = myPolygon.getPath().getLength();
  var htmlStr = "";
  for (var i = 0; i < len; i++) {
    htmlStr += "new google.maps.LatLng(" + myPolygon.getPath().getAt(i).toUrlValue(5) + "),<br>";
  }
  document.getElementById('info').innerHTML = htmlStr;
}

Google Maps Polygon - stage 2

NICE! That did it for me... I'm sure there is more amazing ways to get this done, but for simplicity and time this really did the trick. My client can now build any shape/size polygon and copy and paste the coordinates, send it to me and I can create an exact duplicate of the polygon.

Final Product


I would have embedded the example, but Google Maps isn't showing on embeds for me