Streaming live at 10am (PST)

Google maps styling and location not working

Hi there,

I’ve been trying to use the new google maps systems. I’ve implemented the map on my contactpage with API key, I added the custom URL for styling so that it would look different, however this till thus far hasnt worked. I dont know where to paste the JSON code, which is the first of my problems. The map doesnt load all together and the pages gives the error “Refused to execute as script because image/png is not a script MIME type.”

So my custom maps isnt displaying and when it is, I cant get the location right. I get a longitude and altitude coordinate from maps itself, when I feed it in it says its right from the coast of africa, that’s ofcourse not right. the location needs to be: 43 Rue de Bourg, Magnet, France.

Any hints as to get the map to work as well as to get the location right?

My website is chateauretreats.com/contact / chateauretreats.webflow.com/contact

Share only link:
https://preview.webflow.com/preview/chateauretreats?utm_source=chateauretreats&preview=8455401913b195a72f057d5a69403a0d

There is a map on the contactpage, that is the standardmap, below it is the invisible embedded map. Hope someone can help me out with this one, maps just became pretty complicated.

Try to clear cache or test on incognito mode (Looks fine to me).

Map url:
https://www.google.com/maps/dir//46.2150966,3.5021201/@46.2150966,3.4999314,17z

Maybe add screenshot of the problem.

Hi there,

As mentioned, there is a fully functional standard map on the page, below it is the map that is not working (therefore not displaying at all). So if you use inspect on the page you can see the lost map.

Kind regards,
Kevin

@rileyrichter I used this to create some custom code for styling (but wasn’t able to figure out where this logically fits in the webflow page) https://mapstyle.withgoogle.com/, I used that in combination with the code that I believe I got here: https://developers.google.com/maps/documentation/javascript/adding-a-google-map

I dont know exactly what the correct way is but if there’s a way to implement a map and style it, please tell me. I’ll willingly delete all the custom code and use your method if necessary.

Hi @doksontwerpburo,

I believe your Google Maps source script containing your API key (most probably invalid) also contains style references which should be in the javscript snipet and not referenced in the script source itself.

I rebuild a custom map in Codepen for you.
https://codepen.io/anthonysalamin/pen/pmNryx

You suggest you use this structure and also, don’t forget to specify the width and height (with css) of your #map div… otherwise Google map doesn’t know how to render/paint the map.

Also, your API key seems invalid - I tried with mine within the codepen I wrote, was working fine.
You might want to try get a new API key and give it another try.

Hope that helps.

1 Like

Hey Anthony,

Thanks so much for your response! I tried to get to work with it (it took me a while to get to it) but now the codepen is unavailable, I’m getting a 404… Is there anyway you could create me a new link?

I’d happily write it over from the screenshot but that would make the chance at errors much bigger.

One more question: so in webflow, the html content goes into an embed, then the css is also added in that html embed and the Javascript is placed in the page custom code or the project-settings custom code?

Thank you for your help, hope to get it working soon…

Hello, @doksontwerpburo!

Here is a quick video to show you how to tackle this:

CloudApp

Also, you’ll probably want this link:

https://developers.google.com/maps/documentation/javascript/styling

This should get you started with customizing your map!!

Hey @rileyrichter,

Thanks so much for your response, I’ve now got it to work, this was very clear and simple. I do have one more question, I’ve not got a marker on my map and when I look it up on the google documentation page I get a snipper that seems to be what I need but the code there is slightly differently built up and now I’m not sure as to where to place the exact line. I’ve tried a few positions but every one of them end up instantly breaking the map completely. Could you just give me a heads up on where the marker should be?

This is the source:
https://developers.google.com/maps/documentation/javascript/adding-a-google-map

This is the snippet:
var marker = new google.maps.Marker({position: lat: 46.215758, lng: 3.501917, map: map});

Hey, @doksontwerpburo!

You would use the same function, but you would change that location to a variable, and then add in the variable for the marker as well.

Here is the code I am using. Feel free to change it up and customize for your use (note that the variable for the marker is beneath the styling):

  <script>
  function initMap() {
    // Styles a map in night mode.
    var brooklyn = {lat: 40.674, lng: -73.945};
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 12,
      center: brooklyn,
      styles: [
        {elementType: 'geometry', stylers: [{color: '#242f3e'}]},
        {elementType: 'labels.text.stroke', stylers: [{color: '#242f3e'}]},
        {elementType: 'labels.text.fill', stylers: [{color: '#746855'}]},
        {
          featureType: 'administrative.locality',
          elementType: 'labels.text.fill',
          stylers: [{color: '#d59563'}]
        },
        {
          featureType: 'poi',
          elementType: 'labels.text.fill',
          stylers: [{color: '#d59563'}]
        },
        {
          featureType: 'poi.park',
          elementType: 'geometry',
          stylers: [{color: '#263c3f'}]
        },
        {
          featureType: 'poi.park',
          elementType: 'labels.text.fill',
          stylers: [{color: '#6b9a76'}]
        },
        {
          featureType: 'road',
          elementType: 'geometry',
          stylers: [{color: '#38414e'}]
        },
        {
          featureType: 'road',
          elementType: 'geometry.stroke',
          stylers: [{color: '#212a37'}]
        },
        {
          featureType: 'road',
          elementType: 'labels.text.fill',
          stylers: [{color: '#9ca5b3'}]
        },
        {
          featureType: 'road.highway',
          elementType: 'geometry',
          stylers: [{color: '#746855'}]
        },
        {
          featureType: 'road.highway',
          elementType: 'geometry.stroke',
          stylers: [{color: '#1f2835'}]
        },
        {
          featureType: 'road.highway',
          elementType: 'labels.text.fill',
          stylers: [{color: '#f3d19c'}]
        },
        {
          featureType: 'transit',
          elementType: 'geometry',
          stylers: [{color: '#2f3948'}]
        },
        {
          featureType: 'transit.station',
          elementType: 'labels.text.fill',
          stylers: [{color: '#d59563'}]
        },
        {
          featureType: 'water',
          elementType: 'geometry',
          stylers: [{color: '#17263c'}]
        },
        {
          featureType: 'water',
          elementType: 'labels.text.fill',
          stylers: [{color: '#515c6d'}]
        },
        {
          featureType: 'water',
          elementType: 'labels.text.stroke',
          stylers: [{color: '#17263c'}]
        }
      ]
    });

    var marker = new google.maps.Marker({position: brooklyn, map: map});
  }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE&callback=initMap"
async defer></script>
1 Like