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