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 } }) %>
Related
Is there a way to view markers using gmaps4rails gem, depending on the current user login? I'm not sure if there was any chance it might have worked out, but I tried using the cancan gem in combination but it only results in all of the markers disappearing. Unfortunately I have no other idea how to carry on. So what I am trying to achieve is to make markers visible depending on which user is currently logged in. I am grateful for any help!
Current code of relations_controller:
def index
#relations = Relation.all
#hash1 = Gmaps4rails.build_markers(#relations) do |relation, marker|
# something like "if current_user == relation.user_id" ?
marker.lat relation.childlat
marker.lng relation.childlng
marker.picture({
:url => ActionController::Base.helpers.image_path("childgross.png"),
:width => "45",
:height => "45"
})
end
#hash2 = Gmaps4rails.build_markers(#relations) do |relation, marker|
marker.lat relation.kigalat
marker.lng relation.kigalng
marker.picture({
:url => ActionController::Base.helpers.image_path("persongross.png"),
:width => "45",
:height => "45"
})
end
end
code in relations index view:
<%=raw #hash1.to_json %>
<%=raw #hash2.to_json %>
<script>
handler = Gmaps.build('Google');
handler.buildMap({provider: {},internal: {id: 'map'}},function(){
markers = handler.addMarkers(<%=raw #hash1.to_json %>);
markers = handler.addMarkers(<%=raw #hash2.to_json %>);
handler.bounds.extendWith(markers);
handler.fitMapToBounds();
});
</script>
Thnaks to #Pablo It just came to me... I just had to replace #relations = Relation.all with #relations = Relation.where(user_id: current_user.id)
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} }
on my search page I have a google map with markers for each 'job'. I have made the map default to zoom level 2, where the markers cluster correctly, but as soon as I pass zoom level 5, clustering stops working. I have searched and haven't found any information on this.
Search page map javascript:
<script type="text/javascript">
var mapStyle = [{"featureType":"administrative","elementType":"all","stylers":[{"visibility":"on"},{"lightness":33}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#f2e5d4"}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#c5dac6"}]},{"featureType":"poi.park","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":20}]},{"featureType":"road","elementType":"all","stylers":[{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"color":"#c5c6c6"}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#e4d7c6"}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#fbfaf7"}]},{"featureType":"water","elementType":"all","stylers":[{"visibility":"on"},{"color":"#acbcc9"}]}];
var handler = Gmaps.build('Google');
handler.buildMap({
provider: {
styles: mapStyle,
minZoom: 2,
maxZoom: 18,
center: new google.maps.LatLng(20.68177501, -103.3514794)
},
internal: {id: 'map'}},
function(){
markers = handler.addMarkers(<%=raw #hash.to_json %>);
handler.bounds.extendWith(markers);
handler.fitMapToBounds();
});
</script>
Jobs controller:
def index
if params[:search].present?
#q = Gig.near(params[:search], 200, :order => 'distance' ).ransack(params[:q])
#gigs = #q.result(distinct: true)
#hash = Gmaps4rails.build_markers(#gigs) do |gig, marker|
marker.lat gig.latitude
marker.lng gig.longitude
marker.title gig.title
end
else
#q = Gig.ransack(params[:q])
#gigs = #q.result(distinct: true)
#hash = Gmaps4rails.build_markers(#gigs) do |gig, marker|
marker.lat gig.latitude
marker.lng gig.longitude
marker.title gig.title
end
end
end
Any insight into this would be great, thanks.
Relevant code lives here.
Here is where you can customize the behavior.
So you can adpat the maxZoom level :
var handler = Gmaps.build('Google', {
markers: {
clusterer: {
maxZoom: 8,
gridSize: 50
}
}
});
I've a property search bar in my app on which the user search for the properties in a city and the locations of the properties are populated on a map using Gmaps4rails gem. The city names in search bar are auto-populated by typeahead.js
Everything is good. I get the markings of the locations of on map. But my problem is, the map just show a gray image or a blue image on not entering any city name. Below are the images of the maps on both cases.
Case 1: When city name is given.
Case 2: When city name is not given.
How can I modify my code to display the current user location on map in case 2 without disturbing case 1?
Below is my code.
view
<script src="/assets/typeahead.js" type='text/javascript'></script>
<script src="/assets/typeahead-addresspicker.js" type='text/javascript'></script>
<!-- for search input END -->
<!-- for MAP -->
<script src='//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js' type='text/javascript'></script>
<!-- for MAP END -->
<%= form_tag search_path, :method => :get do %>
<div class="input-group input-group-sm" id="The-Basics">
<%= text_field_tag :q, params[:q], class: 'form-control typeahead input-sm', id: 'pac-input', :placeholder => 'Enter City, State or Zip!', :autofocus => true %>
<span class="input-group-btn">
<%= submit_tag "Go", :name => nil, class: 'btn btn-primary btn-sm', id: '', data: { no_turbolink: true } %>
</span>
</div>
<% end %>
----other content here------
<!-- Gmaps -->
<div id="rightCol">
<div id="map-canvas"></div>
<!-- Gmaps End -->
<script type="text/javascript">
//google maps
handler = Gmaps.build('Google',
{
markers: {
clusterer: {
gridSize: 10, maxZoom:15
}
}
});
handler.buildMap({
provider: {
disableDefaultUI: false
// pass in other Google Maps API options here
},
internal: {
id: 'map-canvas'
}
},
function(){
markers = handler.addMarkers(<%=raw #hash.to_json %>);
handler.bounds.extendWith(markers);
handler.fitMapToBounds();
handler.getMap().setZoom(9);
handler.map.centerOn;
}
);
// AUTO COMPLETE FOR SEARCH
// mobile address picker
var addressPicker = new AddressPicker({
autocompleteService: {
types: ['(cities)'],
componentRestrictions: { country: 'US' }
}
}
);
$('#pac-input').typeahead(null, {
displayKey: 'description',
source: addressPicker.ttAdapter()
});
// address picker main
var addressPicker = new AddressPicker({
autocompleteService: {
types: ['(cities)'],
componentRestrictions: { country: 'US' }
}
}
);
$('#pac-input2').typeahead(null, {
displayKey: 'description',
source: addressPicker.ttAdapter()
});
// AUTO COMPLETE FOR SEARCH END
controller
def search
#properties = Property.search_available_coming(params[:available_coming]).where(property_active: true).order(property_city: :asc).paginate(:page => params[:page], :per_page => 10)
#hash = Gmaps4rails.build_markers(#properties) do |property, marker|
marker.lat property.latitude
marker.lng property.longitude
marker.picture({
"url" => view_context.image_path("Orange-House-Icon.png"),
"width" => 50,
"height" => 50
})
marker.infowindow render_to_string( partial: 'layouts/mapinfo', locals: { property: property.id })
marker.title "i'm the title"
end
end
You could do as follows:
#hash = Gmaps4rails.build_markers(#properties) do |property, marker|
marker.lat property.latitude
marker.lng property.longitude
marker.picture({
"url" => view_context.image_path("Orange-House-Icon.png"),
"width" => 50,
"height" => 50
})
marker.infowindow render_to_string( partial: 'layouts/mapinfo', locals: { property: property.id })
marker.title "i'm the title"
end
if #hash.empty?
#hash.push({
lat: current_user.latitude,
lng: current_user.longitude
})
end
Btw, would be great to rename #hash to #array
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