Home Antipode

Home Antipode

by itsazzad

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Circles</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCPJpjD-qcR_yIxJnS8maR5W9KB0E3EzYI&callback=initMap&libraries=&v=weekly"
      defer
    ></script>
    <!-- jsFiddle will insert css and js -->
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

CSS

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
#map {
  height: 100%;
}

/* Optional: Makes the sample page fill the window. */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

JavaScript

"use strict";

const earthRadius = 6371*1000;

const citymap = {
  antipode: {
    center: {
      lat: -23.639334,
      lng: -90.450923
    },
    population: earthRadius
  },
  home: {
    center: {
      lat: 23.639334,
      lng: 89.549077
    },
    population: earthRadius
  },
};

function initMap() {
  // Create the map.
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: citymap.antipode.center,
    mapTypeId: "terrain"
  }); // Construct the circle for each value in citymap.
  // Note: We scale the area of the circle based on the population.

  for (const city in citymap) {
    // Add the circle for this city to the map.
    const cityCircle = new google.maps.Circle({
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#FF0000",
      fillOpacity: 0.35,
      map,
      center: citymap[city].center,
      radius: citymap[city].population
    });
  }
  
  const flightPlanCoordinates1 = [
    citymap.home.center,
    citymap.antipode.center,
    citymap.home.center,
  ];
  const flightPlanCoordinates2 = [
    citymap.antipode.center,
    citymap.home.center,
    citymap.antipode.center,
  ];
  const flightPath1 = new google.maps.Polyline({
    path: flightPlanCoordinates2,
    geodesic: true,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2
  });
 
  const flightPath2 = new google.maps.Polyline({
    path: flightPlanCoordinates1,
    geodesic: false,
    strokeColor: "#F0FF0F",
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

  flightPath1.setMap(map);
	flightPath2.setMap(map);

}