Custom style google map in tabs issze

Design help General
1

The Custom style gogole mmap with tabs is unable to display, anyone know how to fix that?

https://preview.webflow.com/preview/mapstyle?preview=64b0aa0c2663e2d74499908b2aa70801
http://mapstyle.webflow.io/

2

Embedded code will not run until you export or publish the site.

You will not see the map in preview mode.

When I checked your published site… it was working.

3

try to click the other tab, you will see the issue

4

ahh… I didn’t realize there was a tab there. You might want to address that…

ha !.. see the correlation between “address” and “map” :wink:

just a suggestion:
if a developer can’t easily see there is a tab…
a user might miss it also.

As for the map

I think you have a conflict in your map naming.

I cannot test it since it requires custom code.

But look at this…

You call map1 and map2
But when you create and define the map
you refer to both maps as “map”.

map1 should be map1.
map2 should be map2.

Also… I’d move the code for both maps into custom code and out of the embedded widget.

It makes it much easier to manage / update / view.

var mapElement = document.getElementById('map2'); <<<<<<<<<<<

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

// Following section, you can create your info window content using html markup

  

// Define the image to use for the map marker (58 x 44 px)

        var image = 'https://mts.googleapis.com/vt/icon/name=icons/spotlight/spotlight-poi.png&scale=1';

// Define the Lattitude and Longitude for the map location

        var myLatLng = new google.maps.LatLng(22.309079,114.224477);

// Define the map marker characteristics

        var mapMarker = new google.maps.Marker({
        position: myLatLng,
        map: map, <<<<<<<<<<<<<<<<<<<<<
        icon: image,
        title:  'Frostbyte Interactive'

Here - I am creating 4 maps at the same time for a client with 4 locations

       // 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_nh');
        var mapElement_pt = document.getElementById('map_pt');
        var mapElement_al = document.getElementById('map_al');
        var mapElement_mc = document.getElementById('map_mc');
        
        // Create the Google Map using our element and options defined above
        var map = new google.maps.Map(mapElement, mapOptions);
        var map_pt = new google.maps.Map(mapElement_pt, mapOptions);
        var map_al = new google.maps.Map(mapElement_al, mapOptions);
        var map_mc = new google.maps.Map(mapElement_mc, mapOptions);

Here are some marker creations - note “map”… “map_pt” etc.

        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(12.816154, -21.524692),
            map: map,
            title: 'location 1'
        });

    var marker = new google.maps.Marker({
            position: new google.maps.LatLng(23.816154, -61.524692),
            map: map_pt,
            title: 'location 2'
        });
5

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.