Menu icon Foundation
Displaying Multiple Google Maps on one page

I'm using Accordion to display Google maps (API v3). Only the first panel displays the map correctly. The other panels displays miniature maps in the upper left corner.

When not used with accordion/tabs, the maps displays correctly.
Can someone please help here.

mapsaccordion

I'm using Accordion to display Google maps (API v3). Only the first panel displays the map correctly. The other panels displays miniature maps in the upper left corner.

When not used with accordion/tabs, the maps displays correctly.
Can someone please help here.

Iain Matchett almost 6 years ago

If you can post code it would be easier to help with this one, as you'll be aware there are quite a few bits of CSS and javascript in play so it's hard to narrow it down for you without being able to see it :)

neil kanth almost 6 years ago

Sorry about that.

Here a link to the development pages:
Accordion - http://wccfl.com/f5x/
basic html - http://wccfl.com/f5x/maps.html

 // Google Maps JavaScript API v3

function initialize()
{
    var latlng = new google.maps.LatLng(28.561287,-81.444465);
    var latlng2 = new google.maps.LatLng(28.507561,-81.482359);
    var latlng3 = new google.maps.LatLng(29.125285,-82.048823);
    var latlng4 = new google.maps.LatLng(28.593716,-81.531086);
    var latlng5 = new google.maps.LatLng(29.139155,-82.064699);
    var latlng6 = new google.maps.LatLng(28.592492,-81.537612);
    var latlng7 = new google.maps.LatLng(28.490363,-81.379598);
    var myOptions =
    {
        zoom: 13,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var myOptions2 =
    {
        zoom: 13,
        center: latlng2,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var myOptions3 =
    {
        zoom: 13,
        center: latlng3,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var myOptions4 =
    {
        zoom: 13,
        center: latlng4,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var myOptions5 =
    {
        zoom: 13,
        center: latlng5,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var myOptions6 =
    {
        zoom: 13,
        center: latlng6,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var myOptions7 =
    {
        zoom: 13,
        center: latlng7,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

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

    var map2 = new google.maps.Map(document.getElementById("map_canvas_2"), myOptions2);

    var map3 = new google.maps.Map(document.getElementById("map_canvas_3"), myOptions3);

    var map4 = new google.maps.Map(document.getElementById("map_canvas_4"), myOptions4);

    var map5 = new google.maps.Map(document.getElementById("map_canvas_5"), myOptions5);

    var map6 = new google.maps.Map(document.getElementById("map_canvas_6"), myOptions6);

    var map7 = new google.maps.Map(document.getElementById("map_canvas_7"), myOptions7);

    var myMarker = new google.maps.Marker(
    {
        position: latlng,
        map: map,
        title:"Barnett Park"
   });

    var myMarker2 = new google.maps.Marker(
    {
        position: latlng2,
        map: map2,
        title:"Bill Fredrick Park at Turkey Lake"
    });

    var myMarker3 = new google.maps.Marker(
    {
        position: latlng3,
        map: map3,
        title:"Dogwood Park"
    });

    var myMarker4 = new google.maps.Marker(
    {
        position: latlng4,
        map: map4,
        title:"Jim Beech Recreation Center"
    });

    var myMarker5 = new google.maps.Marker(
    {
        position: latlng5,
        map: map5,
        title:"Ocala Rotary Sportsplex"
    });

    var myMarker6 = new google.maps.Marker(
    {
        position: latlng6,
        map: map6,
        title:"Vignetti Park"
    });

    var myMarker7 = new google.maps.Marker(
    {
        position: latlng7,
        map: map7,
        title:"Cypress Grove Park"
    });
}

Chris Matthias almost 6 years ago

It's probably a CSS issue-- usually when you create a google map, the width and height need to be set via CSS. In your case since the accordians change size I might try to make sure you use:

.google-maps {
  width: 100%;
  height: 400px;
}

Right now the height of the .google-maps container is set to 0 which might be why either Google Maps is having an issue or maybe it's the accordian js. Not sure yet, but give that a try.

neil kanth almost 6 years ago

The CSS edit didn't change the display size of the maps.

Do you think along with it being the accordion, that each map needs its own 'initialize' function?

Afonso Praça over 5 years ago

I had exactly the same issue and i solve it in not a very beautiful way but a functionally way. Instead of hide the DOM elements with display property i used the visibility property to do it. With this approach Google Maps API had no trouble about know the dimensions of the divs where i had instantiated the maps.