I have the gem 'gmaps4rails' installed and currently the setup is to show the location:
<div style='width: 800px;'>
<div id="map" style='width: 800px; height: 400px;'></div>
</div>
<script>
handler = Gmaps.build('Google');
handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
markers = handler.addMarkers(<%=raw #hash.to_json %>);
handler.bounds.extendWith(markers);
handler.fitMapToBounds();
handler.getMap().setZoom(16);
});
</script>
I would like to show the current location on the map as well. Any ideas on how to implement that?
Append current user location hash into your array of location hash and Rest will be handled by Gmap4Rails
def show
#las = La.find(params[:id])
#hash = Gmaps4rails.build_markers(#las) do |la, marker|
marker.lat la.latitude
marker.lng la.longitude
end
append_cur_location
end
def append_cur_location
#hash << { :lat=>action[0], :lng=>action[1]}
end
def action
#lat_lng = cookies[:lat_lng].split("|")
end
Extras: If you want separate image for current user location.use below
{ :lat=>12.9698, :lng=>77.7499, :picture=>{:url=>user_image_path,
:width=>32, :height=>32} }
Related
I have been following the gmaps4rails tutorials on github but am not understanding how to customize the infowindow. I have a database that is collecting internship data including locations, names, companies, and descriptions. The markers are appearing on the correct places on the map, however I can only get the infowindow to display the name or the description or the company when I need it to display all of them.
I am new to rails, and do not totally understand what I need to be updating to allow all of these attributes to appear in the infowindow. I am attaching my code below:
Internship model:
class Internship < ApplicationRecord
geocoded_by :address
after_validation :geocode
end
Internship View:
<script src="//maps.google.com/maps/api/js?key=AIzaSyBj4qLUeW291Z5WvVOwzseQONRBGCnA8ds"></script>
<script src="//cdn.rawgit.com/mahnunchik/markerclustererplus/master/dist/markerclusterer.min.js"></script>
<script src='//cdn.rawgit.com/printercu/google-maps-utility-library-v3-read-only/master/infobox/src/infobox_packed.js' type='text/javascript'></script> <!-- only if you need custom infoboxes -->
<div style='width: 800px;'>
<div id="map" style='width: 1100px; height: 600px'></div>
</div>
<script type="text/javascript">
handler = Gmaps.build('Google');
handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
markers = handler.addMarkers(<%=raw #hash.to_json %>);
handler.bounds.extendWith(markers);
handler.fitMapToBounds();
});
</script>
Internship Controller:
def index
#internships = Internship.all
#hash = Gmaps4rails.build_markers(#internships) do |internship, marker|
marker.lat internship.latitude
marker.lng internship.longitude
marker.infowindow internship.description
end
end
Any help I can get is greatly appreciated!
I needed to add an array to the controller that holds all the values from the database and then passes the array into the infowindow:
def index
#internships = Internship.all
#internship_properties = Array.new
#internships.each do |internship|
#internship_properties.push(internship)
end
#hash = Gmaps4rails.build_markers(#internship_properties) do |internship_prop, marker|
concat_info_window = "#{internship_prop.name}, #{internship_prop.address}, #{internship_prop.company}, #{internship_prop.title}, #{internship_prop.date}, #{internship_prop.description}"
marker.lat internship_prop.latitude
marker.lng internship_prop.longitude
marker.infowindow concat_info_window
end
end
How can I enable clustering so instead of showing markers it is clustered? For example: https://www.police.uk/metropolitan/00BK17N/crime/
users_controller
class UsersController < ApplicationController
def index
#users = User.all
#hash = Gmaps4rails.build_markers(#users) do |user, marker|
marker.lat user.latitude
marker.lng user.longitude
marker.infowindow user.description
end
end
end
index.html.erb
<div id="map-container">
<div id="map-canvas"></div>
</div>
<script>
$(document).ready(function(){
handler = Gmaps.build('Google');
handler.buildMap({ provider: {}, internal: {id: 'map-canvas'}}, function(){
markers = handler.addMarkers(<%=raw #hash.to_json %>)
handler.bounds.extendWith(markers);
handler.fitMapToBounds(markers);
if(navigator.geolocation)
navigator.geolocation.getCurrentPosition;
});
});
</script>
Appreciate your help guys
Did you try this?
https://github.com/apneadiving/Google-Maps-for-Rails/wiki/Markers#displaying-your-markers
Simply passing do_clustering => true should enable it. It's false by default.
Example:
<%= gmaps("markers" => { "data" => #markers, "options" => { "do_clustering" => true } }) %>
Users can post 'notices' and these are displayed in users/show.html.erb in their 'notice feed'. Each notice has a :latitude and a :longitude and an associated marker on a google map.
I'm trying to make the marker change colour when the user hovers over the notice in the feed. I've given the marker the same id as the notice with marker.json({ id: notice.id }). In the notice partial, each notice is uniquely identified by its id: <li id="notice-<%= notice.id %>">. The problem is accessing 'markers' from within the notice partial. I want to use the code markers[<%= notice.id %>] but how do I pass 'markers' from the show javascript to the partial javascript?
Alternatively, I could do it all inside the show javascript, but the problems remains: how would I access the notice id from within the show javascript?
Users_controller.rb:
def show
#notice = #character.notices.build
#notice_feed_items = current_user.notice_feed.paginate(page: params[:notices_page])
#hash = Gmaps4rails.build_markers(#notice_feed_items) do |notice, marker|
marker.lat notice.latitude
marker.lng notice.longitude
marker.infowindow notice.content
marker.json({ id: notice.id })
end
redirect_to root_url and return unless #user.activated
end
users/show/html.erb:
<% if #notice_feed_items.any? %>
<ol class="posts">
<%= render #notice_feed_items %>
</ol>
<%= will_paginate #notice_feed_items, param_name: 'notices_page' %>
<% end %>
<script type="text/javascript">
handler = Gmaps.build('Google');
handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
markers = handler.addMarkers(<%=raw #hash.to_json %>);
handler.bounds.extendWith(markers);
handler.fitMapToBounds();
map = handler.getMap();
var update_timeout = null;
google.maps.event.addListener(map, 'click', function(event){
update_timeout = setTimeout(function(){
placeMarker(event.latLng);
fillInForm(event.latLng);
document.getElementById("dropfield").focus();
}, 300);
});
google.maps.event.addListener(map, 'dblclick', function(event) {
clearTimeout(update_timeout);
});
});
function placeMarker(latLng) {
var marker = new google.maps.Marker({
position: latLng,
map: map,
draggable: false
});
}
function fillInForm(latLng) {
$('#notice_latitude').val(latLng.lat());
$('#notice_longitude').val(latLng.lng());
}
</script>
_notice.html.erb:
<li id="notice-<%= notice.id %>">
.
.
.
</li>
<script type="text/javascript">
document.getElementById("notice-<%= notice.id %>").onmouseover=function(){
markers[<%= notice.id %>].setIcon("markers/blue_MarkerA.png");
}
document.getElementById("notice-<%= notice.id %>").onmouseout=function(){
markers[<%= notice.id %>].setIcon("markers/yellow_MarkerA.png");
}
</script>
EDIT:
I'm trying to solve the problem by doing it all in show.html.erb with the following code, using grep:
<script type="text/javascript">
handler = Gmaps.build('Google');
handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
markers = handler.addMarkers(<%=raw #hash.to_json %>);
handler.bounds.extendWith(markers);
handler.fitMapToBounds();
map = handler.getMap();
var update_timeout = null;
google.maps.event.addListener(map, 'click', function(event){
update_timeout = setTimeout(function(){
placeMarker(event.latLng);
fillInForm(event.latLng);
document.getElementById("dropfield").focus();
}, 300);
});
google.maps.event.addListener(map, 'dblclick', function(event) {
clearTimeout(update_timeout);
});
});
function placeMarker(latLng) {
var marker = new google.maps.Marker({
position: latLng,
map: map,
draggable: false
});
}
function fillInForm(latLng) {
$('#notice_latitude').val(latLng.lat());
$('#notice_longitude').val(latLng.lng());
}
$("#notice_list li").on('mouseenter', function(){
var id = $(this).attr('id');
$.grep(markers, function(m){return m.id == id;})[0].setIcon("markers/blue_MarkerA.png");
}).on('mouseleave', function(){
var id=$(this).attr('id');
$.grep(markers, function(m){return m.id == id;})[0].setIcon("markers/yellow_MarkerA.png");
});
</script>
... but it isn't working. I think the problem is that trying to access the id of each marker in markers with m.id isn't working. I tried to get it to print out markers[0].id but nothing happened, it seems you can't access the marker id with markers[0].id?! (I checked markers.length wasn't zero. It wasn't - the map is full of markers).
So, how do you access the id of an element of markers if markers[0].id doesn't work??
marker haven't id attribute. To have a reference of each marker you could use the index of the markers array (adding markers one per one).
# pseudocode
<% #notice_feed_items.each do |item| %>
markers[<%= item.id %>] = handler.addMarker(<%=raw item.to_json %>);
<% end %>
I'm trying to dynamically update the markers on a google map using gmaps4rails (i.e. with an AJAX call back). I'm finding the documentation for gmaps4rails very scattered and unclear.
I've successfully been able to display markers on a map using the build_markers method (as per the video tutorial v2).
My controller code:
# GET /telemetry_recordings
def index
#telemetry_recordings = TelemetryRecording.all
#hash = Gmaps4rails.build_markers(#telemetry_recordings) do |telemetry_recording, marker|
marker.lat telemetry_recording.latitude
marker.lng telemetry_recording.longitude
marker.title telemetry_recording.delivery_unit.driver.full_name
marker.infowindow telemetry_recording.delivery_unit.driver.full_name
end
end
My view code:
<script type="text/javascript">
handler = Gmaps.build('Google');
handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
markers = handler.addMarkers(<%=raw #hash.to_json %>);
handler.bounds.extendWith(markers);
handler.fitMapToBounds();
});
</script>
Now, to implement a dynamic update, I've added the following script to my view:
<script type="text/javascript">
jQuery(function($) {
$('body').on('click', '#replace_markers', function(){
$.getJSON("/telemetry_recordings", function(data){
Gmaps.map.replaceMarkers(data);
});
});
});
</script>
As well as a button:
<button id="replace_markers">Refresh</button>
And, I've added the following code to my controller:
respond_to :json, :html
# GET /telemetry_recordings
def index
#json = TelemetryRecording.all.to_gmaps4rails
respond_with #json
end
Note: TelemetryRecording class has 3 attributes: latitude (float), longitude (float) and location_time (DateTime)
This results in the following error:
undefined method `to_gmaps4rails' for #<TelemetryRecording::ActiveRecord_Relation:0x55dee78>
As per the documentation, I've installed the gmaps4rails gem, added //= require underscore and
//= require gmaps/google to my application.js file, and included the following scripts in my view:
<script src="//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js" type="text/javascript"></script>
<script src="//maps.google.com/maps/api/js?v=3.13&sensor=false&libraries=geometry" type="text/javascript"></script>
Am I using to_gmaps4rails correctly here? (my understanding is that it converts an object with latitude/longitude attributes to an array of markers, e.g. [{"lat":"x", "lng":"y"}, {"lat":"x", "lng":"y"}]. Why is it undefined?
You're using code from v1.x and 2.x.
to_gmaps4rails has been removed from the code base. So your first shot was ok:
def index
#hash = Gmaps4rails.build_markers(TelemetryRecording.all) do |telemetry_recording, marker|
marker.lat telemetry_recording.latitude
marker.lng telemetry_recording.longitude
marker.title telemetry_recording.delivery_unit.driver.full_name
marker.infowindow telemetry_recording.delivery_unit.driver.full_name
end
respond_with #hash
end
and in the js
<script type="text/javascript">
handler = Gmaps.build('Google');
handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
var markers = handler.addMarkers(<%=raw #hash.to_json %>);
handler.bounds.extendWith(markers);
handler.fitMapToBounds();
$('body').on('click', '#replace_markers', function(){
$.getJSON("/telemetry_recordings", function(newMarkers){
handler.removeMarkers(markers); // to remove previous markers
markers = handler.addMarkers(newMarkers);
});
});
});
});
</script>
I can't figure out how to display the sidebar for google map on my rails app.
It's been a while and i can't find any sources on that subject. The v2 of the gem changed a lot and i'm not skilled enaught.
This is my code:
view:
<div style='width: 800px;'>
<div id="map" style='width: 800px; height: 400px;'></div>
</div>
<div id='markers_list'></div>
<script type="text/javascript">
$(document).ready(function(){
var raw_markers = <%=raw #hash.to_json %>;
var gmaps_markers;
function createSidebarLi(property_json) {
return ("<li><a>" + property.titre + " - " + property.address + "<\/a></li>");
};
function bindLiToMarker($li, marker){
$li.click(function(){
marker.panTo(); //to pan to the marker
google.maps.event.trigger(marker.getServiceObject(), "click"); // to open infowindow
});
};
function createSidebar(){
for (var i=0;i<raw_markers.length;i++){
var $li = $( createSidebarLi(raw_markers[i]) );
$li.appendTo($('#markers_list'));
bindLiToMarker($li, gmaps_markers[i]);
}
};
handler = Gmaps.build('Google', {markers: { maxRandomDistance: 1} });
handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
markers = handler.addMarkers(raw_markers);
handler.bounds.extendWith(markers);
handler.fitMapToBounds();
createSidebar();
});
});
google.maps.event.addListener(marker, 'mouseout', function(){
infowindow.open(marker.get('map'), marker);
});
</script>
controller:
def index
#properties = Property.all
#hash = Gmaps4rails.build_markers(#properties) do |property, marker|
marker.lat property.latitude
marker.lng property.longitude
marker.infowindow property.titre
end
end
Can somebody help me ?
You made several mistakes, variable names etc...
I made you a working plunkr here.
If you need documentation, check here.
To pass additional info in the json:
#hash = Gmaps4rails.build_markers(#properties) do |property, marker|
marker.lat property.latitude
marker.lng property.longitude
marker.infowindow property.titre
marker.json({ titre: property.marker, address: property. address})
end