Missing markers when two Google maps divs are placed on same page

Google is making constant changes to their APIs and they seem to roll the alpha/beta versions for us to test. Which should be fine unless you expect your webpage to be stable and working all the time.

One of the issues in current version of Google APIs is problem of missing markers when you try to place two or more Google maps objects on a page. All maps are displayed in their div tags as expected, but only one of them gets the markers actually displayed. No error message is displayed, individual maps work with markers when they are separated, but together they don’t.

The only solution I have found so far is to tell Google that we want to use Stable Google Map API instead of latest. Do to it add v=3.0 version selector to URL of JavaScript librery, i.e. instead of

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true">
</script>

use

<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.0&sensor=true">
</script>

So far I haven’t noticed any drawbacks of this solution. New unstable versions probably add new features and/or improve performance, but I’m willing to wait until the changes are tested and moved to stable API. I bet you do also.

Share