Maps smooth animation

by tatorodrigo

HTML

<!-- put your api key ?key=XXXXX -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
<ul id="menu"></ul>

CSS

html, body {
	height: 100%;
  margin: 0;
  background-color: #20262e;
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
}

a {
  color: #CCC;
  text-decoration: none
}

a:hover {
  color: #FFF
}

ul {
  list-style: none;
	margin: 1em 0;
	padding: 0;
}

li {
  padding: 20px 16px 10px 16px;
}

#map {
  width: 100%;
  height: 100%;
}

#menu {
  background-color: rgba(0,0,0,.8);
	border-radius: .25em;
	left: 2em;
	max-height: calc(100% - 4em);
	overflow: auto;
	position: absolute;
	top: 2em;
	z-index: 99;
}

JavaScript

var map = new google.maps.Map(document.getElementById('map'), {
  center: new google.maps.LatLng(-21.214051,-47.9580056),
  zoom: 11,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  disableDefaultUI: true,
  gestureHandling: 'greedy'
})

var pois = [
	{label: "Ribeirão Preto", "latLng": new google.maps.LatLng(-21.214051,-47.9580056)},
  {label: "Jardim São José/Ribeirão Preto", "latLng": new google.maps.LatLng(-21.2306455,-47.7722293)},
  {label: "Uberlândia", "latLng": new google.maps.LatLng(-18.9218962,-48.3336058)},
  {label: "São Paulo", "latLng": new google.maps.LatLng(-23.6815314,-46.8754974)},
]

/**
 * Handy functions to project lat/lng to pixel
 * Extracted from: https://developers.google.com/maps/documentation/javascript/examples/map-coordinates
 **/
function project(latLng) {
	var TILE_SIZE = 256

	var siny = Math.sin(latLng.lat() * Math.PI / 180)

	// Truncating to 0.9999 effectively limits latitude to 89.189. This is
	// about a third of a tile past the edge of the world tile.
	siny = Math.min(Math.max(siny, -0.9999), 0.9999)

	return new google.maps.Point(
		TILE_SIZE * (0.5 + latLng.lng() / 360),
		TILE_SIZE * (0.5 - Math.log((1 + siny) / (1 - siny)) / (4 * Math.PI)))
}

/**
 * Handy functions to project lat/lng to pixel
 * Extracted from: https://developers.google.com/maps/documentation/javascript/examples/map-coordinates
 **/
function getPixel(latLng, zoom) {
	var scale = 1 << zoom
	var worldCoordinate = project(latLng)
	return new google.maps.Point(
            Math.floor(worldCoordinate.x * scale),
            Math.floor(worldCoordinate.y * scale))
}

/**
 * Given a map, return the map dimension (width and height)
 * in pixels.
 **/
function getMapDimenInPixels(map) {
	var zoom = map.getZoom()
	var bounds = map.getBounds()
	var southWestPixel = getPixel(bounds.getSouthWest(), zoom)
	var northEastPixel = getPixel(bounds.getNorthEast(), zoom)
	return {
		width: Math.abs(southWestPixel.x - northEastPixel.x),
		height: Math.abs(southWestPixel.y -...