Can't get multiple jQuery gMap on same page

Question

For some reason I can't get gMap to display multiple maps on the same page.

My setup is nearly identical to the examples, but just isn't working. I'm sure I'm missing something little.

Any thoughts?

Demo page here: http://play.artletic.com/jquery/gmaps.html

jQuery:

    $(function(){
 $("#map_1").gMap({
  controls: false,
  markers: [{ 
   address: "2844 Thornapple River Drive SE, Cascade, MI 49546",
   html: "Cascade" 
  }],
  address: "2844 Thornapple River Drive SE, Cascade, MI 49546",
  zoom: 9
 });

 $("#map_2").gMap({
  controls: false,
  markers: [{ 
   address: "5278 Plainfield Ave NE, Grand Rapids, MI 49525",
   html: "Grand Rapids - North" 
  }],
  address: "5278 Plainfield Ave NE, Grand Rapids, MI 49525",
  zoom: 9
 });

 $("#map_3").gMap({
  controls: false,
  markers: [{ 
   address: "6991 Kalamzoo Ave SE, Kentwood, MI 49508",
   html: "Grand Rapids - South" 
  }],
  address: "6991 Kalamzoo Ave SE, Kentwood, MI 49508",
  zoom: 9
 });
});

And Related HTML:

<div id="map_1" class="google_map"></div>
<div id="map_2" class="google_map"></div>
<div id="map_3" class="google_map"></div>

Answer 1

wow. trickey. The only difference I can see is on the example, it loads the map API then jQuery. On yours you do it the other way around. Stupid idea maybe...

Answer 2

It seems to be a bug in gMap plugin as it seems that gMap cannot initialize multiple maps on single page that have address lookup. When I changed one or two maps to regular latitude/longitude lookup, it showed these maps fine.

Try opening bug in gMap's issue tracker (if it exists) or reporting it to gMap developer.