Search code examples
javascripthtmldebugginggoogle-mapsgoogle-maps-api-3

Google Maps V3: Multiple maps on a page resulting in missing markers

I have multiple Google Maps on a single page.

Scenario:

  • Maps are working as expected when used alone on a page.
  • I am using 2 maps on the same page.

Working Case: :)

  • 1st map uses Unstyled-Markers (Default markers)
  • 2nd map uses Styled-Markers [ Refer : Styled Markers ]
  • Both maps shows the markers as expected.
  • Refer code at [ http://pastebin.com/ciphPXZc ]

Problem Case: :(

  • 1st map uses Styled-Markers [ Refer : Styled Markers ]
  • 2nd map uses Unstyled-Markers (Default markers)
  • 1st map shows no markers at all
  • Refer code at [ http://pastebin.com/HyYhgsbm ]

I am not able to understand how are the maps affecting each other even when there is no clash of variable names.

Also, how can the order of maps affect it?

Solution

  • It's because of the way you are loading the API and the StyledMarker extension. Do both only once, and as early as possible (preferably in the <head> section).

    <html>
<head>
    <script src="http://maps.googleapis.com/maps/api/js?v=3.6&sensor=true&language=en-us"></script>
    <script src="/site_media/js/google_maps/StyledMarker.js"></script>
</head>

    Don't include the scripts anywhere else.

    In the first example, you load the API, then do that again and then the StyledMarker extension, and then you call map1() and map2(). But because the StyledMarker extension is loaded last, everything works.

    In the second example, you load the API and the StyledMarker extension, then you load the API again, then you call map1() and attempt to use styled markers. However loading the API the second time may well have obliterated the StyledMarker extension.