Google Maps Restricting Map Bounds

[jefeoliveira22]

I want to limit maps plugin to a area
I’m following this tutorial here Restricting Map Bounds but it does not work inside my page, what am i doing wrong here?

Here is my code on page body:

<script>
const AUCKLAND = { lat: -37.06, lng: 174.58 };
const NEW_ZEALAND_BOUNDS = {
  north: -34.36,
  south: -47.35,
  west: 166.28,
  east: -175.81,
};
function initMap(){
var map = new google.maps.Map(document.getElementById('mymap'), {
    clickableIcons: false,
    center: AUCKLAND,
    restriction: {
      latLngBounds: NEW_ZEALAND_BOUNDS,
      strictBounds: true,
    },
    zoom: 7,
});};
window.initMap = initMap;
</script>

[flusk]

Hey @jefeoliveira22

Is this the error you are getting?

If so, you should put your google maps API key while including the JS file (this is the one in the tutorial):

AND you should let the URL of the Bubble App added to the list of apps that can use the API key.

I did these and the tutorial link in your post worked.

Here is the editor if you want to check details (I have removed my key from the html element, so it won’t work currently): Bubble Demos by Flusk | Bubble Editor

@Huseyin from Flusk | Discover the #1 Security and Monitoring Tool for Bubble

[jefeoliveira22]

Thank you for your answer!
Well… actually what i’m trying to do is to “modify” my bubble built in maps plugin, to restrict to that region.

If that is not possible then i will work with a separate element (html / js)

[flusk]

I see. That might be trickier than it looks. But hey, you try and let us know

@Huseyin from Flusk | Discover the #1 Security and Monitoring Tool for Bubble