Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

    • CommentAuthorsjw
    • CommentTimeOct 30th 2007
     permalink
    does anyone know if it is possible to have 2 google maps on 1 web page? I tried it out and although it worked in ie7 it failed in firefox.
    •  
      CommentAuthorjernigani
    • CommentTimeOct 30th 2007
     permalink
    What do you mean by possible?
    • CommentAuthorsjw
    • CommentTimeOct 30th 2007
     permalink
    aha, I mean have 2 working maps. In ie7 both maps showed but in firefox only one was visible.
    •  
      CommentAuthorjernigani
    • CommentTimeOct 30th 2007
     permalink
    Having multiple maps is totally possible. So it must be something else that is going on. Do you have a link to your page or code you could share?
    • CommentAuthorsjw
    • CommentTimeOct 30th 2007
     permalink
    this is the code I am using:

    <div id="map" style="width:380px; height:280px;">
    </div>
    <script type="text/javascript">
    //<![CDATA[



    var map = new GMap(document.getElementById("map"));

    map.centerAndZoom(new GPoint(18.198581, 49.803675), 4);

    map.addControl(new GLargeMapControl());

    var point = new GPoint(18.198581, 49.803675);

    var marker = new GMarker(point);

    // helper function to add a marker to the map
    function add_bubble(x, y, popupid) {
    marker = new GMarker(new GPoint(x, y));
    marker.popupid = popupid; // register ID on object for later

    // register an event handler to open the window on click
    GEvent.addListener(map, 'click', marker_clicked);

    map.addOverlay(marker);
    }

    // event handler; opens info window for marker
    function marker_clicked(marker) {
    // retrieve the element to show in the window
    element = document.getElementById(marker.popupid);

    // we can't pass this element in because it gets destroyed
    // once the window is closed, so we make a copy
    element = element.cloneNode(true);

    // switch display from off to on
    element.style.display = "";

    // then open the window
    map.openInfoWindow(marker.getPoint(), element);
    }

    // having created the helper functions we can add our marker
    add_bubble(18.198581, 49.803675, "center");


    //]]>
    </script>

    <!-- This element is not displayed on the page, but get passed into
    the information window -->

    <div style="display:none; font:13px verdana, sans-serif; color:#000; width:150px; text-align:center; line-height:1.6em; padding:2px 5px 2px 15px;"
    id="center">window center</div>
    •  
      CommentAuthorjernigani
    • CommentTimeOct 30th 2007
     permalink
    You have to have separate divs for each map. like <div id="map_1"></div> If you want them to be displayed at the same time. Otherwise it will only display one map inside the div. The way google maps works.


    var map = new GMap(document.getElementById("map"));

    that's the id for the div

    Or at least the way I've used it. Is I have to create a div for each map I want to display. (if i want to have multiple maps on the same page) Then I create a function that i pass with the id, like through onclick.
    • CommentAuthorsjw
    • CommentTimeOct 30th 2007
     permalink
    thanks jernigani. such a simple solution.
    • CommentAuthorsjw
    • CommentTimeOct 30th 2007
     permalink
    one small point thought. even though the maps now have 2 ids the bubbles seem a bit confused. when I click on the marker on the top map the bubble appears on the map below it. I've gone through the script and tried a few amateur changes with no result or the bubbles disappear altogether.
    •  
      CommentAuthorjernigani
    • CommentTimeOct 30th 2007
     permalink
    Well a quick fix would just to make a second div for the popup as well, with different id's.

    dont forget to clear your overlay.
    That should work, put it at the beginning of your popup function.

    map.clearOverlays();


    And also note that your 'map' variable might need to change if you are calling two different id's without using a function.

    When does your map get the bubble passed to it? on a click? Do the maps appear on page load?

    If the popup just appears because you call the function, it will take the last instance of the map variable.
    • CommentAuthorsjw
    • CommentTimeOct 30th 2007
     permalink
    I call the function so I guess that's why. :-(
    • CommentAuthorsjw
    • CommentTimeOct 30th 2007
     permalink
    thanks anyway!
Add your comments
    Username Password
  • Format comments as (Help)