<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=visualization&key=AIzaSyAvBQ1Q9FjYfxdWJF6KPmO822RMMbY2w2o"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script src="lib/three.js"></script>
    <script src="lib/dat.gui.js"></script>
    <script src="dotlayer.js"></script>



    var mymap,  
        heatmap,
        dotlayer,
        pointArray = new google.maps.MVCArray();


                        
        function initialize() {
        var mapOptions = {
            zoom: 13,
            center: new google.maps.LatLng(37.774546, -122.433523),
            mapTypeId: google.maps.MapTypeId.SATELLITE
            };

            mymap = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
            google.maps.event.addListener(mymap, 'idle', function () { 
                console.log('mapped up and good to go');
                // Generate a desired boundary in the center ninth of the map
                
                
        }); 
            
    }

    function createDotlayer() {
        if(dotlayer && dotlayer instanceof google.maps.DotLayer) {
            dotlayer.setMap(dotlayer.getMap() ? null : mymap);  
        } else {
            console.log(dotlayer,'not constructed');
            require( ["jquery", "dotlayer"],   function(jQuery, DotLayer) {
                heatmap && heatmap.setMap(null);
                dotlayer = new google.maps.DotLayer({
                    map: mymap,
                    container: '#dotlayer_controls',
                    controlbox: true,
                    DataSet: pointArray
                });
                jQuery('#dotlayer_msg')
                    .fadeIn('slow')
                    .find('p')
                    .html('Go ahead. Zoom and play with the controls!');
            });
        }
    }

    function generatePoints() {
        var pointquantity=document.getElementById('pointquantity').value;
        
        var desiredboundary = {};
            desiredboundary.lngdif = mymap.getBounds().getNorthEast().lng() - mymap.getBounds().getSouthWest().lng();
            desiredboundary.latdif = mymap.getBounds().getNorthEast().lat() - mymap.getBounds().getSouthWest().lat();
            desiredboundary.latmin=mymap.getBounds().getSouthWest().lat() + desiredboundary.latdif/3
            desiredboundary.lngmin= mymap.getBounds().getSouthWest().lng() + desiredboundary.lngdif/3

            
            for (var repetition = 0; repetition < pointquantity; repetition++) {
                var randomlat=desiredboundary.latmin + 1*desiredboundary.latdif * Math.random()/3,
                randomlng=desiredboundary.lngmin + 1*desiredboundary.lngdif * Math.random()/3;

                pointArray.push(new google.maps.LatLng(randomlat,randomlng ));
            }
            document.getElementById('message').innerHTML='Generated '+pointquantity+' random points.';
            createDotlayer();
    }
    



                     

    google.maps.event.addDomListener(window, 'load', initialize);
</script>