[GIS] How to implement Google Maps API V3 Image Map Type

google-maps-api

I'm new to the Google Maps API V3 and I am trying to add a set of map tiles via the image map type. I followed the steps in this article, and have had no dramas creating the Tileset. I used GDAL2TILES and the the tilesets looks as expected in the preview apps that are generated with the program.

However I cannot get the tilset to show up in my google maps application. My implementation of the Image map type looks like this below

    //The index.html and 'sma_map_1989' folder are in the same directory 
    var smaMapOverlay = new google.maps.ImageMapType({
      getTileUrl: function(coord, zoom) {
        return 'sma_map_1989' + '/' +zoom+ '/' +coord.x+ '/' + coord.y +'.png';
      },
      tileSize: new google.maps.Size(256, 256)
    });
    map.overlayMapTypes.push(smaMapOverlay);

Am I missing something here? It's such a simple thing to do in leaflet and Openlayers.

Best Answer

This stack exchange post solved my problem Google Maps V3 Custom tiles.

My issue was related to the line map.overlayMapTypes.insertAt(0, maptiler); which defines a z-index and the MapType to load. So previously I think the tileset was drawing but not displayed as the top most layer.

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] Fetching Google Map tile without using Google Maps API

You cannot directly access the tiles without circumventing the T&C of Google's API.

If you want the map as an image you can do that with Google Maps Static API.

Best Answer

Related Solutions

[GIS] reset “latlng” coordinates on Google Maps

[GIS] Fetching Google Map tile without using Google Maps API

Related Question