Facebook

Wednesday, November 18, 2015

Maps - enable scroll after first click on map only

Complete script for google map that will enable zoom on clicking in the map area only



<script type='text javascript' src="https://maps.googleapis.com/maps/api/js?key=&sensor=false&extension=.js">
<script type='text javascript'="">
    jQuery(document).ready(function(){
        var latitude = $('#map_latitude').val();
        var longitude = $('#map_longitude').val();
        // When the window has finished loading create our google map below
        google.maps.event.addDomListener(window, 'load', init);
        function init() {
            // Basic options for a simple Google Map
            // For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
            var mapOptions = {
                // How zoomed in you want the map to start at (always required)
                zoom: 14,
                // The latitude and longitude to center the map (always required)
                center: new google.maps.LatLng(latitude,longitude),
                //Disable scroll wheel by default,
                scrollwheel: false,
                // How you would like to style the map.
                // This is where you would paste any style found on Snazzy Maps.
            // Get the HTML DOM element that will contain your map
            // We are using a div with id='map' seen below in the 
            var mapElement = document.getElementById('map');
            // Create the Google Map using out element and options defined above
            var map = new google.maps.Map(mapElement, mapOptions);
            var marker = new google.maps.Marker({

                map: map,

                position: map.getCenter(),

                icon: 'images/google-map-cion.png'

            });
            // Listen to click event on map and enable zoom
            map.addListener('click', function() {
                map.set('scrollwheel', true);
            });


        }
    })
    

</script>

DEMO

No comments:

Post a Comment