TUTORIAL: Custom Google Maps Marker/Location Pin 🤓

Hey Webflow Community,

A commonly asked question which remains unanswered:
How to add a custom map marker to Google Maps?

This is particularly nice to add your own logo or branding to the Google Map plugin.

This is what you will need:

  • A small PNG logo (20px x 20px) or similar, uploaded into your asset manager in Webflow.
  • A Google Maps API Key
  • JS Fiddle open (so you can edit the code (It’s NOT scary I promise)
  • 10 mins or so to watch my video
  • & a caffeine based drink and some patience :smiley:

We’re going to follow this Google documentation.

So enjoy!!
CloudApp

Huge shout out to @bart #javascriptninja who helped me… no, showed me how to do this :smiley:

Published Link: http://custom-map-marker.webflow.io/

11 Likes

Thanks for this tutorial. I followed it and got one map working but I’m looking to have 2 separate maps on the same page. When I add the second map with div ID ‘map2’, the first map gets replaced. It seems I can only have one map on the page. I have added 2 sets of code for each map as follows:

Custom Markers /* Always set the map height explicitly to define the size of the div * element that contains the map. */ #map { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }
var map; function initMap() { map = new google.maps.Map(document.getElementById('map'), { zoom: 16, center: new google.maps.LatLng(52.955675, -7.081375), mapTypeId: 'roadmap' });
    var iconBase = 'https://uploads-ssl.webflow.com/';
    var icons = {
      myicon: {
        icon: iconBase + '5c1a47976edb846aa6d08f3a/5c30a1da1213426c690215ad_marker.png'
      },   
    };

    var features = [
      {
        position: new google.maps.LatLng(52.955675, -7.081375),
        type: 'myicon'
      }, 
    ];

    // Create markers.
    features.forEach(function(feature) {
      var marker = new google.maps.Marker({
        position: feature.position,
        icon: icons[feature.type].icon,
        map: map
      });
    });
  }
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBG0yYhm0cqcpmiKmYndK2YHR-6cA7DD9E&callback=initMap">
</script>

Code 2

Custom Markers /* Always set the map height explicitly to define the size of the div * element that contains the map. */ #map { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }
var map; function initMap() { map = new google.maps.Map(document.getElementById('map'), { zoom: 16, center: new google.maps.LatLng(51.518609, -0.141913), mapTypeId: 'roadmap' });
    var iconBase = 'https://uploads-ssl.webflow.com/';
    var icons = {
      myicon: {
        icon: iconBase + '5c1a47976edb846aa6d08f3a/5c30a1da1213426c690215ad_marker.png'
      },   
    };

    var features = [
      {
        position: new google.maps.LatLng(51.518609, -0.141913),
        type: 'myicon'
      }, 
    ];

    // Create markers.
    features.forEach(function(feature) {
      var marker = new google.maps.Marker({
        position: feature.position,
        icon: icons[feature.type].icon,
        map: map
      });
    });
  }
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBG0yYhm0cqcpmiKmYndK2YHR-6cA7DD9E&callback=initMap">
</script>

Also a white space is now introduced at the bottom of the page of about 100VH. HOw can I get rid of this? Thanks a lot.

https://preview.webflow.com/preview/byrne-joinery?utm_source=byrne-joinery&preview=7ff4639c1d662aa9be5be7dcbe8202ff

It’s on the contact page.

I hope you can help.

Thanks,

Niall

Can anyone advise on this please?

This isn’t official Webflow support, as we don’t offer support for custom code, so this is just me trying to help out! If we get stuck, I will do what I can to figure this out! :smiley:

You do not have your div Id’s set for each map at the moment in your designer.

So the first div needs and ID of map (you have set)
The second div needs an ID of map2 (you have set this as a class, not an ID)

CloudApp

You will then need to update each code accordingly.

Where the first one says
new google.maps.Map(document.getElementById('map')
The second one should say
new google.maps.Map(document.getElementById('map2') Note the ('map2') which reflects the div ID you have set. So this needs to match whatever ID you set.

I think you will need to change the second code here too:

    features.forEach(function(feature) {
      var marker = new google.maps.Marker({
        position: feature.position,
        icon: icons[feature.type].icon,
        map: map2
      });

Note again I’ve changed map: map to map: map2

See how you get on with this :crossed_fingers: as I mention, I’m not proficient in Javascript yet! :grimacing:

I appreciate your help. I tried this and variations of it but with no success. I can get the second map to appear without the marker but then the first map disappears. The white space at the bottom of the page remains also. Do you know if there is any other workaround? Thanks for the advice

Oh no.

I don’t have an immediate answer unfortunately, but I will take some time in the next day or two in my own time to have a look at it and see if I can get it working.

If anyone else has a solution in the meantime, please feel free to jump in and share! :slight_smile:

Thanks a lot. Much appreciated

1 Like

Thank you for this great tutorial. Used the principles you showed to create a map centred on some coordinates that wouldn’t work via Webflow (defaulted to the nearest valid street address), and to change the icon.

Still trying to figure out how to add an info box when the icon is clicked. This is my first foray into JS though so not surprising. Trying to modify/customise some of the code given in this LINK but no joy yet!

1 Like

Never mind - few more hours of persistence paid off!

    var infowindow = new google.maps.InfoWindow({
      content: contentString
    });

    var marker = new google.maps.Marker({        	
      position: fish_spot,
      map: map,
      title: 'WATER NAME GOES HERE',
      icon: iconBase + 'fishing.png',
    });
    
    
    marker.addListener('click', function() {
      infowindow.open(map, marker);
    });
1 Like

Thanks to all here for putting this out there, it helped me a lot. For anyone who is looking at is (at least as of September 2021), the docs altered for this on google and now the HTML, CSS, and JS are seperated. I watched @magicmark’s video and analysed the patern his code was for him at the time and combined it into one HTML code so that we can put it in the Before </body> tag section for the custom code on your page and you can see the sample below:

<html>

  <head>
    <title>Custom Markers</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      #map {
        height: 100%;
      }

      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
      }

    </style>
  </head>

  <body>
    <div id="map"></div>
    <script>
      var map;

      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 16,
          center: new google.maps.LatLng(value, value),
          mapTypeId: 'roadmap'
        });

        var iconBase = 'https://uploads-ssl.webflow.com/<string of characters>/';
        var icons = {
          hq: {
            icon: iconBase + '<characters after forward slash>'
          },
        };

        var features = [{
          position: new google.maps.LatLng(value,value),
          type: "hq"
        }, ];

        // Create markers.
        features.forEach(function(feature) {
          var marker = new google.maps.Marker({
            position: feature.position,
            icon: icons[feature.type].icon,
            map: map
          });
        });
      }

    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=<your API Key>&&callback=initMap">
    </script>
  </body>

