jquery - 多个异步 Google 地图 onclick

Question

我正在尝试根据他们点击的链接加载不同的谷歌地图。像这样的东西：

首先，用户单击一个链接，例如...

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

...或者...

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

然后异步加载 Google Maps API（如果尚未加载）。地图中心取自点击链接的 href，然后地图显示在点击链接的正下方（在 jQuery 中类似于$(this).after(showMap);）

我找到了异步加载单个地图的示例，但我不知道如何传递不同的地图参数以加载不同的地图并将其相对于单击的链接放置。

Answer 1

• 演示： https ://so.lucafilosofi.com/multiple-asynchronous-google-maps-onclick/

        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);
                }
            });
        });

• 注意：完整代码见演示源