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")