Streaming live at 10am (PST)

Unable to embed multiple custom maps


#1

Hi there, I’m trying to embed two custom snazzy maps on my site, one for desktop and one for mobile, couldn’t get it to work so I took it into a test project and still can’t figure it out, for now I’ve just put two maps on the page to try and figure it out but no idea what it could be.

I’ve attached the code and screenshots.

P.S It’s on the dynamic page for the address collection

Thanks in advance,
Jamie

   <style>

   #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;
    }

</style>

<script src='https://maps.googleapis.com/maps/api/js?key=API KEY HERE&sensor=false&extension=.js'>
</script>

<script type="text/javascript">
var geocoder;
var map;
var address = "{{wf {&quot;path&quot;:&quot;name&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}";

function initialize() {
  geocoder = new google.maps.Geocoder();
  var latlng = new google.maps.LatLng(-34.397, 150.644);
  var myOptions = {
    zoom: 12,
    center: latlng,
    mapTypeControl: false,
    zoomControl: true,
    disableDoubleClickZoom: true,
    scaleControl: false,
    scrollwheel: false,
    panControl: false,
    streetViewControl: false,
    draggable : true,
    overviewMapControl: false,
    mapTypeControlOptions: {
      styles: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    },
    navigationControl: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    styles: [
    {
        "featureType": "all",
        "elementType": "labels.text.fill",
        "stylers": [
            {
                "saturation": 36
            },
            {
                "color": "#ffe58c"
            },
            {
                "lightness": 40
            }
        ]
    },
    {
        "featureType": "all",
        "elementType": "labels.text.stroke",
        "stylers": [
            {
                "visibility": "on"
            },
            {
                "color": "#000000"
            },
            {
                "lightness": 16
            }
        ]
    },
    {
        "featureType": "all",
        "elementType": "labels.icon",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "administrative",
        "elementType": "geometry.fill",
        "stylers": [
            {
                "color": "#000000"
            },
            {
                "lightness": 20
            }
        ]
    },
    {
        "featureType": "administrative",
        "elementType": "geometry.stroke",
        "stylers": [
            {
                "color": "#000000"
            },
            {
                "lightness": 17
            },
            {
                "weight": 1.2
            }
        ]
    },
    {
        "featureType": "landscape",
        "elementType": "geometry",
        "stylers": [
            {
                "color": "#000000"
            },
            {
                "lightness": 20
            }
        ]
    },
    {
        "featureType": "poi",
        "elementType": "geometry",
        "stylers": [
            {
                "color": "#000000"
            },
            {
                "lightness": 21
            }
        ]
    },
    {
        "featureType": "road.highway",
        "elementType": "geometry.fill",
        "stylers": [
            {
                "color": "#000000"
            },
            {
                "lightness": 17
            }
        ]
    },
    {
        "featureType": "road.highway",
        "elementType": "geometry.stroke",
        "stylers": [
            {
                "color": "#000000"
            },
            {
                "lightness": 29
            },
            {
                "weight": 0.2
            }
        ]
    },
    {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
            {
                "color": "#000000"
            },
            {
                "lightness": 18
            }
        ]
    },
    {
        "featureType": "road.local",
        "elementType": "geometry",
        "stylers": [
            {
                "color": "#000000"
            },
            {
                "lightness": 16
            }
        ]
    },
    {
        "featureType": "transit",
        "elementType": "geometry",
        "stylers": [
            {
                "color": "#000000"
            },
            {
                "lightness": 19
            }
        ]
    },
    {
        "featureType": "water",
        "elementType": "geometry",
        "stylers": [
            {
                "color": "#000000"
            },
            {
                "lightness": 17
            }
        ]
    }
]
  };
  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 iconBase = 'https://daks2k3a4ib2z.cloudfront.net/597f0a54250f3500013ebc97/5992e4b5e91d6100019b55c5_'
          var marker = new google.maps.Marker({
            position: results[0].geometry.location,
            map: map,
            title: address,
            icon: iconBase + 'gmap_icon_bg.png',
          });
          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>


My public share link: https://preview.webflow.com/preview/b-m-testing?preview=8bcd294ef54635bee2c191d537f23fc9
Page issue is occuring on: http://b-m-testing.webflow.io/address/bideford


#2

Hi, I can’t help you with the issue, but I suggest you edit out your API key from the code posted, as it could potentially be copied and misused by a third party.

