Google Maps API 3: Calculating length of polygon in pixels

1
votes

I have 2 (lat,lng) markers in a map called: p1 and p2. I need to calculate the length of the polygon that goes from p1 to p2 in pixels.

This is my current solution by getting the hypotenuse value:

//set global variables
var pixel_coordinates = [];
var overlay;

//create map
map = new google.maps.Map(document.getElementById('map'),myOptions);

//create overlay using this solution http://stackoverflow.com/questions/1538681/how-to-call-fromlatlngtodivpixel-in-google-maps-api-v3
function MyOverlay(options) {
    this.setValues(options);
    var div = this.div_= document.createElement('div');
    div.className = "overlay";
};
MyOverlay.prototype = new google.maps.OverlayView;
MyOverlay.prototype.onAdd = function() {
var pane = this.getPanes().overlayLayer;
    pane.appendChild(this.div_);
}
MyOverlay.prototype.onRemove = function() {
    this.div_.parentNode.removeChild(this.div_);
}
MyOverlay.prototype.draw = function() {
    var projection = this.getProjection();
    var position = projection.fromLatLngToDivPixel(this.getMap().getCenter());
    var div = this.div_;
    div.style.left = position.x + 'px';
    div.style.top = position.y + 'px';
    div.style.display = 'block';
};
overlay = new MyOverlay( { map: map } );

//fill x,y coordinates (from lat/lng points)
pixel_coordinates[0] = overlay.getProjection().fromLatLngToContainerPixel(p1);
pixel_coordinates[1] = overlay.getProjection().fromLatLngToContainerPixel(p2);

//calculate hypotenuse
var distance = Math.round(
    Math.sqrt(
        Math.pow(Math.abs(pixel_coordinates[0].x - pixel_coordinates[1].x),2)
        +
        Math.pow(Math.abs(pixel_coordinates[0].y - pixel_coordinates[1].y),2)
    )
);
console.log(pixel_coordinates[0].x + ', ' + pixel_coordinates[0].y);
console.log(pixel_coordinates[1].x + ', ' + pixel_coordinates[1].y);
console.log(distance);

The problem is that the pixel_coordinates is receiving pixel coordinates that do not match the original p1 and p2 points in the map. Can someone spot the error?

Update: it works already, just be sure to use the map.fitBounds(viewport) before calculating the pixel coordinates :)

2
javascriptjquerygoogle-maps-api-3
Is your question still valid then, or did you solve it? If you fixed it, you should probably close it, or post your own answer and mark as correct. – nrabinowitz
sorry, this is the first time that i solve the issue just minutes away from posting. The code work, there is no solution per se, just follow the update instructions (avoid using fitBounds after the getting the fromLatLngToContainerPixel data. – Andres SK

2 Answers

0
votes

The code above works, just avoid using fitBounds after the getting the fromLatLngToContainerPixel data.

0
votes

Every Polyline has leg(s) and every leg has steps. Every Steps contains contain start lat_lng and end lat_lng. calculating distance between these two points give you exact pixel distance.

function getPixelDistance( polyline ){
    var legs = polyline.legs;
    var steps;
    var distance = 0;
    for( var k = 0; k < legs.length; k++){
       steps = legs[k].steps;
       for( var i = 0; i < steps.length; i++ ){     

           distance += getDistance( steps[i].start_location, steps[i].end_location );
       }
    }    
     return distance;    
}     

    function getDistance( p1, 2 ){
      var pixel_coordinates = [];  
      overlay = new MyOverlay( { map: map } );
      pixel_coordinates[0] = overlay.getProjection().fromLatLngToContainerPixel(p1);
      pixel_coordinates[1] = overlay.getProjection().fromLatLngToContainerPixel(p2);
      var distance = Math.round(
          Math.sqrt(
             Math.pow(Math.abs(pixel_coordinates[0].x - pixel_coordinates[1].x),2)
             +
             Math.pow(Math.abs(pixel_coordinates[0].y - pixel_coordinates[1].y),2)
            )
        );
      return distance;
    }