JSFiddle - React, Tailwind, and code Playground

by mdares

HTML

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

CSS

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

JavaScript

jQuery(document).ready(function () {
    var map;
    var birrfeld = new google.maps.LatLng(47.443411, 8.234478);
    var aelggialp = new google.maps.LatLng(46.80121, 8.226692);
    var zuerich = new google.maps.LatLng(47.463031, 8.549252);
    var options = {
        zoom: 8,
        center: aelggialp,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map($('#map')[0], options);

    var myCity = new google.maps.Circle({
        center: birrfeld,
        radius: 6000,
        strokeColor: "#0000FF",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#0000FF",
        fillOpacity: 0.4
    });
    var zuerich = new google.maps.Circle({
        center: zuerich,
        radius: 8000,
        strokeColor: "#0000FF",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#0000FF",
        fillOpacity: 0.4
    });

    myCity.setMap(map);
    zuerich.setMap(map);

});