Good luck.


#4

Hi @JamieDebnam,

There are few problems in your page, and they can be easily be fixed :smile:

What you are trying to do is to have two separated script, each running in parallel to generate two google maps. However you cannot have two google map APIs called in a single page. So what you can do is call google maps API once, and then “tell” the API to display the map in two different places.

Also the script should not be put inside the embed code. You can cut and paste the whole script onto the custom code (before body tag) session in page settings. The reason why it doesn’t matter where you put the code is that the location of the map is determined in the code itself by this line:

map = new google.maps.Map(document.getElementById("map"), myOptions)

document.getElementById("map") means that the map will be displayed in a div which have an ID of “map”.
Note that the getElementById() function only returns the first element with that ID. Since now you want to display the map in multiple divs, you have to declare the map variable twice:

map = new google.maps.Map(document.getElementById("map"), myOptions)
map2 = new google.maps.Map(document.getElementById("map2"), myOptions)

In the following code lines, you should duplicate the lines with map.blahblahblah to cater both “map” objects.
It should look like this:

  map = new google.maps.Map(document.getElementById("map"), myOptions);
  map2 = new google.maps.Map(document.getElementById("map2"), 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);
          map2.setCenter(results[0].geometry.location);

          var infowindow = new google.maps.InfoWindow({
            content: '<b>' + address + '</b>',
            size: new google.maps.Size(150, 50)
          });

          var iconBase = 'https://daks2k3a4ib2z.cloudfront.net/597f0a54250f3500013ebc97/5992e4b5e91d6100019b55c5_'
          var marker = new google.maps.Marker({
            position: results[0].geometry.location,
            map: map,
            title: address,
            icon: iconBase + 'gmap_icon_bg.png',
          });
          google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map, marker);
          });
          
          var marker2 = new google.maps.Marker({
            position: results[0].geometry.location,
            map: map2,
            title: address,
            icon: iconBase + 'gmap_icon_bg.png',
          });
          google.maps.event.addListener(marker2, 'click', function() {
            infowindow.open(map2, marker2);
          });

        } else {
          alert("No results found");
        }
      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });
  }
}

After amending the code, replace the embed code divs with a ordinary divs, then give an ID of “map” and “map2” respectively.

Here’s a preview link to my solution:
https://preview.webflow.com/preview/experiment-f58f06?preview=7fda4844ad1ab2b8b956bd12adae854a
http://experiment-f58f06.webflow.io/

Good luck.


#5

Hi @art_ytc,

I’ve implemented your changes but no luck on the second map :confused:

The first map works great thanks for the advice with the embed widget thing!

But the second map is for mobile only and heres the error I get when I try on mobile responsive

18

Thanks in advance,
Jamie


#6

Hi @JamieDebnam,

image

Delete the two instances of “hidden map” and try again. You don’t have to have the webflow vanilla map component for this script to work:wink:

By the way, may I ask for the reason why do you need 2 separate maps for desktop and mobile? There might be a smarter way to achieve what you want :wink:

Cheers,
Arthur


#7

Ah I see, sorry just followed a tutorial I found on the forums to build the map originally :stuck_out_tongue:

Basically we have three seperate buttons on desktop, one that opens the map over the left column image as an overlay which works great, one that links to a gallery and another that links to a page, on mobile this was too dis-jointed. so it’s now an accordion menu which when the map button is clicked the map extends downwards and can be hidden again.

P.S just removed the hidden maps as you suggested and it works perfectly, thanks for your help! :smiley:


#8

@JamieDebnam Glad that you solved your problem.

please make sure you change the google API key to yours, in "https://maps.googleapis.com/maps/api/js?key=AIzaSyDrZsRiUQsKc-7JNL8VvBgRsmS0FBDbJ3Q&callback=initMap" (replace key=… with your own one), you are using mine right now.
About API keys: https://developers.google.com/maps/documentation/javascript/get-api-key

I see your point to create two maps and show conditionally, but if you want to optimize your website performance I don’t recommend to render two maps and then hide one. You may use matchMedia() function in Javascript to set where you are going to display your map in, depending on screen size. This can save a lot of resource.

Cheers,
Arthur


#9

Thanks for the advice Arthur I’ll look into getting that done! :smiley:

Thanks again for all your help mate :slight_smile: