CODEWITHSUNDEEP
google-maps
John Doe
John Doe

Reputation: 3243

Google Map: Can I convert a polygon into a drawing manager of a polygon?

I am currently creating polygons on my Google map (Javascript API) and this works fine.

Example:

var myCountyCoords = [This is 187 geo locations]

var myCounty = new google.maps.Polygon({
        paths: myCountyCoords,
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#FF0000',
        fillOpacity: 0.35
    });
myCounty.setMap(map);

Is there a way to convert this polygon to an overlay? (By that I mean as if the user drew this polygon themselves on the map using the Drawing Manager)

Ultimately I am trying to take this polygon (from Javascript API) so that I can create a static map so that the same polygon displays on that static map.

There was code on this board that will accomplish this if the polygon was drawn on using the drawing manager.

Upvotes: 1

Views: 3265

Answers (1)

geocodezip
geocodezip

Reputation: 161384

To answer your direct question, just create the polygon, add it to the map, then push that polygon on the overlays array as an "overlay" object (two properties, the .overlay which is the polygon, and .type which is google.maps.drawing.OverlayType.POLYGON ["polygon"] for a google.maps.Polygon).

var myCounty = new google.maps.Polygon({
  paths: myCountyCoords,
  strokeColor: '#FF0000',
  strokeOpacity: 0.8,
  strokeWeight: 2,
  fillColor: '#FF0000',
  fillOpacity: 0.35,
  map: map
});
myCounty.setMap(map);
var overlay = {
  overlay: myCounty, 
  type: google.maps.drawing.OverlayType.POLYGON
};
overlays.push(overlay);

proof of concept fiddle

If all you need is a single polygon on a static map, pull the code to translate a google.Maps.Polygon to a Static Map (encoded path) out of this question: GMap Drawing tools to image jpeg

code snippet:

var map;

function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(-27.37777, -51.592762),
    zoom: 16
  };

  map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);
  google.maps.event.addListener(map, 'click', function(evt) {
    document.getElementById('info').innerHTML = evt.latLng.toUrlValue(6);
  });
  var bounds = new google.maps.LatLngBounds();
  var myCountyCoords = [];
  for (var i = 0; i < polygonPath.length; i++) {
    var pt = new google.maps.LatLng(polygonPath[i][0], polygonPath[i][1]);
    myCountyCoords.push(pt);
    bounds.extend(pt)
  }
  map.fitBounds(bounds);
  var myCounty = new google.maps.Polygon({
    paths: myCountyCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    map: map
  });
  myCounty.setMap(map);
  createStaticMap(myCounty);
}

google.maps.event.addDomListener(window, 'load', initialize);

function createStaticMap(polygon) {
  var fillC, strokeC, weight, path;

  var staticMap = "https://maps.googleapis.com/maps/api/staticmap?size=512x512&maptype=roadmap";
  path = encodeURIComponent(google.maps.geometry.encoding.encodePath(polygon.getPath()));
  fillC = polygon.get("fillColor");
  strokeC = polygon.get("strokeColor");
  weight = polygon.get("strokeWeight");
  staticMap += "&path=";
  if (typeof fillC != "undefined") staticMap += "fillcolor:" + fillC.replace(/#/, "0x");
  if (typeof weight != "undefined") staticMap += "%7Cweight:" + weight;
  else staticMap += "%7Cweight:0";
  if (typeof strokeC != "undefined") staticMap += "%7Ccolor:" + strokeC.replace(/#/, "0x");
  staticMap += "%7Cenc:" + path;
  document.getElementById('staticMap').innerHTML = staticMap;
  document.getElementById('imageholder').innerHTML = "<img src='" + staticMap + "' alt='static map' / > ";
  document.getElementById('urllen').innerHTML = "URL length =" + staticMap.length + " characters";

}
var polygonPath = [
  [-27.374244, -51.594844],
  [-27.375959, -51.593041],
  [-27.374892, -51.591496],
  [-27.375807, -51.589909],
  [-27.377598, -51.590595],
  [-27.376988, -51.593342],
  [-27.378665, -51.593771],
  [-27.379237, -51.591067],
  [-27.380875, -51.591454],
  [-27.380609, -51.59287],
  [-27.38198, -51.59317],
  [-27.381447, -51.59523],
  [-27.380189, -51.59493],
  [-27.380151, -51.595616],
  [-27.376836, -51.594758],
  [-27.376569, -51.595531]
];
html,
body,
#map-canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<div id="imageholder"></div>
<div id="urllen"></div>
<div id="info"></div>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>
<div id="staticMap"></div>

Upvotes: 2

Related Questions