Google Maps with Snazzy Maps theme hooked up to a dynamic embed and dynamic fields

We all know we got the Dynamic embeds where we can use Dynamic fields to input data into our 3rd party widgets that we put in the Dynamic Embed. Google Maps is one of many. This tutorial show you how to use the Google Maps in a dynamic embed on CMS template page, having it pull the adress from a field in your collection AND at the same time applying a Snazzy Style theme to it!

Step 1. Go to the Google Developers site, log in to your dashboard and generate an Browser API-key for your project. Keep the page open or copy the key to a text file. Also remember to type in all of the URL’s that this map will be used on. For this tutorial it’s: rosfast.webflow.io and h_ttp://rosfast.se_

Step 2. Create or modify a collection in your Webflow CMS. Add a text field in that collection and name it Adress or what you want. Type in the complete adress (e.g 42 Ridgewood Terrace Maplewood, NJ 07040, USA).

Step 3. Go to your CMS template page. Drag in a native Webflow Google Map. Give it class name like “Hidden Map”
and set it do display: none. Then create a section or div and give a class and an ID of map. Set it’s sematic tag to Section or Div and finally set it to a height of 60 vh or whatever you want.

Step 4. Inside that section, drop a HTML embed and give it a class name of your choice. Set it to the same height value as your div or section you created in the previous step.

Step 5. Open up the HTML Embed and now…let’s paste some code!

Step 6. Start with this one. This will set some initial styles for your map section. Wrap it in style-tags:

    #map {
      
    }
    .gm-style-iw * {
        display: block;
        width: 100%;
        color: #ff8d02;
    }
    .gm-style-iw h4,{
         color: #ff8d02;
         font-size: 10pt;
    }
    .gm-style-iw p {
        color: #000000;
        font-size: 8pt;
        text-align: left;
        padding-bottom: 5px;
        padding-left: 5px;
    }
        
    .gm-style-iw a {
        color: #0093d0;
    }

Step 7. Below, continue by adding this. Be sure you replace “PUT YOUR…:” with your API key you generated from the Google Developers API Console earlier.

`<script src='https://maps.googleapis.com/maps/api/js?key=PUT YOUR API KEY HERE&sensor=false&extension=.js'>
</script>` 

Step 8. Now the fun part begins! Finally we’re adding this:

"script type="text/javascript" 
var geocoder;
var map;
var address = "San Diego, CA";

function initialize() {
  geocoder = new google.maps.Geocoder();
  var latlng = new google.maps.LatLng(-34.397, 150.644);
  var myOptions = {
    zoom: 16,
    center: latlng,
    mapTypeControl: false,
    zoomControl: false,
    disableDoubleClickZoom: true,
    scaleControl: false,
    scrollwheel: false,
    panControl: false,
    streetViewControl: false,
    draggable : false,
    overviewMapControl: false,
    mapTypeControlOptions: {
      styles: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    },
    navigationControl: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    styles:
    [{"elementType":"geometry","stylers":[{"hue":"#ff4400"},{"saturation":-68},{"lightness":-4},{"gamma":0.72}]},{"featureType":"road","elementType":"labels.icon"},{"featureType":"landscape.man_made","elementType":"geometry","stylers":[{"hue":"#0077ff"},{"gamma":3.1}]},{"featureType":"water","stylers":[{"hue":"#00ccff"},{"gamma":0.44},{"saturation":-33}]},{"featureType":"poi.park","stylers":[{"hue":"#44ff00"},{"saturation":-23}]},{"featureType":"water","elementType":"labels.text.fill","stylers":[{"hue":"#007fff"},{"gamma":0.77},{"saturation":65},{"lightness":99}]},{"featureType":"water","elementType":"labels.text.stroke","stylers":[{"gamma":0.11},{"weight":5.6},{"saturation":99},{"hue":"#0091ff"},{"lightness":-86}]},{"featureType":"transit.line","elementType":"geometry","stylers":[{"lightness":-48},{"hue":"#ff5e00"},{"gamma":1.2},{"saturation":-23}]},{"featureType":"transit","elementType":"labels.text.stroke","stylers":[{"saturation":-64},{"hue":"#ff9100"},{"lightness":16},{"gamma":0.47},{"weight":2.7}]}]
  };
  map = new google.maps.Map(document.getElementById("map"), myOptions);
  if (geocoder) {
    geocoder.geocode({
      'address': address
    }, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
          map.setCenter(results[0].geometry.location);

          var infowindow = new google.maps.InfoWindow({
            content: '<b>' + address + '</b>',
            size: new google.maps.Size(150, 50)
          });

          var marker = new google.maps.Marker({
            position: results[0].geometry.location,
            map: map,
            title: address
          });
          google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map, marker);
          });

        } else {
          alert("No results found");
        }
      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });
  }
}
google.maps.event.addDomListener(window, 'load', initialize);

   script

