Created
October 3, 2017 17:11
-
-
Save lperichon/c5e805e91f86d34412984699fa22c807 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script> | |
| // Note: This example requires that you consent to location sharing when | |
| // prompted by your browser. If you see the error "The Geolocation service | |
| // failed.", it means you probably did not give permission for the browser to | |
| // locate you. | |
| function initMap() { | |
| var markers = []; | |
| var map = new google.maps.Map(document.getElementById('map'), { | |
| center: {lat: 35, lng: -50}, | |
| zoom: 2 | |
| }); | |
| // Add markers to the map | |
| var places = <%= @events.to_json(include: {place: {methods: [:name, :lat, :lng, :place_id]}}, only: [:id, :place] ).html_safe %> | |
| // Loop over each of the json elements | |
| for (var i = 0, length = places.length; i < length; i++) { | |
| var data = places[i], | |
| latLng = new google.maps.LatLng(data.place.lat, data.place.lng), | |
| infowindow = null, | |
| content = "<h4>"+ data.place.name +"</h4> <a class='btn btn-primary btn-sm' data-remote='true' href='/events/" + data.id + "/requests/new'><%= t('pages.open-school-day.cta-text') %></a>"; | |
| // Create a marker and place it on the map | |
| var icon = '/assets/marker.png'; | |
| var marker = new google.maps.Marker({ | |
| position: latLng, | |
| map: map, | |
| icon: icon, | |
| event_id: data.id | |
| }); | |
| markers.push(marker); | |
| $(".events-select option[value=" + data.id + "]").data("marker", marker); | |
| google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){ | |
| return function() { | |
| if (infowindow) { | |
| infowindow.close(); | |
| } | |
| infowindow = new google.maps.InfoWindow(); | |
| infowindow.setContent(content); | |
| infowindow.open(map,marker); | |
| marker.map.panTo(marker.position); | |
| map.setZoom(14); | |
| if(marker.event_id != $(".events-select").val()) { | |
| $(".events-select").val(marker.event_id).trigger("change"); | |
| } | |
| }; | |
| })(marker,content,infowindow)); | |
| } | |
| // Try HTML5 geolocation. | |
| if (navigator.geolocation) { | |
| navigator.geolocation.getCurrentPosition(function(position) { | |
| var pos = { | |
| lat: position.coords.latitude, | |
| lng: position.coords.longitude | |
| }; | |
| find_closest_marker(pos, map, markers); | |
| }, | |
| handleLocationError | |
| ); | |
| } else { | |
| // Browser doesn't support Geolocation | |
| } | |
| } | |
| function handleLocationError(error) { | |
| if (error.code == error.PERMISSION_DENIED) { | |
| $("#error").show(); | |
| } | |
| } | |
| function rad(x) {return x*Math.PI/180;} | |
| function find_closest_marker(center, map, markers) { | |
| var lat = center.lat; | |
| var lng = center.lng; | |
| var R = 6371; // radius of earth in km | |
| var distances = []; | |
| var closest = -1; | |
| for( i=0;i<markers.length; i++ ) { | |
| var mlat = markers[i].position.lat(); | |
| var mlng = markers[i].position.lng(); | |
| var dLat = rad(mlat - lat); | |
| var dLong = rad(mlng - lng); | |
| var a = Math.sin(dLat/2) * Math.sin(dLat/2) + | |
| Math.cos(rad(lat)) * Math.cos(rad(lat)) * Math.sin(dLong/2) * Math.sin(dLong/2); | |
| var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); | |
| var d = R * c; | |
| distances[i] = d; | |
| markers[i].distance = d; | |
| if ( closest == -1 || d < distances[closest] ) { | |
| closest = i; | |
| } | |
| } | |
| //Log title of closest marker | |
| focusMarker(markers[closest]); | |
| } | |
| function focusMarker(marker) { | |
| google.maps.event.trigger(marker, 'click'); | |
| } | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment