Now streaming live

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


#1

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 = {


How to use custom map style
#2

Thank you for sharing this informative blog.


#5

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!


#6

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 + 'custommap_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:


#8

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


#9

@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?


#10

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