Streaming live at 10am (PST)

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/

9 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://byrne-joinery.webflow.io/contact

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