Streaming live at 10am (PST)

Integrating a custom google map


#1

I'm trying to figure out how to embed a custom google map style into a section element.

  • Custom map fills the size of a section
  • Overlay with a content area (static, not a modal)

Here's a wireframe example:

I've found a tool called snazzymaps (http://snazzymaps.com) with some nice grayscale maps that will work really well with the sites visual language. The problem is I cannot for the life of me figure out how to embed it properly.

What I've tried embedding snazzymaps into an embed widget. Snazzymaps lets you download a html file as an example, so I tried pasting parts into the custom code fields and embed widget. The html file is a whole page with head/body tags etc, so I just took the elements that were relevant.

Can someone give me some pointers on how to pull this off within webflow?


#2

Hi, it would help to get an example of the html file that the snazzymaps give you.... so can see what they are doing in the embed... or can you give link to preview the project in webflow?

Generally, you just need to embed the part in the IFRAME element, however there may be additional css and/or javascript that you have to reference as well, but I do not know this snazzymaps...

You can also do the same thing I think, just using webflow alone, but you have to create some div for the static overlay and some css styling for the map part... it is possible to do, but if you trying to embed code, then having sample of that would help smile Cheers


#3

Hey Dave, here's an example of the snazzymaps html file which includes my api key;

https://dl.dropboxusercontent.com/u/8073249/Webflow/snazzymaps_example.html

Thanks for helping out with this!


#4

Hi @grandtheftpixel, so I was able to duplicate your attempt and got map to work:

http://google-map-demo.webflow.com/

And this is how I did it:

a) add some div block where you want the map to be displayed on your page, within some container or not, it is up to you. Give the div block an id of "map" and give it a class name of "mapDisplay". Then on the div, give it some width and height, whatever you want, I used the example width and height of 960px x 500px, and to demonstrate, I also added some box shadow and made border radius of 10px to give it a little cool rounded effect smile So you can still style the map container the div with id "map"

b) Copy the following code and add it to the Before Body section of the Custom code tab of your website in the site settings page:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBbbwnrnCAoW9hfVyhoh7FFQRcA8VOkm-s&sensor=false"></script>

        <script type="text/javascript">
        // When the window has finished loading create our google map below
        google.maps.event.addDomListener(window, 'load', init);
        function init() {
            // Basic options for a simple Google Map
            // For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
            var mapOptions = {
                // How zoomed in you want the map to start at (always required)
                zoom: 11,

                // The latitude and longitude to center the map (always required)
                center: new google.maps.LatLng(40.6700, -73.9400), // New York

                // How you would like to style the map. 
                // This is where you would paste any style found on Snazzy Maps.
                styles: [{featureType:"landscape",stylers:[{saturation:-100},{lightness:65},{visibility:"on"}]},{featureType:"poi",stylers:[{saturation:-100},{lightness:51},{visibility:"simplified"}]},{featureType:"road.highway",stylers:[{saturation:-100},{visibility:"simplified"}]},{featureType:"road.arterial",stylers:[{saturation:-100},{lightness:30},{visibility:"on"}]},{featureType:"road.local",stylers:[{saturation:-100},{lightness:40},{visibility:"on"}]},{featureType:"transit",stylers:[{saturation:-100},{visibility:"simplified"}]},{featureType:"administrative.province",stylers:[{visibility:"off"}]/**/},{featureType:"administrative.locality",stylers:[{visibility:"off"}]},{featureType:"administrative.neighborhood",stylers:[{visibility:"on"}]/**/},{featureType:"water",elementType:"labels",stylers:[{visibility:"on"},{lightness:-25},{saturation:-100}]},{featureType:"water",elementType:"geometry",stylers:[{hue:"#ffff00"},{lightness:-25},{saturation:-97}]}]
            };

            // Get the HTML DOM element that will contain your map 
            // We are using a div with id="map" seen below in the <body>
            var mapElement = document.getElementById('map');

            // Create the Google Map using out element and options defined above
            var map = new google.maps.Map(mapElement, mapOptions);
        }
    </script>

c) Save your change in the site settings, and publish. Go view your site and be happy. smile

Hope that helps, cheerios and have a great day!


#5

Hey Dave, thanks for that! Your instructions work great.

I'm trying to overlay a div block that I can then place elements in and style. I can't seem to get the div to show over the top of the map.

What i'm doing;

  • Placing the map element inside a section (also tried a div block) and following your instructions above. That works.

  • Dropping in a div block, giving it a class and attempting to style (padding, colour BG, rows etc).

The block element doesn't appear to show when I push the site live.

Here's an example;

Test site - http://map-test.webflow.com/

Support - https://webflow.com/design/map-test?preview=9ab3376ea3d25145228c4baf9bc8102b

Let me know if this is something pretty easy that I'm missing.


#6

Anyone have any ideas? Webflow team?


#7

Hi Adam, sorry for late reply, I missed your post, are you still having the issue with the overlay for the map? Basically, you can put the map into some container or section, lets call that "wrapper" and then give the a z-index value for the div containing the map to some low value like 1 , and then add additional divs to the wrapper container or section, and give those divs that contain the overlay elements with a higher z-index value. For the divs that are inside that wrapper container or section, you set those with position relative and the divs with higher z-index value will appear above the map, and you can position those within the wrapper container using the relative positioning in webflow. Hope that helps ! Cheers


#8