I have drawn circle using
circle = new google.maps.Circle({
map: map,
radius: r, // 1 miles in metres = 1609.3 m
strokeWeight:1,
strokeOpacity:0.5,
fillOpacity:0.2,
fillColor: '#AA0000'
});
circle.bindTo('center', marker, 'position');
How to remove circle from the map ?
circle.setMap(null);
will remove the circle
Related
I have two points represented by (lat, lng) and a circle represented center = point(lat, lng) and radius.
[2] pry(main)> points
=> [#<struct Geography::Point x=8.6836, y=56.7619>, #<struct Geography::Point x=8.7501, y=56.8298>]
[3] pry(main)> circle
=> #<struct Geography::Circle center=#<struct Geography::Point x=8.71685, y=56.79585>, radius=5253.053885917054>
I have a method that calculates the distance using Haversine formula so if I do it from the center of the circle towards both points, I'll get:
[4] pry(main)> Geography::Utils.distance_between(circle.center, points.first)
=> 5253.053885917054
[5] pry(main)> Geography::Utils.distance_between(circle.center, points.second)
=> 5252.8180384905045
Please note that the distance between the first point and the center of the circle is the actual radius of the circle. All the distances are in meters. What I mean by this is that one point is on the arc and the one should be super close.
Expected result:
If I represent that in google maps, the arc of the circle will pass through one point and be super close to second.
Actual result:
Question
How does google maps projection works in my case and how can I have an ouput that satisfies the reality?
Map code:
:coffeescript
window.createPostcodeMarker = (postcode) ->
marker = new google.maps.Marker
draggable: false
raiseOnDrag: false
position: postcode.position
map: map
tooltip: postcode.name
icon:
path: google.maps.SymbolPath.CIRCLE
fillOpacity: 1
strokeOpacity: 1
strokeColor: postcode.stroke_color
strokeWeight: 1
scale: 3
fillColor: postcode.stroke_color
circle = new google.maps.Circle
map: map
radius: postcode.radius
fillColor: postcode.fill_color
strokeColor: postcode.stroke_color
strokeWeight: 1
strokeOpacity: 0.8
circle.bindTo('center', marker, 'position')
marker
window.createAreaMarker = (area) ->
marker = new google.maps.Marker
draggable: false
raiseOnDrag: false
position: area.position
map: map
tooltip: area.name
icon:
path: google.maps.SymbolPath.CIRCLE
fillOpacity: 0.3
strokeOpacity: 0.3
strokeColor: area.stroke_color
strokeWeight: 1
scale: 0
fillColor: area.stroke_color
circle = new google.maps.Circle
map: map
radius: area.radius
fillColor: area.fill_color
strokeColor: area.stroke_color
strokeWeight: 1
strokeOpacity: 0.3
circle.bindTo('center', marker, 'position')
marker
window.googleMapsInitializePostcodesMap = ->
if PageData?.postcodesData?
window.bounds = new google.maps.LatLngBounds()
window.markers = []
mapOptions =
mapTypeId: google.maps.MapTypeId.ROADMAP
maxZoom: 13
window.map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions)
# Create markers & extend bounds
for postcode in PageData.postcodesData
marker = createPostcodeMarker(postcode)
markers.push(marker)
bounds.extend(marker.position)
for area in PageData.areasData
marker = createAreaMarker(area)
markers.push(marker)
window.map.fitBounds(bounds)
= json_data_tag(#postcodes_map_data, 'postcodesData')
= json_data_tag(#areas_map_data, 'areasData')
#map-canvas{style: "width: 100%; height: 600px;"}
- content_for :footer_javascripts do
= google_maps_api_js("googleMapsInitializePostcodesMap")
Codepen: https://codepen.io/radubogdan/pen/gWEvZP
You should use the Spherical Geometry library that can be loaded as part of the Javascript Maps API by appending &libraries=geometry when loading the API - for example:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry">
The advantage of this method is that it abstracts away the implementation details of the default projection in the Maps API. This makes your life easy, and more importantly, will not break if that default projection ever changes.
Pass the lat/lng coordinates down to the browser and compute the distance between them (in meters) as follows:
var location1 = new google.maps.LatLng(lat1, lng1);
var location2 = new google.maps.LatLng(lat2, lng2);
var distance = google.maps.geometry.spherical.computeDistanceBetween(location1, location2);
or in Coffeescript:
location1 = new google.maps.LatLng lat1, lng1;
location2 = new google.maps.LatLng lat2, lng2;
distance = google.maps.geometry.spherical.computeDistanceBetween location1, location2;
The radius for the circle needs to be the distance between the center of the circle and CoordinateA in meters.
Once you convert to meters, the following site shows that 4288 should be the radius of the circle https://www.daftlogic.com/projects-google-maps-distance-calculator.htm?route=56.79585,8.716850000000022|56.7619,8.68360000000007
Basically, your Haversine formula isn't giving you exactly what you need yet.
I'm starter and sorry for my poor English.
Summery: I have two events:
google.maps.event.addListener(map, 'click', function(e)
and
google.maps.event.addListener(mpolygon, 'click', function(e)
But I want both of them together. Something like this:
google.maps.event.addListener(map, mpolygon 'click', function(e)
Explanation:
I have developed a very simple program to understand Google maps better.
This code uses geometry library. We have a polygon on the map. When we click on the map the program creates a green circle marker on the map. But when we click on the polygon it should creates a red circle marker on the polygon. My problem is that When I click on the map it creates a green circle on the map because we have "google.maps.event.addListener(map, 'click', function(e)" But for create red marker on the polygon we have to change "google.maps.event.addListener(map, 'click', function(e)" to "google.maps.event.addListener(bermudaTriangle, 'click', function(e)"
I want both of them. I mean when I click on the map or on the bermudaTriangle both of them works.
I need something like this:
"google.maps.event.addListener(map, bermudaTriangle, 'click', function(e)"
Here is my source that just have one event.addListener and we can just click on the map to create green marker but I want it to have two event.addListener for map and for polygon:
google.maps.event.addListener(map, 'click', function(e) {
var result;
if (google.maps.geometry.poly.containsLocation(e.latLng, bermudaTriangle)) {
result = 'red';
}
else
{
result = 'green';
}
var circle = {
path: google.maps.SymbolPath.CIRCLE,
fillColor: result,
fillOpacity: .9,
strokeColor: 'white',
strokeWeight: .9,
scale: 10
};
new google.maps.Marker({
position: e.latLng,
map: map,
icon: circle
})
});
you have 2 options:
set the clickable-option of the bermudaTriangle to false . click-events on the polygon will no longer be captured and your current script will work as expected.
use only the listener for map and trigger a click on the map when you click on the bermudaTriangle:
google.maps.event.addListener(map, 'click', function(e,color) {
color=color||'green'
var circle = {
path: google.maps.SymbolPath.CIRCLE,
fillColor: color,
fillOpacity: .9,
strokeColor: 'white',
strokeWeight: .9,
scale: 10
};
new google.maps.Marker({
position: e.latLng,
map: map,
icon: circle
})
});
google.maps.event.addListener(bermudaTriangle, 'click', function(e) {
google.maps.event.trigger(map,'click',e,'red')
});
As you see the listener for the map-click now has a 2nd argument color .
When you click on the map, this argument is undefined (and defaults to green). When you click on the bermudaTriangle the argument is red .
The 2nd solution should be preferable when you need to apply this for multiple polygons, because you don't need to check if the latLng intersects any polygon.
I have a mousemove event in my map and now I want to draw a circle with just the stroke line.
var circle = new google.maps.Circle({
strokeColor: '#0000FF',
strokeWeight: 2,
fillOpacity: 0,
map: map,
center: new google.maps.LatLng(lat, lon),
radius: 100
});
The problem is that the transparent fill center of that circle is still "capturing" the mouse event so it doesn't go to my Map mousemove listener.
Is there any way to really set the circle fill center to transparent as in: transparent color AND transparent dealing with mouse events?
In alternative, a way to easily propagate the event to the Map?
Add clickable: false to the CircleOptions passed to the constructor:
var circle = new google.maps.Circle({
strokeColor: '#0000FF',
strokeWeight: 2,
fillOpacity: 0,
clickable: false,
map: map,
center: new google.maps.LatLng(lat, lon),
radius: 100
});
I'm working with Google Maps v3 and I use the MarkerManager to hide the markers on a certain zoom level. I bind circle objects to these markers. Anyway, they aren't hided when the markers are. How can I bind the circles to hide with the markers?
The binding:
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat,lng),
});
var circle = new google.maps.Circle({
map: map,
radius: 50,
});
circle.bindTo('center', marker, 'position');
Array.push(marker);
Did you solved your problem? If not add this:
circle.bindTo('map', marker);
Previously I get an answer to the linking of an element. My next question is: how can I get the "radius" parameter of a binded circle, from the marker?
The code:
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat,lng),
});
var circle = new google.maps.Circle({
map: map,
radius: 50,
});
circle.bindTo('map', marker);
circle.bindTo('center', marker, 'position');
Array.push(marker);
I need the cirlce's radius, which binded to the Array[x] marker. Any idea? Thanks in advance!
I don't think there's a way to get a bound object from an object.
What you can do is set the circle as an object on the marker
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat,lng),
});
var circle = new google.maps.Circle({
map: map,
radius: 50,
});
marker.circle = circle; // Add the circle object to the map object
circle.bindTo('map', marker);
circle.bindTo('center', marker, 'position');
Array.push(marker);
Now you can get the radius with
Array[x].circle.getRadius();
Working example