JSFiddle - React, Tailwind, and code Playground

by Pradeep Shankar

HTML

<!DOCTYPE html>
<html>
    
    <head>
        <script src="http://maps.googleapis.com/maps/api/js">
            
        </script>
        <script>
            var myCenter = new google.maps.LatLng(51.508742, -0.120850);

            function initialize() {
                var mapProp = {
                    center: myCenter,
                    zoom: 5,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };

                var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

                var marker = new google.maps.Marker({
                    position: myCenter,
                    title: 'Click to zoom'
                });

                marker.setMap(map);

                // Zoom to 9 when clicking on marker
                google.maps.event.addListener(marker, 'click', function() {
                    map.setZoom(9);
                    map.setCenter(marker.getPosition());
                });

                google.maps.event.addListener(marker, 'dblclick', function() {
                    alert();
                });
            }
            google.maps.event.addDomListener(window, 'load', initialize);
        </script>
    </head>
    
    <body>
        <div id="googleMap" style="width:500px;height:380px;"></div>
    </body>

</html>