JSFiddle - React, Tailwind, and code Playground

by netsi1964

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="http://maps.gstatic.com/intl/en_us/mapfiles/api-3/9/14/main.js"></script>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<div id="map_canvas"></div>

JavaScript

function initialize() {

        var mapOptions = {
          zoom: 4,
          center: new google.maps.LatLng(-25.363882, 131.044922),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById('map_canvas'),
            mapOptions);

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

        google.maps.event.addListener(map, 'center_changed', function() {
          // 3 seconds after the center of the map has changed, pan back to the
          // marker.
          window.setTimeout(function() {
            map.panTo(marker.getPosition());
          }, 3000);
        });

        google.maps.event.addListener(marker, 'click', function() {
          map.setZoom(8);
          map.setCenter(marker.getPosition());
        });
alert(1)
      }

(function() {
    initialize()
})();