Google Maps Polygon Coordinates Tool

google-maps-polygon-coordinates-tool.markdown

Google Maps Polygon Coordinates Tool

Outputs the coordinates (longitude, latitude) for Google Maps whenever the Polygon is moved or re-shaped. Recently added a 'Copy to Clipboard' button and had data output into a textarea for easier copying & pasting

I originally built this to build map outlines for neighborhoods, villages, districts and counties - specifically for real estate purposes.

A Pen by Cauli on CodePen.

License.

index.jade

body(onload="initialize()")
  h3 Drag or re-shape for coordinates to display below (
    a(href="https://github.com/jeremy-hawes/google-maps-coordinates-polygon-tool") Github
    | )
  h3
    a(href="http://codepen.io/jhawes/blog/creating-a-real-estate-polygon-tool") See blog post
  #map-canvas
  .lngLat
    span.one Lat
    span.two ,Lng
button#clipboard-btn(onclick="copyToClipboard(document.getElementById('info').innerHTML)") Copy to Clipboard
textarea#info

script.js

var polygon = [];

//var myPolygon;
function initialize() {
  // Map Center
  var myLatLng = new google.maps.LatLng(-5.737485,-61.438973);
  // 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 triangleCoords1 = [
    new google.maps.LatLng(-5.73407,-61.43932),
    new google.maps.LatLng(-5.76352,-61.43507),
    new google.maps.LatLng(-5.75602,-61.39389)
  ];
  
  var triangleCoords2 = [
    new google.maps.LatLng(-5.73202,-61.44344),
    new google.maps.LatLng(-5.75602,-61.39389),
    new google.maps.LatLng(-5.72193,-61.38672)
  ];
  
  var triangleCoords3 = [
    new google.maps.LatLng(-5.772235,-61.403808),
    new google.maps.LatLng(-5.763269,-61.425392),
    new google.maps.LatLng(-5.756979,-61.394817	)
  ];
  
  var triangleCoords4 = [
    new google.maps.LatLng(-5.66872,-61.46423),
    new google.maps.LatLng(-5.73218,-61.45389),
    new google.maps.LatLng(-5.72111,-61.38726)
  ];
  
  var triangleCoords5 = [
    new google.maps.LatLng(-5.66872,-61.46423),
    new google.maps.LatLng(-5.63413,-61.35673),
    new google.maps.LatLng(-5.72111,-61.38726)
  ];
  
  var triangleCoords6 = [
    new google.maps.LatLng(-5.65779,-61.43093),
    new google.maps.LatLng(-5.63413,-61.35673),
    new google.maps.LatLng(-5.60598,-61.43121)
  ];
  
  // Styling & Controls
  t1 = new google.maps.Polygon({
    paths: triangleCoords1,
    draggable: true, // turn off if it gets annoying
    editable: true,
    strokeColor: '#FF00FF',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF00FF',
    fillOpacity: 0.35
  });
  
    // Styling & Controls
  t2 = new google.maps.Polygon({
    paths: triangleCoords2,
    draggable: true, // turn off if it gets annoying
    editable: true,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });
  
    // Styling & Controls
  t3 = new google.maps.Polygon({
    paths: triangleCoords3, 
    draggable: true, // turn off if it gets annoying
    editable: true,
    strokeColor: '#1eF0F0',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#1eF0F0',
    fillOpacity: 0.35
  });
  
      // Styling & Controls
  t4 = new google.maps.Polygon({
    paths: triangleCoords4, 
    draggable: true, // turn off if it gets annoying
    editable: true,
    strokeColor: '#FFdd00',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FFdd00',
    fillOpacity: 0.35
  });

  // Styling & Controls
  t5 = new google.maps.Polygon({
    paths: triangleCoords5, 
    draggable: true, // turn off if it gets annoying
    editable: true,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });
  
    // Styling & Controls
  t6 = new google.maps.Polygon({
    paths: triangleCoords6, 
    draggable: true, // turn off if it gets annoying
    editable: true,
    strokeColor: '#FFFF00',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FFFF00',
    fillOpacity: 0.35
  });

  
 
  
  t1.setMap(map);
  t2.setMap(map);
  t3.setMap(map);
  t4.setMap(map);
  t5.setMap(map);
  t6.setMap(map);
  
  
  
  polygon = [t1,t2,t3,t4,t5,t6];
  
  for(var i=0; i<polygon.length; i++)
  {
      google.maps.event.addListener(polygon[i], "dragend", getPolygonCoords);
      google.maps.event.addListener(polygon[i].getPath(), "insert_at", getPolygonCoords);
      google.maps.event.addListener(polygon[i].getPath(), "set_at", getPolygonCoords);
  }
  
  getPolygonCoords();

}

//Display Coordinates below map
function getPolygonCoords() {
  var htmlStr = "";
  
  for(var j=0; j<polygon.length; j++)
  {
    var len = polygon[j].getPath().getLength();
       htmlStr += "$triangle"+(j+1) + " = new Triangle(\n";
  
      for (var i = 0; i < len; i++) {
        htmlStr += " array('longitude' => " + polygon[j].getPath().getAt(i).toUrlValue(5).split(",")[0] + ",\n" +
                           "'latitude' => " + polygon[j].getPath().getAt(i).toUrlValue(5).split(",")[1] + ")";
        
        if(i < len-1)
        {
          htmlStr += ",\n";
        }
      }
    
      htmlStr += ");\n\n";
  }
  
  
  document.getElementById('info').innerHTML = htmlStr;
  
}

function copyToClipboard(text) {
  window.prompt("Copy to clipboard: Ctrl+C, Enter", text);
}

scripts

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

style.sass

@import compass

body
  background: #222
h3
  margin: 4px 0
  padding: 5px 0
  font-family: arial, sans-serif
  width: 100%
  color: #fff
a
  font-family: arial, sans-serif
  color: #00B2EE
  text-decoration: none
  &:hover
    color: lighten(#00B2EE, 20%)
#map-canvas
  width: auto
  height: 500px
#info
  color: #222
.lngLat
  color: #fff
  margin-bottom: 5px
  .one
    padding-left: 250px
  .two 
    padding-left: 34px
#clipboard-btn
  float: left
  margin-right: 10px
  padding: 6px 8px
  +border-radius(3px)
#info
  height: 140px
  float: left
  margin-bottom: 30px
  border: solid 2px #eee
  +border-radius(3px)
  +box-shadow(inset 0 2px 5px #444)
#info, .lngLat
  font-family: arial, sans-serif
  font-size: 12px
  padding-top: 10px
  width: 270px