JSFiddle - React, Tailwind, and code Playground

by Cristofer Sousa

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;signed_in=true"></script>
<div id="map-canvas"></div>

CSS

html, body, #map-canvas {
     height: 100%;
     width: 100%;
     margin: 0px;
     padding: 0px
 }

JavaScript

// This example creates circles on the map, representing
// populations in North America.

// First, create an object containing LatLng and population for each city.
var citymap = {};
citymap.araraquara1 = {
    center: new google.maps.LatLng(-21.78178, -48.192276),
    population: 10000
};
citymap.araraquara2 = {
    center: new google.maps.LatLng(-21.78178, -48.192276),
    population: 100000
};
citymap.araraquara3 = {
    center: new google.maps.LatLng(-21.78178, -48.192276),
    population: 1000000
};


var cityCircle;

function initialize() {
    // Create the map.
    var mapOptions = {
        zoom: 8,
        center: new google.maps.LatLng(-21.78178, -48.192276),
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };

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

    // Construct the circle for each value in citymap.
    // Note: We scale the area of the circle based on the population.
    for (var city in citymap) {
        var populationOptions = {
            strokeColor: '#F2822C',
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: '#F2822C',
            fillOpacity: 0.35,
            map: map,
            center: citymap[city].center,
            radius: Math.sqrt(citymap[city].population) * 100
        };
        // Add the circle for this city to the map.
        cityCircle = new google.maps.Circle(populationOptions);
    }
}

google.maps.event.addDomListener(window, 'load', initialize);