JSFiddle - React, Tailwind, and code Playground

by sarathsprakash

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;extension=.js"></script>
<input type="button" />
<div id="map"></div>

CSS

#map {
     height: 500px;
     width: 500px;
 }

JavaScript

var myCenter = new google.maps.LatLng(51.508742, -0.120850);
var mapProp = {
    center: myCenter,
    zoom: 5,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapMaker: true,
  
};
var map = new google.maps.Map(document.getElementById("map"), mapProp);
var marker = new google.maps.Marker({
    position: myCenter,
    animation: google.maps.Animation.DROP,
    draggable:true,
   
});
marker.setMap(map);
var myCity = new google.maps.Circle({
  center:myCenter,
  radius:200000,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2,
  fillColor:"#0000FF",
  fillOpacity:0.4
});
myCity.setMap(map);
$('input').click(function () {
    alert(map.getHeading());
});
var infowindow = new google.maps.InfoWindow({
  content:"Hi"
  });

infowindow.open(map,marker);