javascript – Add google maps map option using gmaps.js

Question:

I would like to know how I could add one more option to the google maps map https://hpneo.github.io/gmaps/examples/map_events.html

For example, next to Satellite add another option that shows me another map (which I have customized). Seeing the doc I see that it can be with events, but they do not specify how to do it.

Answer:

On the page you link to, there is a section called " Map Types " (in the Utils section).

If you go there you will see an example of how you can add a new button (in your case pointing to a map of the same location but from OpenStreetMaps):

map.addMapType("osm", {
  getTileUrl: function(coord, zoom) {
    return "https://a.tile.openstreetmap.org/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
  },
  tileSize: new google.maps.Size(256, 256),
  name: "OpenStreetMap",
  maxZoom: 18
});

As explained on that page (my translation):

You can define many map types from external map services. […] You must define a function called getTileUrl , which returns a URL of the tile depending on the coordinates of the map.

Scroll to Top