Show bookmark in Google Maps Api Js (Only if you are inside the radio circle)

Question

Show bookmark in Google Maps Api Js (Only if you are inside the radio circle)

Navigation

#1 by (1 votes)

2

I need to show markers on a map, only if they are within the radius of the circle shown on the screen. But I do not know how to validate if the marker is or is not inside the radio.

var myLatLng = { lat: 14.151171, lng: -90.841083 };
var myLatLng2 = { lat: 14.15009000, lng: -90.84334708 };

function initMap() {

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 4,
      center: myLatLng,
      mapTypeId: 'terrain',
      zoom: 18
    });
  
    var markerYesShow = new google.maps.Marker({
      position: myLatLng,
      map: map,
      title: 'Yes Show Into Radio'
    });
    
    var markerNotShow = new google.maps.Marker({
      position: myLatLng2,
      map: map,
      title: 'Not Show '
    });
  
    var alerta = new google.maps.Circle({
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      map: map,
      center: myLatLng,
      radius: 100
    });
}

/* 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;
}

<div id="map"></div>
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js??key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

javascript google-maps

asked by raintrooper 30.10.2017 в 17:30

source

1 answer

Do not run event when a text box has focus Print a column of a csv

score 1 · Accepted Answer

You have a circle with center in the coordinates X1, Y1 and radius R. What you need is to verify that the point (X, Y) is at a distance of (X1, Y1) less than the value of R:

let ejeX=10,ejeY=10;
let radio=5;

function dentroDelCirculo(x,y) {
 return ((ejeX-x)**2 + (ejeY-y)**2) <= radio**2;
}

console.log('dentro?:' + dentroDelCirculo(14,10));
console.log('dentro?:' + dentroDelCirculo(75,35));

Note: ** is the power notation in JS, but in an old browser it may not work, so you can multiply each value yourself or use Math.pow to do the operation.