How do I implement Google Maps API V3 Image Map Type?

Question

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.

Are requests being made to your tilesets? do you see any errors in Firebug/developer console of your broswer? — Devdatta Tengshe, Jun 02 '14 at 11:21
Yes the requests are being made - I see a lot of errors relating to tiles that are not in the tileset, but at the same time it doesn't draw the tiles that I have in there. I can share the code with you privately if that helps. — Andrew Jeffrey, Jun 02 '14 at 21:55

score 0 · Answer 1 · answered Sep 14 '18 at 18:03

I use open street map tile, sample

 z= zoom  
 x= coord.x  
 y= coord.y

https://tile.openstreetmap.org/10/261/380.png

https://tile.openstreetmap.org/${z}/${x}/${y}.png

For tile, you should use ImageMapTypes, then use map.overlayMapTypes.push(imageMapType); or map.overlayMapTypes.insertAt( 0, new CoordMapType(new google.maps.Size(256, 256)));

to add new tile layer over the google base layer.

You can set opacity by :

 // for old api

 //map.overlayMapTypes[0].setOpacity(0.25);





   //for 3.28 api  (in 2018)

   map.overlayMapTypes.getAt(0).setOpacity(0.5);

here is my working example jsfiddle, for overlay tile use ImageMapTypes

sample: use coordMapType instead of ImageMapTypes

score 0 · Accepted Answer · edited May 23 '17 at 12:39

0

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.

edited May 23 '17 at 12:39

Community

1

answered Jun 02 '14 at 22:52

Andrew Jeffrey

1,566
10
19

How do I implement Google Maps API V3 Image Map Type?

2 Answers2