Search code examples
google-mapsgoogle-maps-api-3geometry

Calculating the latitude and longitude of two circumscribed lines of two circles and four intersection points in Google Maps API

I would like to know the latitude and longitude of two circumscribed lines of two circles and four points in the Google Maps API.

The radii of the center coordinates of the two circles are the same, and the radii of the two circles are the same.

The picture below is a simple image displayed in the Google Maps API.

enter image description here

This picture marked what I wanted to know enter image description here

While searching, I looked at various concepts such as trigonometric functions, Pythagorean theorem, radian, etc. I tried it alone, but it was difficult, so I asked for help. please

https://developers.google.com/maps/documentation/javascript/shapes?hl=ko#maps_polyline_simple-javascript

If you click jsfiddle at this Google Maps api address and insert this code, the image sample above will appear.

//test js code
const citymap = {
    chicago: {
        center: { lat: 33.8, lng: 130.6 },
    },
    newyork: {
      center: { lat: 35.7, lng: 133 },
    }
};

function initMap() {
  // Create the map.
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 6,
    center: { lat: 33.09, lng: 130.712 },
    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: 130000,
  });
}

var cirCle1center= google.maps.LatLng(33.8, 130.6)
var cirCle2center= google.maps.LatLng(35.7, 133)

var cirCle1X1 = 33.8;
var cirCle1Y1 = 130.6;
var cirCle2X1 = 35.7;
var cirCle2Y1 = 133;


var polyline = new google.maps.Polyline({
  path: [
    { lat: cirCle1X1, lng: cirCle1Y1 },
    { lat: cirCle2X1, lng: cirCle2Y1 }],
   strokeWeight: 2,
   strokeColor: '#FFAE00',
   strokeOpacity: 0.8,
   strokeStyle: 'dashed',
   map: map
  });
}

window.initMap = initMap;

I tried to find the angle with two coordinates, but I don't know how to find the circumscribed line of the two circles and the latitude and longitude of the four intersections.

Solution

  • The Geometry library provided by Google provides the means to calculate a heading (direction) and from that calculate the location of a point using the offset ~ essentially as pointed out by @MrUpsidown.

    <!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title>Google Maps: Circles</title>
        <style>
            #map{
                width:800px;
                height:600px;
                float:none;
                margin:auto;
            }
        </style>
        <script>
        
            class marker{
                constructor( map, latlng, args={}){
                    this.map=map;
                    this.latlng=latlng;
                    this.args=args;
                    return this.create();
                };
                create(){
                    let options=Object.assign({
                        clickable:true,
                        draggable:false,
                        position:this.latlng,
                        map:this.map
                    },this.args );
                    
                    return new google.maps.Marker( options );
                };
            };

            
            function initMap() {
                const radius=130000;
                const div=document.getElementById('map');
                
                const citymap = {
                    chicago: {
                        center: { lat: 33.8, lng: 130.6 },
                    },
                    newyork: {
                        center: { lat: 35.7, lng: 133 },
                    }
                };
                
                const map = new google.maps.Map( div, {
                    zoom: 6,
                    center: { 
                        lat: 33.09, 
                        lng: 130.712 
                    },
                    mapTypeId: "roadmap"
                });
                
                // store references to plotted circles and calculated points
                let circles={};
                let points={};
                
                const keys=Object.keys( citymap );  // these are newyork & chicago
                const oSpherical=google.maps.geometry.spherical;    // the Google Geometry library to help calculate heading & offset
                
                
                // helper function to take start/end points
                // and radius to determine the tangents to the circle
                const locatetangents=(start,end,radius)=>{
                    let heading=oSpherical.computeHeading(
                        start.getCenter(),
                        end.getCenter()
                    );
                    return [
                        oSpherical.computeOffset(
                            start.getCenter(),
                            radius,
                            heading+90
                        ),
                        oSpherical.computeOffset(
                            start.getCenter(),
                            radius,
                            heading-90
                        )
                    ];
                };
                
                // utility to add markers
                const addmarkers=( city, arr )=>arr.forEach( ( point, i )=>new marker( map, point, { title:`${city}-${i}` } ) );
                
                
                // plot two circles...
                for( const city in citymap ) {
                    circles[ city ]=new google.maps.Circle({
                        strokeColor: "#FF0000",
                        strokeOpacity: 0.2,
                        strokeWeight: 2,
                        fillColor: "#FF0000",
                        fillOpacity:0.1,
                        map:map,
                        center:citymap[ city ].center,
                        radius:radius
                    });
                }
                
                
                let start=circles[ keys[0] ];
                let end=circles[ keys[1] ];             
                
                // origin
                points[ keys[0] ]=locatetangents( start, end, radius );
                addmarkers( keys[0], points[ keys[0] ] );
                
                //endpoint ( swap start/end )
                points[ keys[1] ]=locatetangents( end, start, radius );
                addmarkers( keys[1], points[ keys[1] ] );
                
                
                // do whatever you need to with 4 deduced points
                Object.keys( points ).forEach(city=>{
                    let a=points[city];
                    console.log(
                        'City: %s - points[ lat:%s, lng:%s ],[ lat:%s, lng:%s ]',
                        city, a[0].lat(), a[0].lng(), a[1].lat(), a[1].lng()
                    )
                });
                
                
                
                // connect circle centres...why?
                new google.maps.Polyline({
                    path: [
                        circles[ keys[0] ].getCenter(),
                        circles[ keys[1] ].getCenter()
                    ],
                    strokeWeight:2,
                    strokeColor:'blue',
                    strokeOpacity:1,
                    map:map
                });
                
            }
        </script>
        <script async defer src='//maps.googleapis.com/maps/api/js?key=AIzaSyBq...............&callback=initMap&libraries=geometry'></script>
    </head>
    <body>
        <div id='map'></div>
    </body>
</html>

    Rendered output