mutiple shortcode instance on the same page

I would do the following:

• Shortcodes to have unique names passed to them.
• According to that name to build div with a unique id and a js
  function with a unique name.
• Load google script at the end of template(in which there is
  likelihood to have google maps).
• Run the function to display the map when it is scrolled in view.

Not gonna go into how to to pass attributes to shortcode but the code should look something like this:

function map_shortcode($atts){
    //deal with $atts
    ?>
    <div id="map-<?php echo $unique_name ?>"></div>
    <script>
    function mapInit<?php echo $unique_name ?>() {
                var fenway = {lat: <?php echo $lat; ?>,
                lng: <?php echo $lng; ?>};

                var map = new google.maps.Map(document.getElementById('map-<?php echo $unique_name ?>'), {
                    center: fenway,
                    zoom: <?php echo $zoom; ?>
                });
    }
    $(document).ready(function( $ ) {
    functionWhenUserScrollsToMap(){ // I hope you can figure it out how to implement this
        mapInit<?php echo $unique_name ?>();
    }
    } );
    </script><?php
}

The important thing is:

• You only load once the google map script.
• Each map canvas should have unique id.
• Each map js function should have unique name.
• After the maps script has loaded you can call the functions.
• The document ready function and after the scroll should be sufficient
  for this.
• You may need to not load the google script asyncronously.