topic Re: How to remove certain options from an embedded google map? in Blog, Website & Page Publishing

How to remove certain options from an embedded google map?

ajpalmer — Wed, 26 Feb 2020 17:10:39 GMT

Hello,

I've recently been tasked with creating a landing page to host a confidential map. I used an html module and embedded it straight from google, but it came with options that aren't featured on the map itself when viewed from the source. It allows people to share, star and look at later, or open in large view which leads away from the gated page. All of these options defeat the whole purpose of the page. Is there any way to remove these options from the bar at the top? I've looked at the code and it only shows options for what it links to and its size.

Thank you!

Re: How to remove certain options from an embedded google map?

alyssamwilie — Thu, 27 Feb 2020 06:44:44 GMT

@ajpalmer

On the page you've placed the map, if you right click > Inspect to open the browser dev tools you can look at the code the embed creates, find the elements you want removed and what classes/ids they're using, and use CSS to hide them.

Re: How to remove certain options from an embedded google map?

mike-ward — Thu, 27 Feb 2020 13:15:12 GMT

@ajpalmer

Generally, if you're using the Google Maps Embed functionality, the customization options are a little limited. You can try manually hiding the controls as per @alyssamwilie, but an alternative would be to use the Google Maps Javascript API. It's a little bit more of a technical set up, but it gives a huge amount of customization options.

You'll need a Google Cloud Platform Console account and to enable billing in order to use this and get an API key, but there's an extremely generous free tier (first $200 a month is free). I've never paid a cent for any Google Maps activity on any of mine or my clients' sites. Unless you'll be getting 20,000+ page views a month you almost certainly don't need to worry about it!

Have a look at the Overview example code in the documentation and you can then add one line just to entirely disable the UI, like this:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -33, lng: 151},
    disableDefaultUI: true
  });
}

And there's some more detail on that in the Controls section of the docs.

If you just need a static image (i.e. no interaction at all) you can even use the Static Maps API, which is even easier and just renders as an image on your page. The free usage tier for that would be around 100,000 page views a month.

Have fun, hope that helps!

Re: How to remove certain options from an embedded google map?

ajpalmer — Thu, 27 Feb 2020 15:45:06 GMT

@alyssamwilie I don't know much about coding but I was able to delete the elements! Thank you!

Unfortunately, I have no idea how to save them to make the changes effective. I've followed a few tutorials online but I keep running into errors with access being denied when attempting to add a folder then selecting it as a source.

Re: How to remove certain options from an embedded google map?

ajpalmer — Thu, 27 Feb 2020 15:47:22 GMT

@mike-ward Thank you so much for the in-depth response! I may end up having to pursue this option.

I've been doing a bit of research since seeing your comment, but a lot of it goes over my head if I'm being honest. Is there any chance you happen to know off the top of your head if all sharing and copying function can be removed with this subscription?

Re: How to remove certain options from an embedded google map?

mike-ward — Thu, 27 Feb 2020 15:58:02 GMT

@ajpalmer with the Static map, yes, I'm pretty sure by default it doesn't have any controls of any kind. It's just a map image. If you're not really familiar with Javascript or coding elements then I would say this is the easiest way to go!

With the Javascript API, as per the code above, if you initialize it that way there will be no overlays of any kind on the map. Users can still pan and ctrl+scroll/pinch to zoom, but there would be nothing on the top. But it does need a litle more know-how to get it implemented.

Re: How to remove certain options from an embedded google map?

ajpalmer — Thu, 27 Feb 2020 16:03:28 GMT

@mike-ward So the map that was created shows overlays that were created to show future developments around the city. Does that mean that those will disappear as well?

Thanks!

Re: How to remove certain options from an embedded google map?

mike-ward — Thu, 27 Feb 2020 16:16:15 GMT

@ajpalmer yep.

If you look at the Static Maps code, they're actually embedded in the URL. See these bits:

&markers=color:blue%7Clabel:F%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318
&markers=color:red%7Clabel:C%7C40.718217,-73.998284

That's what is adding those markers.

Take that out -- no markers! E.g.

https://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap&key=YOUR_API_KEY

You can change the size as necessary (the one above will be 600x300 pixels) as well as the zoom number to change how zoomed in you want to be.

Re: How to remove certain options from an embedded google map?

ajpalmer — Thu, 27 Feb 2020 16:55:00 GMT

@mike-ward Sorry if I'm not understanding, but what I'm getting is that the map placed into that API would lose all of its current overlays.

Can I add those back in or would the new map be a single location with a zoom option only?

Thank you!

Re: How to remove certain options from an embedded google map?

mike-ward — Thu, 27 Feb 2020 17:12:45 GMT

@ajpalmer

Can you clarify what you mean by an 'Overlay' here? Do you mean a marker on the map?

Or do you mean like zoom controls, the fullscreen button etc... that normally comes on Google Maps?

If you're using the Static Maps API, what will show on your site is just an image. It will not be interactive in any way and will therefore not have any of the controls. You can still include markers though, like in the example on the Google site.

If you use the Javascript API, it will be an interactive map - where users can scroll, pan, zoom etc... and you can control pretty much everything about how it is displayed, ie. which controls, the colours of the roads, which points of interest are included etc... And you can also add markers onto the map too to highlight what you need to.

Sorry if I'm not understanding you too! If you could provide a screenshot of exactly what you're looking to achieve, or an example from another site, that would be useful 🙂

Re: How to remove certain options from an embedded google map?

ajpalmer — Thu, 27 Feb 2020 17:27:17 GMT

@mike-ward I think it would fall under markers? Here's a zoomed-in portion.

It's sounding like the Javascript option might just be what I need since I'll want to remove some functions but keep others.

Thanks!

Re: How to remove certain options from an embedded google map?

mike-ward — Fri, 28 Feb 2020 12:02:49 GMT

@ajpalmer yep, I would recommend the Javascript API for flexibility. You can really drill into the setup options if needed to get exactly what you need!

Re: How to remove certain options from an embedded google map?

ajpalmer — Fri, 28 Feb 2020 15:13:31 GMT

@mike-ward That's what I'll go with then, thanks so much for answering all of my questions. I really appreciate it!