Question

I’m trying to load different Google Maps depending on what link they click. Something like this:

First, a user clicks a link like…

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

…or…

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

The Google Maps API is then loaded asynchronously (if it hasn’t been loaded already). The map center is taken from the href of the link clicked, and then the map is displayed right below the link that was clicked (something in jQuery like $(this).after(showMap);)

I’ve found examples that load a single map asynchronously, but I can’t figure out how to pass different map parameters to load a different map and place it relative to the link that was clicked.

Answer 1

• demo: 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);
                }
            });
        });

• NOTE: see demo source for full code