Mehrere asynchrone Google Maps onclick

Question

Ich versuche verschiedene Google Maps zu laden, je nachdem auf welchen Link sie klicken. Etwas wie folgt aus:

Zuerst klickt ein Benutzer auf einen Link wie ...

<a class="loadMap" href="?map&center=44.370987,-85.407715">load map 1</a> 

... oder ...

<a class="loadMap" href="?map&center=23.4567,-80.234523">load map 2</a> 

Die Google Maps API dann asynchron geladen wird (wenn es wurde nicht bereits geladen). Die Karte Zentrum vom href des Links genommen geklickt wird, und dann wird die Karte direkt unter dem Link angezeigt, die (etwas in jQuery wie $ (this) .Nach (showmap);) geklickt wurde

I‘ Ich habe Beispiele gefunden, die load a single map asynchronously, aber ich kann nicht herausfinden, wie Sie verschiedene Map-Parameter übergeben, um eine andere Karte zu laden und relativ zu dem Link, der geklickt wurde, zu platzieren.

Answer 1

• Demo:http://bit.ly/HiIWxd

 function initialize(map_id, lat, lng) { 
      var myOptions = { 
       zoom : 8, 
       center : new google.maps.LatLng(lat, lng), 
       mapTypeId : google.maps.MapTypeId.ROADMAP 
      }; 
      var map = new google.maps.Map(document.getElementById(map_id), myOptions); 
     } 

     $(function() { 
      $('.loadMap').click(function(e) { 
       e.preventDefault(); 
       var cooordinates = this.hash.split('=')[1].split(','); 
       var lat = cooordinates[0]; 
       var lng = cooordinates[1]; 
       var map = this.id + '-map'; 

       if($('#maps_canvas #' + map).length === 0) { 
        $('<div class="map_style" id="' + map + '">').appendTo('#maps_canvas'); 
        initialize(map, lat, lng); 
       } 
      }); 
     }); 

• HINWEIS: siehe Demo-Quelle für vollständigen Code