JSFiddle - React, Tailwind, and code Playground

by Kai

HTML

<div id="wrapper">
    <div id="map_canvas"></div>
</div>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

CSS

#wrapper { width: 400px; margin: 0 auto }
#map_canvas { height: 400px; width: 400px }

JavaScript

(function () {
    
    var latlng = new google.maps.LatLng(42.649493,12.274795),
    
        mapOptions = {
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            zoom: 5,
            center: latlng
        },
        
        map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions),
        
        marker = new google.maps.Marker({
            position: latlng, 
            map: map, 
            animation: google.maps.Animation.DROP,
            title:"Hello, Italy!"
        }),
        
        infowindow = new google.maps.InfoWindow({
            content: "<div><img width='254' height='355' src='http://www.hyperpac.de/wp-content/uploads/2009/09/255px-Excitebike_cover.jpg'</div>"
        });
    
    function toggleBounce () {
        if (marker.getAnimation() != null) {
            marker.setAnimation(null);
        } else {
            marker.setAnimation(google.maps.Animation.BOUNCE);
        }
    }
    
    // Add click listener to toggle bounce
    google.maps.event.addListener(marker, 'click', function () {
        toggleBounce();
        infowindow.open(map, marker);
        setTimeout(toggleBounce, 1500);
    });
}());