JSFiddle - React, Tailwind, and code Playground

Google Maps Initial Test. Plotting a circle over my house.

by secretgspot

HTML

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

CSS

html, body, #map_canvas {height: 100%;}
body {margin: 0; padding: 0}

JavaScript

window.onload = function(){
    var dotFactor = 500000;
    var initialZoom = 5;
    var joplin = new google.maps.LatLng(37.081476,-94.510574);
    var myHome = new google.maps.LatLng(45.001586,-93.495669);
    
    // draw the map
    var mapContainer = document.getElementById('map_canvas');
    var usMap = new google.maps.Map(mapContainer, {
        zoom: 5,
        center: joplin,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    
    function getRadius(zoom) {
        return dotFactor / Math.pow(2, zoom);
    }
    
    // place the dot
    var dotOptions = {
      strokeColor: "#FF0000",
      strokeOpacity: 1.0,
      strokeWeight: 1,
      fillColor: "#FF0000",
      fillOpacity: 1.0,
      map: usMap,
      center: myHome,
      radius: getRadius(initialZoom)
    };
    var myDot = new google.maps.Circle(dotOptions);
    
    // listen for zooms
    google.maps.event.addListener(usMap, 'zoom_changed', function(){
        myDot.setRadius(getRadius(usMap.getZoom()));
    });
    
};