[GIS] Google Maps Ground Overlay: How to calculate bounds

googlegoogle mapsgoogle-maps-api

I'm working with the Google Maps API for the first time and I'm trying to append a simple image of a Building on top of my current map view.

This seems to be very straight forward when I look at the GMapsAPI here …
https://developers.google.com/maps/documentation/javascript/overlays#GroundOverlays

However, I have no idea how to calculate the bounds and the exact position of my overlay.

As you can see in the documentation the position of the ground overlay is done via LatLng

var imageBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(40.716216,-74.213393),
    new google.maps.LatLng(40.765641,-74.139235));

In my case I have no idea how to calculate those bounds. What are those values exactly? Why are there two seperate LatLng positions needed?

I have a simple .png of a building that I want to layer on top of an exact position. I get this position by entering the destination in Google Maps and reading the Lat and Lng values from the embed-code.

Is there a better way of doing this? Any ideas, tipps or tricks on how I could do this?

Or is it possible to calculate those bounds when I know the center of the image-position and the dimesions of my image file? (My image is 50x50px and a .png)

Best Answer

You can use 'LatLng Marker' Google Map in Map Labs mode to find the Coordinates for your image.

Bottom Left is first, Top right is the second coordinate.

enter image description here

var imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(40.716216,-74.213393), 
new google.maps.LatLng(40.765641,-74.139235));

Related Solutions

[GIS] reset “latlng” coordinates on Google Maps

It is actually possible to place your top left corner at 0,0 and your bottom right at 50,50, if you want this. Of course you can place bottom right corner at 10,10, too, or whatever, within the limits: -90/+90 for latitude and -180/+180 for longitude.

The proportion should be:

/*
****************************************** 
Custom Projection - CARTESIAN
******************************************
*/

function CartesianProjection() {
    // map size at zoom 0 is equal to tile size
    this.tileSize = 256;
};

CartesianProjection.prototype.fromLatLngToPoint = function(latLng) {
    var x = (latLng.lng() / 50) * this.tileSize;
    var y = (latLng.lat() / 50) * this.tileSize;
    return new google.maps.Point(x, y);
};

CartesianProjection.prototype.fromPointToLatLng = function(point, noWrap) {
    var lng = (point.x / this.tileSize) * 50;
    var lat = (point.y / this.tileSize) * 50;
    return new google.maps.LatLng(lat, lng, noWrap);
};

Then you should place the center of the map to LatLng(25,25) in the Map options.

[GIS] How to get a GML overlay on Google Maps

Try installing QGIS, and then installing the OpenLayers plugin from within the Plugin manager in QGIS. Via this you can load a Google hybrid layer as background. Here is some info and a guide:

http://www.digital-geography.com/qgis-plugins-openlayers/#.VCFqs5R_tTI

Beware though that in the latest version of QGIS, you will find the OpenLayers plugin, once installed, under the menu named Web, rather than plugins.

After that you can try to add your GML file as a regular vector layer in QGIS. If 'on the fly reprojection' is on it should match up with the background map.

I'm not sure how much of an error the reprojection from the original coordinate system to the Google maps Pseudo Mercator will create however.

Related Question