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 Jeremy Hawes on CodePen.

License.

index.pug

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", target="_blank") Github
    | )
  h3
    a(href="https://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 myPolygon;
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.event.addListener(myPolygon, "dragend", getPolygonCoords);
  google.maps.event.addListener(myPolygon.getPath(), "insert_at", getPolygonCoords);
  //google.maps.event.addListener(myPolygon.getPath(), "remove_at", getPolygonCoords);
  google.maps.event.addListener(myPolygon.getPath(), "set_at", getPolygonCoords);
}

//Display Coordinates below map
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) + "), ";
    //Use this one instead if you want to get rid of the wrap > new google.maps.LatLng(),
    //htmlStr += "" + myPolygon.getPath().getAt(i).toUrlValue(5);
  }
  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&amp;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