(For some reason the script is not showed correctly in this forum post, so make sure to wrap the first "script type=“text/javascript” and the ending script in brackets (<> and </>)

Step 9. Look for this line : var address = “San Diego, CA”. Select the entire San Diego, CA (do not include the quote marks!) and then go to “Add Field” and select the field that contains the adress you put in your collection earlier.

Step 10. Go to http://snazzymaps.com and get your desired style. For this tutorial I used this one.

Step 11. Click on your desired theme and under Javascript Style Array you’ll find your style. Copy that via the Copy button.

Step 12. Look for the styles: attribute. Underneath it, paste your snazzy style you just copied.** VERY IMPORTANT:** Be that sure that the whole code line ends with }]}

Step 13. BOOM! You’re good to go! This map will not be visible in designer mode but only in a published version!

Step 14. Bonus: From default, this tutorial have disabled all map controls. If you want to be able to zoom, pinch, have the “Map/Satellite” option and many more options visible, you need to swap each specific options false-attribute to true
You’ll find all options via code line var myOptions = {

15 Likes

Thank you for sharing this informative blog.

1 Like

Just wanted to make a small update on the loading problems that comes with this. I’m not a developer and I can’t figure out why it suddenly doesn’t load properly. However, one thing that solved the loading problem was doing this (I came across this just by accident):

  1. Drag in a native Webflow Google Map.
  2. Give it class name like “Hidden Map”
  3. Set it do display: none.

Boom! You custom map works again!

*Note: I also updated the section/div and HTML settings a bit. Remember to set both to equal height, like 60 vh or something!

A second update: Change the default marker pin to a custom one:

  1. If you want to change the default maker, add this line of code:
    var iconBase = ‘the-url-to-your-custom-file’;

it should be placed above the var marker = new google.maps.Marker({ line:

IMPORTANT! Don’t add the full URL to your custom pin. You need to leave out the actual file name because that will be placed further below.

2.Underneath the line title: address, add this (remember to add a comma character after “adress”!):
icon: iconBase + ‘custom_map_pin.png’

Here’s the place where you type in the filename of your custom pin. I like to upload my custom pin to Webflows asset manager and use the URL from there instead of hosting it on another service.

Added all together, it should look like this:

2 Likes

Is there a way to center the location of the pin so when the map loads the pin is located in the center?

@Anya

Hi! As far as I’m concerned, the map pin is centered. At least on my sites it is.
Can you share your preview-link and the published website link?

2 posts were split to a new topic: Can’t get snazzy maps customization to work

This is an incredibly useful post & followup. Thanks so much Steven!

1 Like

Thanks for this @StevenP, great stuff!

One question: in my case I would like to show multiple pins on 1 map, do you know if and how that would be possible with this technique?
I tried adding the map component in my Collection List, but apparently that’s not allowed.

Cheers

Hi @aaleks !

I’m not sure how to do this. Probably you have to rewrite the code and that’s out of my knowledge! Maybe somebody else can help out on this like the master ninja @bart? :stuck_out_tongue:

Thanks for getting back on this Steven, but I actually was able to figure it out!

Cool!

I’d love to know how you did it! :wink:

Sure thing!
In a nut shell, this is how I set up the layers:

layers

In the “Munchmap” database I can make all the cities I need, in this example “Toronto”:

Obviously, the lat/long details are used to place the pins, I use the “Name” and “Adress” fields for the popup, when the user clicks on one of the pins to get more details.

Then I use this code to setup the different pins:

If you’d like to see the complete code, check out the read-only link.

Make sure to choose “Cities Template” and then “Toronto” to see the working version!

1 Like

Hi, thanks for sharing this, I tried it and I was getting the error: Geocoding API - REQUEST_DENIED

I found a fix for this though, after going into my google console API settings, I had to enable “Geocoding API” under the “Additional API’s”

Just in case anyone else has similar issues…

3 Likes

Hey @aaleks, would you mind sending me the uopdated read-only link to that? Would love to work on something like that. Thanks!

Sure thing @Johnnie!
I’m currently redesigning, but you should be able to find everything over here:

https://preview.webflow.com/preview/munchmaps?utm_source=munchmaps&preview=b3ae8d86be382b59af5f5081471ac3ae

Let me know if you can’t find or figure something out, more than happy to help.

@aaleks This is great! I’m just trying to get the address (or lat / long) of each different item on a list. Let’s say a collection of Hotels. For every hotel, a new pin in the map. You’re doing one item with several pins. I’m trying to do one pin for each item. Any leads? :thinking:

Thanks in advance.

I believe I’m doing the same thing Johnie, I have 3 pins for 3 different restaurants, plus 3 pins for 3 different hotels. Or do you mean something else?

A potentially even easier way to style a map is by using the Maps widget and then applying filters. It takes like 3 clicks to get a Grayscale map.

Here’s an example of a map I made with Grayscale set to 100%:

1 Like

I got this message:

Geocode was not successful for the following reason: REQUEST_DENIED

And I activated the Geocoding API