0

I would like to draw an ellipse on google maps based off four coordinates, like the current "rectangle" method available via the API:

var rectangle = new google.maps.Rectangle({
          strokeColor: '#FF0000',
          strokeOpacity: 0.8,
          strokeWeight: 2,
          fillColor: '#FF0000',
          fillOpacity: 0.35,
          map: map,
          bounds: new google.maps.LatLngBounds(
            new google.maps.LatLng(33.671068, -116.25128),
            new google.maps.LatLng(33.685282, -116.233942))
        });

(using the bounds paramater).

If that fails, is there an easy way to convert the distance between 2 polygons to a unit of measurement?

4
  • The number of different ellipses that you can draw inside a rectangle is infinite. You need to define it in some other way.
    – Marcelo
    Oct 31, 2012 at 15:39
  • 1
    But there is only one that touches the four edges of the bounds rectangle (specifying four points and an angle (east-west).
    – geocodezip
    Oct 31, 2012 at 16:48
  • Sorry marcelo, @geocodezip is right though, shoulda specified it
    – rickyduck
    Oct 31, 2012 at 17:06
  • Yes, I wasn't thinking about smaller an smaller ellipses, but about rotated ones, so if you add an angle, or specify that the axis must be parallel to the sides of the rectangle, then there's only one that fits.
    – Marcelo
    Oct 31, 2012 at 18:07

2 Answers 2

3

You have to calculate the path yourself. This should help:

http://mathworld.wolfram.com/Ellipse.html

Edit: This might be more useful:

http://www.geocodezip.com/v3_MW_example_eshapes.html

A v3 port of Mike Williams' v2 eshapes library, supports ellipse (but not based on the bounds).

Working example that sizes to the map bounds.

proof of concept fiddle

code snippet:

var map = null;

var myOptions = {
  zoom: 8,
  center: new google.maps.LatLng(43, -79.5),
  mapTypeControl: true,
  mapTypeControlOptions: {
    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
  },
  navigationControl: true,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"),
  myOptions);

google.maps.event.addListenerOnce(map, "bounds_changed", function() {
  var bounds = map.getBounds();
  var major_axis = google.maps.geometry.spherical.computeDistanceBetween(bounds.getNorthEast(), new google.maps.LatLng(bounds.getSouthWest().lat(), bounds.getNorthEast().lng())) / 2;
  var minor_axis = google.maps.geometry.spherical.computeDistanceBetween(
    new google.maps.LatLng(bounds.getCenter().lat(), bounds.getSouthWest().lng()),
    new google.maps.LatLng(bounds.getCenter().lat(), bounds.getNorthEast().lng())) / 2;

  // === Ellipse ===
  var point = map.getCenter(); // new google.maps.LatLng(43,-78);
  var ellipse = google.maps.Polygon.Ellipse(point, major_axis, minor_axis, 0, "#000000", 2, 1, "#ffff00", 0.5);
  ellipse.setMap(map);
});

// This Javascript is based on code provided by the
// Community Church Javascript Team
// http://www.bisphamchurch.org.uk/   
// http://econym.org.uk/gmap/

// EShapes.js
//
// Based on an idea, and some lines of code, by "thetoy" 
//
//   This Javascript is provided by Mike Williams
//   Community Church Javascript Team
//   http://www.bisphamchurch.org.uk/   
//   http://econym.org.uk/gmap/
//
//   This work is licenced under a Creative Commons Licence
//   http://creativecommons.org/licenses/by/2.0/uk/
//
// Version 0.0 04/Apr/2008 Not quite finished yet
// Version 1.0 10/Apr/2008 Initial release
// Version 3.0 12/Oct/2011 Ported to v3 by Lawrence Ross
google.maps.Polygon.Ellipse = function(point, r1, r2, rotation, strokeColour, strokeWeight, Strokepacity, fillColour, fillOpacity, opts) {
  rotation = rotation || 0;
  return google.maps.Polygon.Shape(point, r1, r2, r1, r2, rotation, 100, strokeColour, strokeWeight, Strokepacity, fillColour, fillOpacity, opts)
}

google.maps.Polygon.Shape = function(point, r1, r2, r3, r4, rotation, vertexCount, strokeColour, strokeWeight, Strokepacity, fillColour, fillOpacity, opts, tilt) {
  var rot = -rotation * Math.PI / 180;
  var points = [];
  var latConv = google.maps.geometry.spherical.computeDistanceBetween(point, new google.maps.LatLng(point.lat() + 0.1, point.lng())) * 10;
  var lngConv = google.maps.geometry.spherical.computeDistanceBetween(point, new google.maps.LatLng(point.lat(), point.lng() + 0.1)) * 10;
  var step = (360 / vertexCount) || 10;

  var flop = -1;
  if (tilt) {
    var I1 = 180 / vertexCount;
  } else {
    var I1 = 0;
  }
  for (var i = I1; i <= 360.001 + I1; i += step) {
    var r1a = flop ? r1 : r3;
    var r2a = flop ? r2 : r4;
    flop = -1 - flop;
    var y = r1a * Math.cos(i * Math.PI / 180);
    var x = r2a * Math.sin(i * Math.PI / 180);
    var lng = (x * Math.cos(rot) - y * Math.sin(rot)) / lngConv;
    var lat = (y * Math.cos(rot) + x * Math.sin(rot)) / latConv;

    points.push(new google.maps.LatLng(point.lat() + lat, point.lng() + lng));
  }
  return (new google.maps.Polygon({
    paths: points,
    strokeColor: strokeColour,
    strokeWeight: strokeWeight,
    strokeOpacity: Strokepacity,
    fillColor: fillColour,
    fillOpacity: fillOpacity
  }))
}
html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map"></div>

4
  • However I seem to get Uncaught TypeError: Object function Eh(a){Dh[Ec](this);this[ub](a);S(Me,Qd)} has no method 'Ellipse' controllers.js:267 on var ellipse = google.maps.Polygon.Ellipse(point..... any ideas?
    – rickyduck
    Oct 31, 2012 at 17:15
  • Did you included the eshapes external javascript (v3_eshapes.js)? You need to copy that to your server at the appropriate path.
    – geocodezip
    Oct 31, 2012 at 17:31
  • Could you please explain what latConv and longConv is? I spent like a day but couldn't understand it. Anyway +1 for the informative answer :) Mar 20, 2021 at 8:08
  • 1
    That is part of the eshapes library. Reference link in the question: econym.org.uk/gmap/eshapes.htm
    – geocodezip
    Mar 20, 2021 at 14:29
1

Not sure if this is what you're looking for, but here's a sample I made(click two points anywhere), it uses a function that takes two latLngs and returns a series of points that describe the ellipse, then adds those to a polygon.

Note that it assumes that the bounding box is relatively small (and away from the poles) to take the points as coplanar.

1
  • Close enough, but geocodezip nails it with his version. Thanks though!
    – rickyduck
    Oct 31, 2012 at 16:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.