Simple click event

by Wolf

HTML

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?v=3.32&callback=initMap&key=AIzaSyCOW7b0eVJzLBlTz1eY9XP04VJ48C_uaMQ">


</script>

CSS

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */

#map {
  height: 100%;
}

/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

JavaScript

var x=0, y=0;
var movable=false;

function initMap() {
  var myLatlng = {
    lat: -25.363,
    lng: 131.044
  };

	var mapDiv = document.getElementById('map');
  var map = new google.maps.Map(mapDiv, {
    zoom: 4,
    center: myLatlng
  });

	google.maps.event.addDomListener(mapDiv, 'mouseenter', function(event) {
  	x = 0;
    y = 0;
  });

  google.maps.event.addDomListener(mapDiv, 'mousemove', function(event) {
	  var proj = map.getProjection();
    var scale = Math.pow(2, map.getZoom());
    if(x==0 || isNaN(x)) {
      x = event.clientX
    }
    if(y==0 || isNaN(y)) {
      y = event.clientY
    }

		// Calculate the delta and divide by scale since we're in world coordinates
    deltaX = (x - event.clientX) / scale;
    deltaY = (y - event.clientY) / scale;

    // save the new location of the cursor
    x = event.clientX
    y = event.clientY
    // In Maps API version 3.32 and up map.panBy will apply smoothing if x or y is less than the size of the map.
    // Get the center of the map in pixel coords.
    var center = proj.fromLatLngToPoint(map.getCenter());
    // apply the delta to the center.
    center.x += deltaX;
    center.y += deltaY;
    // Move the center of the map by the delta.
    map.setCenter(proj.fromPointToLatLng(center));
  });
}