How to center iframe map on a placename

This article demonstrates how to insert maps into websites with an iframe and center the map on a given placename. 

A standard map displayed with an iframe can look like this:

How to center the map on a placename

The easiest way to add a map to your website is through an iframe. You will need a MapTiler Cloud API key. Your MapTiler account access key is on your MapTiler Cloud account page or Get API key for FREE.

If you simply want to add a map to a website without the need to center it on a placename, check out the article Insert maps in websites with a simple iframe.

To center the map on a placename, we need to use a geocoding service that is capable of transforming a place name into coordinates. Map viewers built into the MapTiler Cloud do not have that functionality. (We want those viewers to be fast and simple). We have developed a sample viewer that has the functionality of transforming a place name into coordinates. For this, we use the MapTiler Cloud API geocoding service.

The viewer is open source and you can find it in this Github repository, so you can adapt it to your needs to integrate it into your web pages or use this viewer directly in an iframe. 

We have made the viewer parameterizable so that you can search for place names in all your maps and tilesets that you have in the MapTiler Cloud.

The parameters supported by the viewer are:

  • q: place name to be searched for. (ex. London). The “auto” value center the map
    in the geolocation provided by modern browsers
  • type: type of map you want to load. Valid values are:
    • maps (for maps)
    • tiles (for tileset)
  • id: map identifier
  • key: your API key

Examples of how to use the viewer in an iframe

Tileset UK Great Britain, Ordnance Survey one-inch to the mile (1:63.360), “Hills” edition, 1885-1903. centered on London.

<iframe src="https://www.maptiler.com/nls/placename/?q=london&type=tiles&id=uk-osgb63k1885&key=YOUR_API_KEY_HERE" width="500" height="300" frameborder="0"></iframe>

In the example above:

  • q = london
  • type = tiles
  • id = uk-osgb63k1885

Winter map with ski slopes centered on Val Thorens

<iframe src="https://www.maptiler.com/nls/placename/?q=val%20thorens&type=maps&id=winter&key=YOUR_API_KEY_HERE" width="500" height="300" frameborder="0"></iframe>

In the example above:

  • q = val thorens
  • type = maps
  • id = winter

Streets map centered on the geolocation provided by browsers

If instead of indicating the placename we want the map to focus on the geolocation provided by modern browsers, we must put the auto keyword in the q parameter.

Please read carefully Feature-Policy: geolocation to to use the auto option in an iframe as it is an experimental technology. 
<iframe src="https://www.maptiler.com/nls/placename/?q=auto&type=maps&id=streets&key=YOUR_API_KEY_HERE" width="500" height="300" frameborder="0" allow="geolocation"></iframe>

In the example above:

  • q = auto
  • type = maps
  • id = streets

Check the live example:

You must enable the location sharing function in the browser to make it work.