Making displayed Map more simple

Hi,
Is there any way to remove the Satelite/Plan options button from a G. Map ?
That way user cannot switch from Satelite view to map…
tkx

Hey @ericterii

Sure, this can be achieved with some simple CSS on the page where the map is present.

Draw out your Map element and set the ‘Map Type’.

Then on the main page’s editor, go to the section ‘Page HTML Header’ and insert the following code:

<style>
.gm-style-mtc {
	display: none !important;
  }
</style>

It should look like this…

image

So the map without the code displays with the controls like so…
image

And then with the code in place…
image

Job done.

You could alternatively add this code into the ‘Settings’ > ‘SEO / metatags’ > ‘Advanced settings’ > ‘Script in body’ and paste the code just in there. This would be ideal when you are using a map element across multiple pages and wish to hide the Map & Satellite controls.

7 Likes

Great Luke & thanks a ton :slight_smile:
its gone look much better…

Hi,
Its working !..
the Map display is fine but i keep on geeting this “for development purpose only”
:sunglasses:
Is there a Key for dev and an other type of key for production use ?
map%20for%20dev

Good stuff.

As for the ‘For development purposes only’ watermarking over the map, this is because Google now requires everyone to get their own app API key for using Google Maps. Its essentially Google’s way of tracking websites/apps that have high usage for API calls on their Maps product. They will then charge owners for usage when they go over a certain limit, but this limit generally aimed at very high traffic sites.

To acquire the keys it will essentially require you to have a Google account, sign up for the Google Maps Platform and enter billing information. You get a free amount of API requests each month, so you wont be charged until you go over a threshold.

More information here from Google regarding the matter. Also on this page you can click the ‘Get Started’ to proceed with setting up and generating an API key for your app.

You can enter the API keys within your app by going to: Settings > General Services API Keys

image

This video will further explain and help for implementation. Kudos to @dan1 for his video on implementing the Google Maps API keys:

3 Likes

This topic was automatically closed after 70 days. New replies are no longer allowed.