Currently have the infowindow showing as the 'what happens' when the map marker is clicked, as so:
google.maps.event.addListener(marker, 'click', function(){
infowindow.open(Gmaps.map.map, marker);
});
How would I get this to work to automatically link to the marker's SHOW page, ie. where is it possible to put in a code reference:
<a href='/controller/#{slug}'>#{title}</a>
or
<%= link_to %> function
For this kind of needs, I pass a block to the gmaps4rails method in the controller (doc here):
#json = User.all.to_gmaps4rails do |user, marker|
marker.json "\"id\": #{user.id}"
# or
marker.json "\"link\": #{method_to_create_link}"
end
This way I can have any additional information I need to create a link or anything.
That said, you could update your listener this way:
base_url = "whatever you need";
google.maps.event.addListener(marker, 'click', function(){
window.location(base_url + marker.id);
// or
window.location(marker.link);
});
Related
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 am working on a web app and I use Ruby on Rails. Our index is made of a map and of a search field. You can search a location and the map updates its markers.
I would like to use Ajax to avoid refreshing the page. So I added remote: true to the form, a respond_to in the controller and a new search.js.erb. My search.js.erb renders a partial _googlemap.erb which contains the script to initialize the map.
Here is my problem. As the map already exists, it's like if I wanted to create the same object twice, which of course doesn't work and is awfull. I'd like to update only markers in the map with new ones. But I can't find a way to do it.
I saw the former version of Gmaps4rails integrated a way to do it ( Gmaps.map.replaceMarkers(your_markers_json_array); ) but it doesn't seem to work now. When I use it, I got this error: "TypeError: Gmaps.map is undefined". I tried with "handler.replaceMarkers();" but this time I have "TypeError: handler.replaceMarkers is not a function".
I am new to Javascript and to Rails, but I want to improve my knowledge and I really need to go on with the rest of this web app. I have been looking for a solution everywhere on the internet but in vain.
Live website here
Please, could someone tell me how I could do that and what I am doing wrong?
MANY thanks in advance,
Céline
zones_controller.rb
def search
respond_to do |format|
format.html.none do
search_params = params[:zone][:search]
coordinates = Geocoder.coordinates(search_params).join(",")
#zones = Zone.search(
"", { "aroundLatLng" => coordinates,
"aroundRadius" => 500000 #Searches around 500 km
})
if coordinates.nil?
#zones = Zone.search(params[:search])
elsif #zones.empty?
#zones = Zone.all
flash[:error] = "No zone could be found. Please try again."
end
build_map(#zones)
end
format.js
end
end
def build_map(array)
#hash = Gmaps4rails.build_markers(array) do |zone, marker|
marker.lat zone.latitude
marker.lng zone.longitude
marker.json({ title: zone.description, id: zone.id })
marker.infowindow render_to_string(:partial => "/zones/map_box", locals: { zone: zone })
end
end
search.html.erb
<div id="map" style='width: 100%; height: 700px;'>
</div>
<!-- Beginning Google maps -->
<script type="text/javascript" id="map_script">
$(document).ready(function() {
<%= render 'googlemap', hash: #hash %>
}); // Document ready
</script>
_googlemap.erb
handler = Gmaps.build('Google');
handler.buildMap({ provider: {
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.TERRAIN
}, internal: {id: 'map'}
}, function(){
markers_json = <%= raw hash.to_json %>;
markers = _.map(markers_json, function(marker_json){
marker = handler.addMarker(marker_json);
handler.getMap().setZoom(4);
_.extend(marker, marker_json);
marker.infowindow = new google.maps.InfoWindow({
content: marker.infowindow
});
return marker;
});
handler.bounds.extendWith(markers);
handler.fitMapToBounds();
});
search.js.erb
$('#map_script').replaceWith("<%= render 'googlemap', hash: #hash %>");
Why don't you just update the map with the new markers? Meaning, instead of re-rendering the whole map after each search, just update the markers on the existing map by removing all markers and adding the new ones.
I haven't verified the method, but I guess it should work and be more efficient:
Create a app/assets/javascript/map.js file. You can store your map-related functions there. Create a function to update your map's markers in this file:
map.js
(function() {
/* __markers will hold a reference to all markers currently shown
on the map, as GMaps4Rails won't do it for you.
This won't pollute the global window object because we're nested
in a "self-executed" anonymous function */
var __markers;
function updateMarkers(map, markersData)
{
// Remove current markers
map.removeMarkers(__markers);
// Add each marker to the map according to received data
__markers = _.map(markersData, function(markerJSON) {
marker = map.addMarker(markerJSON);
map.getMap().setZoom(4); // Not sure this should be in this iterator!
_.extend(marker, markerJSON);
marker.infowindow = new google.maps.InfoWindow({
content: marker.infowindow
});
return marker;
});
map.bounds.extendWith(__markers);
map.fitMapToBounds();
};
// "Publish" our method on window. You should probably have your own namespace
window.updateMarkers = updateMarkers;
})();
This function can be used to initialize your map and to update it. As you will not (if my answer satisfies you) render the map twice, you can delete _google_map.erb and put its content back into search.html.erb, but using the function we've just created:
search.html.erb
<div id="map" style='width: 100%; height: 700px;'>
</div>
<!-- Beginning Google maps -->
<script type="text/javascript" id="map_script">
$(document).ready(function() {
mapHandler = Gmaps.build('Google');
mapHandler.buildMap({ provider: {
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.TERRAIN
}, internal: {id: 'map'}
}, function(){
var markersData = <%= raw #hash.to_json %>;
updateMarkers(mapHandler, markersData);
});
}); // Document ready
</script>
Please don't forget the var keyword when declaring variables, otherwise they will end up being globals, and that's bad ^^
Note that I have deliberately left mapHandler as a global variable: you will need access to your handler to update markers later when someone uses the search. This is probably not an ideal thing to do, but this question is not about refactoring your code so let's keep it this way.
So now my solution brings you a map that initializes with the given markers on page load. In other words, nothing has changed!
However you're now allowed to reuse this updateMarkers function to change the markers displayed on your map. That's what you search.js.erb script should do:
search.js.erb
(function() {
var markersData = <%= raw #hash.to_json %>;
updateMarkers(mapHandler, markersData);
})();
That's it! Hopefully it'll take you to the next step of your project :)
I tried the same thing but instead of updating the marker you should include the map in the partial/placeholder and then update it ...
for example, this is the view which is displaying the map...i will update this view/placeholder with latest map and markers
<div id="map_users_index">
<div id="map" class="map" style="height:relative;">
</div>
in users_controller.rb
##take index action or any other action
def index
##do your stuff and get more users
respond_to do |format|
format.html
format.js
end
end
in index.js.erb
##update the placeholder/partial with new map with new markers
$("#map_users_index").html("<%= escape_javascript(render(:partial => 'index')) %>");
I HAVE MY OWN WORKING CODE...HERE
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'm trying to update the content of "mydiv" without refreshing the entire index page.
#mydata is given by mycontroller. I need to recalculate it every n seconds and pass it to "mydiv"
With "link_to" it works!
index.html.erb
<%=
link_to('refresh', '/mycontroller/index', :remote => true)
%>
<div id="mydiv">
<%=
#mydata
%>
</div>
index.js.erb
$('#mydiv').html('<%= escape_javascript(#mydata) %>')
Now I need to refresh the content of "mydiv" automatically every n seconds (so without click on the link). I have tried solutions from:
First Link
Second Link
but no luck.
In my application.js I have writed this:
function executeQuery() {
$.ajax({
//url: '/index',
success: function(data) {
$('#mydiv').html(data)
}
});
setTimeout(executeQuery, 500);
}
$(document).ready(function() {
setTimeout(executeQuery, 500);
});
For who is facing my same problem, I solved it by replacing
$('#mydiv').html(data)
with
$('#mydiv').load('/mycontroller/index #mydiv')
Use setInterval() instead of using setTimeout().
Ref: https://www.w3schools.com/jsref/met_win_setinterval.asp
function executeQuery() {
$.ajax({
type: 'GET',
url: 'example.com/url/', // Provide your response URL here.
success: function(data) {
$('#mydiv').html(data);
}
});
}
setInterval(executeQuery(), (n * 1000)); // Replace 'n' with how many seconds you want.
This code will run the executeQuery() method in every 'n' seconds interval. So that your requirement is accomplished.
Set layout to false in the action and just pass on the relevent content, not the entire page
def action1
<your code here>
end
def action2
<your code here>
render :layout => false
end
Your view for action2 should have content pertaining only to #mydiv.
A better solution would be to use a single action and change render options based on type of request. (Ajax or non ajax)
I would like to use the gmaps4rails gem to display a map of items in a fancybox.
I followed carefully the remarks on the wiki concerning ajax call, i.e. scripts have to be included manually in the application layout, maps have to be loaded in a javascript (see gem wiki).
But I still not succeed completely to make the map displayed in the box.
On the other hand as I hard code coordinates in the javascript it works fine, the map is displayed in the fancybox and the markers appear.
Let me recap.
In my index view, I have a ajax call to the items index action:
<%= link_to "Show Map", items_path(:format => :js, :show_map => true), :remote => true, :class => 'fancybox' %>
In the controller, I populate the map data:
def index
#items=Item.all
if params[:show_map]
#map= #items.to_gmaps4rails
end
end
in the index.js.erb file, I put
<% if params[:show_map] %>
var content = "<%= escape_javascript( gmaps({:last_map => false})) %>";
$.fancybox({
'content': content,
'padding' : 20
});
Gmaps.map = new Gmaps4RailsGoogle();
Gmaps.load_map = function() {
Gmaps.map.initialize();
Gmaps.map.markers = <%= #map %>;
Gmaps.map.create_markers();
Gmaps.map.adjustMapToBounds();
Gmaps.map.callback();
};
Gmaps.loadMaps();
<% else %>
// blablabla
<% end %>
Where the markers are provided in the map object.
This does not work and instead of my map I got in the fancybox the code itself appearing.
Something like:
var content = "\n
\n
<\/div>\n<\/div>\n"; $.fancybox({ 'content': content, 'padding' : 20 }); Gmaps.map = new Gmaps4RailsGoogle(); Gmaps.load_map = function() {Gmaps.map.initialize();
//Gmaps.map.markers = [{"lat":50.294,"lng":5.857},{"lat":50.294,"lng":5.857},{"lat":50.548,"lng":4.918},{"lat":50.384,"lng":3.649},{"lat":50.384,"lng":3.649},{"lat":50.08,"lng":4.5760000000000005},{"lat":50.054,"lng":5.195}];
Gmaps.map.markers = [{"lat":50.8483059,"lng":4.351783999999999},{"lat":50.496,"lng":5.066},{"lat":50.11,"lng":5.003},{"lat":50.11,"lng":5.003},{"lat":50.162,"lng":5.871},{"lat":50.08,"lng":4.5760000000000005},{"lat":50.08,"lng":4.5760000000000005},{"lat":50.08,"lng":4.5760000000000005}];
Gmaps.map.create_markers(); Gmaps.map.adjustMapToBounds(); Gmaps.map.callback(); }; Gmaps.loadMaps();
When instead of the erb <%= #map %>, I hard code the markers, for instance:
Gmaps.map.markers = [{"lat":50.294,"lng":5.857},"lat":50.294,"lng":5.857},{"lat":50.548,"lng":4.918}];
It works!
Seems like I'm missing something in the json data type conversion. But I'm not expert to find what is going wrong.
Thanks for your help!
Just successfully tried:
Open
<div id="test" style="display:none;width:300px;">
<%= gmaps markers: { data: #json } , last_map: false %>
</div>
<script type="text/javascript">
$(".fancybox").fancybox({
openEffect : 'none',
closeEffect : 'none',
afterLoad : function() { Gmaps.loadMaps(); }
});
</script>
Ok, I've got what was not going well. Thanks to the following answer https://stackoverflow.com/a/12219016/1100674.
As I use the following syntax:
Gmaps.map.markers = <%= #map %>;
I get the json rendered as this:
Gmaps.map.markers = [{"lat":50.8483059,"lng":4.351783999999999},{"lat":50.11,"lng":5.003},{"lat":50.11,"lng":5.003},{"lat":50.08,"lng":4.5760000000000005},{"lat":50.08,"lng":4.5760000000000005},{"lat":50.08,"lng":4.5760000000000005},{"lat":50.413,"lng":4.371}];
Whereas I use the raw() method,
Gmaps.map.markers = <%= raw(#map) %>;
I get the correct format.
Gmaps.map.markers = [{"lat":50.8483059,"lng":4.351783999999999},{"lat":50.11,"lng":5.003},{"lat":50.11,"lng":5.003},{"lat":50.08,"lng":4.5760000000000005},{"lat":50.08,"lng":4.5760000000000005},{"lat":50.08,"lng":4.5760000000000005},{"lat":50.413,"lng":4.371}];