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
}
}
});
Related
I am using Gmaps4rails gem. I could show markers without Infowindow, but after adding Infowindow in the controller, any markers do not appear. As the following, the Infowindow is rendered with partial.
What should I change the code? Thank you in advance.
clinics_controller.rb
#hash = Gmaps4rails.build_markers(#clinics) do |clinic, marker|
marker.lat clinic.latitude
marker.lng clinic.longitude
marker.json({:id => clinic.id})
marker.picture ({
"url" => "/images/red-dot.png",
"width" => 32,
"height" => 32
})
marker.infowindow render_to_string(partial: "map_infowindow", locals: {clinic: clinic})
end
_map_infowindow.html.erb
<h3><%= clinic.name %></h3>
Javascript
<script type="text/javascript" charset="utf-8">
handler = Gmaps.build('Google');
handler.buildMap({
provider: {
zoom: 15,
center: {lat: 35.765, lng: 139.62}
},
internal: {id: 'map'}},
function(){
markers = handler.addMarkers(<%= raw #hash.to_json %>);
}
);
</script>
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} }
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 } }) %>
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
I'm trying do add a listener in my markers but doesn't work
in my view i have the BuildMap(<%= #hash.to_json %>);
my controller is
#hash = Gmaps4rails.build_markers(gon.transmitters) do |transmitter, marker|
marker.lat transmitter.latitude
marker.lng transmitter.longitude
marker.json({ :id => "trm", :data => transmitter.id , :img => "http://www.clker.com/cliparts/B/B/1/E/y/r/marker-pin-google.svg"})
end
and in my js.coffee
#buildMap = (markers) ->
handler = Gmaps.build 'Google'
handler.buildMap { provider: {}, internal: {id: 'map'} }, ->
markers = handler.addMarkers(markers)
handler.bounds.extendWith(markers)
handler.fitMapToBounds()
for marker in markers
google.maps.event.addListener marker, 'click', ->
alert "hello"
true
true
What i am doing wrong?
thanks in advance
edit: apneadiving where are you?!? :(
marker is a proxy object, simply replace:
google.maps.event.addListener marker, 'click', ->
with:
google.maps.event.addListener marker.getServiceObject(), 'click', ->