JSFiddle - React, Tailwind, and code Playground
HTML
<div id="map-canvas"></div>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
CSS
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
}
#map-canvas {
height: 100%;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 0;
}
TypeScript
function initialize() {
var zoomedIn = false;
var maxZoomIn = 15;
var maxZoomOut = 4;
var timeOut = 2000; //1000 is one second
var image = {
url: 'http://google.com/mapfiles/ms/icons/orange-dot.png'
};
var myLatlng = new google.maps.LatLng(46.100278,19.665556
);
var mapOptions = {
zoom: maxZoomOut,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
});
google.maps.event.addListener(map,'click',function() {
if(!zoomedIn)
{
smoothZoom(map, maxZoomIn, map.getZoom(), true);
zoomedIn = true;
}
else
{
smoothZoom(map, maxZoomOut, map.getZoom(), false);
zoomedIn = false;
}
});
function smoothZoom(map, level, cnt, mode)
{
if(mode == true)
{
if (cnt >= level) {
return;
}
else
{
if((maxZoomOut + 2) <= cnt)
{
var z = google.maps.event.addListener(map, 'zoom_changed', function(event)
{
google.maps.event.removeListener(z);
map.setCenter(marker.getPosition());
smoothZoom(map, level, cnt + 1, true);
});
setTimeout(function(){map.setZoom(cnt);}, timeOut);
}
else
{
map.setZoom(cnt);
smoothZoom(map, level, cnt + 1, true);
}
}
}
else
{
if (cnt < level) {
return;
}
else
{
var z =...