</html>

I only needed one pin and one icon but to add more you simply repeat what you put inbetween the var icons = { and }; after the }, for icons and inbetween the var features = [ and ]; after the }, for the pins.

As for the info boxes, I have not yet attemped to play with the code to add them as well, if I do I will update this post, otherwise you can attempt looking at @Andy_Vaughan’s solution and playing around with it though a quick look showed that the HTML, CSS, and JS are also seperated there.

Either way, Mark’s video perfectly shows how to add the custom pins, and you should certainly watch it as it is still available as of now. I only added this to make the process of combining the HTML, CSS, and JS easier for anyone who comes across this.

Good luck!

Update
So after testing it a bit, if you run into a problem like me where the map was appearing in the div block and beneath your footer (if you have one) leaving your page looking like this:

Looking back at the logic, we do not need the HTML and Body tags, so you should keep ONLY this part of the code:

    <div id="map"></div>
    <script>
      var map;

      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 16,
          center: new google.maps.LatLng(-15.436481, 28.339249),
          mapTypeId: 'roadmap'
        });

        var iconBase = 'https://uploads-ssl.webflow.com/613cbd955b97f2ad46250282/';
        var icons = {
          hq: {
            icon: iconBase + '613de0c19900f86c2124be0f_custom%20logo%20pin.png'
          },
        };

        var features = [{
          position: new google.maps.LatLng(-15.436605, 28.339216),
          type: "hq"
        }, ];

        // Create markers.
        features.forEach(function(feature) {
          var marker = new google.maps.Marker({
            position: feature.position,
            icon: icons[feature.type].icon,
            map: map
          });
        });
      }

    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBBD7r6di-NHOgwSxDwYY8wakNElAv5snw&&callback=initMap">
    </script>

After doing that, it worked flawlessly for me:

Just some notes to add, height as percent was not shwoing the div block for me on the live website so I had to use PX sizing real quick to show it working instead which is why the map is an odd size there.

1 Like