Google maps styling and location not working

Design help Custom code
1

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.

2

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

image
image1216×429 102 KB

Map url:

Maybe add screenshot of the problem.

3

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

4

@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: আপনার ওয়েবসাইটে একটি মার্কার সহ একটি Google মানচিত্র যোগ করা  |  Maps JavaScript API  |  Google Developers

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.

5

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.

27
27707×566 108 KB

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.

22
221857×1296 203 KB

Hope that helps.

1 Like
6

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…

7

Hello, @doksontwerpburo!

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

CloudApp

Also, you’ll probably want this link:

This should get you started with customizing your map!!

1 Like
8

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:

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

9

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>
2 Likes
11

Thank you man!
This is the only right way to do it.
After 3 hours of research and wrong explanations, your’s is finally the key to succeed.

1 Like
12

Hi Riley !

Thank you so much for your video. it s very clear. I m just wondering if that solution is still working because I tried to do exactly the same but he map does’nt appear.

Thank you in advance for your help.

Link of my project : https://preview.webflow.com/preview/iconic-house?utm_medium=preview_link&utm_source=designer&utm_content=iconic-house&preview=2af93a6629c665f137cbe9ddd856a42d&pageId=60819802cbe0141e58b1869d&workflow=preview

13

Hi there! Hope you’ve been doing well, i’ve been trying to make this affect London with Collard on Trippin and i wondered if it was even possible? With a stylised google map and does crazy things, any help would be great.

Cheers,
Will

14

To everyone who’s followed up here, I have some good news! Google has changed how this works and they’ve made it even easier. They now have a Styling Wizard to help you get everything just right. You can find it here:

I’ll try to get back here soon and post a video on how to make this work. :crossed_fingers:

2 Likes
15

Hi @rileyrichter Since your last post almost two years ago, Google has changed the map styling tool again. It’s easy to create custom styles, but I can’t figure out how to embed them correctly in Webflow. Any chance for an updated tutorial? :innocent:

Also, in a Google Maps project, the custom map styles have to be linked to a map ID (under Map Management), not the API key (under Credentials) that’s used in the Webflow map element. It would have been VERY nice if we could link the map ID directly to the Webflow map element, getting a custom styled map, not the default Google maps like you do when using the API key. I have not found a way to link a map ID/custom map style to a specific API-key.