Webflow + Mapkit: Frenemies

In the tutorial below, I’ve deliberately broken down the steps I took into their most simplified form. Beginners will appreciate this, more seasoned developers should brace themselves for the scroll-equivalent to hitting fast forward

The relationship between Webflow and Mapkit is love/hate. Where Mapkit flows seamlessly into other platforms (or so I've heard), I've seen a ton of solicitations for troubleshooting advice when it comes to Webflow. I recently did my first Mapkit integration in Webflow and lived to tell the tale, which means that these two can have a happy ending after all.

The method outlined here does not actually require writing any code, but a knowledge of Javascript will be helpful, especially depending on how fancy you want to get with your controls.

I should also clarify that this is not a tutorial on how to create a map in Mapkit. It's a tutorial on how to integrate an already-built map into Webflow. In this example, I use one of Mapkit's existing themes, which are allegedly via SnazzyMaps. I say "allegedly" because I'm a little bit skeptical. First of all, most of the maps I see in SnazzyMaps do not appear by name in Mapkit and second, some of the Mapkit theme options have strange draft names that have absolutely nothing to do with the appearance of the map. I'm sure I could get to the bottom of this if I did some research, but in the end this would probably be a colossal waste of time for my purposes as there are enough themes in Mapkit to satisfy my needs, even if the UX designer inside of me dies a little bit every time she tries to navigate them.

Moving on. As with all things code, there are multiple ways to tackle this integration. This demo documents exactly what I did to get this it up-and-running. It doesn't mean there aren't other (better) ways.

One final word to the wise: don't skip step 7!

Ok, here we go...

01 POSITION PAGE ELEMENTS

If you’re following along, here are my elements and relevant alignment styling:

HTML:

<div class = "map-div">
    <div class = "footer">
        <h1 class="contact">
        <p class="contact-info">
        <div class="social-media">
            <button class="social-btn"></button>
            <button class="social-btn"></button>
            <button class="social-btn"></button>
            <button class="social-btn"></button>
            <button class="social-btn"></button>
             <button class="social-btn"></button>
         </div>
         </p>
         </h1>
    </div>
</div>

CSS:

.map-div {
position: relative;
height: 500px;
}

.footer {
position: absolute;
left: 0px;
right: 0px;
bottom 0px;
display: block;
height: 125px;
}

02 ADD PLACEHOLDER MAP [optional]

The important thing here is that the map object is inside the #map-div div block, not instead of.

Screen Shot 2017-03-21 at 12.42.16 PM.png

This is the default map element in Webflow. Not exactly an arresting visual, and only permitting 1 lonely location.

03 BUILD MAPKIT MAP

Before you do anything, create an account and make sure you are saving your map. This is important.

The map here uses the theme called “Black and White” and contains 3 locations.

04 OBTAIN API KEY

In Mapkit, go to project setup > Google Maps API Key and click on the ?. Follow the instructions for obtaining an API key.

Alternatively, click here. Either way, scroll down to the button that says Get a Key. It takes a few seconds to generate, don't navigate away. Once you'e gotten your key, copy it and keep it somewhere safe, you may need it more than once.

05 ASSIGN API KEY

In Mapkit, go to project setup > Google Maps API Key and paste the key you got from google.

06 GENERATE CODE

In Mapkit, click on the export code button at the bottom, whose icon is < >. You should get a modal that looks like this:

07 CHECK CODE

This is an easy step to skip over. DON'T! It's the most important one.

  • API KEY:
  • With the code export window open, check the very first line. After the "key=", see if your API key is there. If it is, you're good. If not, save your map and go back to step 5. Here's what it looks like when my key is in place, as you can see in the image in the step above:
  • <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC_jgT2h5Q46ZX47vnX0PxGe2496-DZOXY&extension=.js"></script>
  • LATITUDE AND LONGITUDE:
  • Scroll until you see this (a little more than halfway down):
  • function init() {
  •    var mapOptions = {
  • If your latitude and longitude are undefined, your map won't load. Undefined latitude and longitude looks like this:
  • function init() {        
  •    var mapOptions = {
  •          center: new google.maps.LatLng(undefined,undefined),

This latitude/longitude stuff can be tricky business. First, try going to project setup > latitude (or longitude). Right click, and select "reload". Latitude and longitude figures will populate. Export your code again and see if they're there (and also check the API key). If not, you'll put them directly into Webflow, which is explained in the next step.

08 COPY / PASTE CODE

With the code window open, click the "copy code" button. Then, in Webflow, go to project settings > custom code. In the editor after the <head> tag (the first one), paste the code you copied in the previous step.

If your latitude and longitude were undefined in Mapkit, here's what you do: populate the lat and long in Mapkit by reloading. Then, copy the latitude and paste it into the Webflow code, and do the same with longitude, separated by a comma, so that it looks like this:

09 CHECK WEBFLOW

Once you'e saved and published your code, you should see something like this:

10 REASSIGN ID

This is one of those many-ways-to-tackle things I mentioned earlier. I did exactly this:

  1. Scroll to the bottom of your code in Webflow. The last line builds a div block. Mine says:
  2. <div id='mapkit-2020'></div>
  3. Copy the div id (in my case, mapkit-2020)
  4. Delete this entire line from the code
  5. In the Webflow designer, delete the placeholder map if you had one
  6. Inside the div #map-div, create a new div. Mine has a class of mapkit-map
  7. Give #mapkit-map the id from the code (mapkit-2020)

Now you should see something like:

11 ADJUST STYLING

And once again, a few ways to do this. I chose not to do any styling in the designer, or in Mapkit for that matter. Instead I edited the styling in the custom code in Webflow. If you deleted the Mapkit div like I told you to in step 10, the styling is now the very last part of the code. The code I pasted from Mapkit was:

CSS:

#mapkit-2020 {
height:400px;
width:600px;
}

What it is now is:

CSS:

#mapkit-2020 {
height:500px;
width:100%;
}

Et voilá! You're done. And my first tutorial is in the books.

Published
April 3, 2017
Previous Post

New Kid on the Blog

Next Post

3 Cures for Designer's Block

Next Post

3 Cures for Designer's Block

Previous Post

New Kid on the Blog