I using gmaps4rails v2 in my app. I have multiple markers which I send in as a hash. I want to clear the default info window and use a different function on click and hover for each marker. This is what I found from other questions on this site, but it isn't working for me.
markers = handler.addMarkers(<%=raw #hash.to_json %>);
for (var marker in markers) {
google.maps.event.clearListeners(marker, 'click');
}
The other answers on this site mixed code from v1 and v2 of gmaps4rails.
Use:
google.maps.event.clearListeners(marker.getServiceObject(), 'click');
It works fine, see live example: http://plnkr.co/edit/8Eci6H6NQWUvbkAvcDdc?p=preview
Infowindows dont appear anymore on click.
Related
Instead of showing an infowindow on Gmaps4Rails v.2 I want to go to the url of the object on click.
So, in Gmaps4Rails v.1 it worked like this to add an extra {link: <path>} part to the json of each marker and then set the readjust the event listener.
This is quite similar to Make map marker direct link onclick for gmaps4rails, only here for Gmaps4Rails v.2 (and because it's a complete rewrite I think it's better in a proper question instead of mixing code of the completely different ways of doing this)
I learned that, in order to introduce custom json in Gmaps4Rails v2 I have to
#markers = Gmaps4rails.
build_markers(objects) do |object, marker|
marker.lat object.latitude
marker.lng object.longitude
marker.json({link: object_path(object)})
end
and to change the event handler I have to add this coffeescript directly after the addMarker call:
markers = handler.addMarkers(#{raw #markers.to_json})
_.each markers, (marker) ->
link = < retrieve link from marker somehow?! >
google.maps.event.clearListeners(marker.getServiceObject(), 'click')
google.maps.event.addListener marker.getServiceObject(), "click", ->
window.location = link
return
Unfortunately the link json doesn't seem to be added to the marker, or should be accessed some different way.
How should it be done?
#markers includes your link. The problem is that addMarkers call the Google constructor in bulk which doesn't use the un-needed parameters, so your link is lost in your JS each loop.
# return array of marker objects
addMarkers: (markers_data, provider_options)->
_.map markers_data, (marker_data)=>
#addMarker marker_data, provider_options
# return marker object
addMarker: (marker_data, provider_options)->
marker = #_builder('Marker').build(marker_data, provider_options, #marker_options)
marker.setMap(#getMap())
#clusterer.addMarker marker
marker
You have to create individual markers in an ERB each loop, and do something with your link. You can also recreate an Array of markers if that fits better into your code. Here is an example below
markers = []
<% #hash.each do |data| %>
marker = handler.addMarker(<%=raw data.to_json %>)
markers.push(marker)
marker.getServiceObject().addListener('click', function() {
console.log("marker has link <%= data[:link] %>")})
<% end %>
handler.bounds.extendWith(markers);
I have Markers setup with gmaps4rails.
Now I want to implement a classic search function.
If I find one object, it should directly show the marker.infowindow
How do I open it directly?
I tried:
function focusSearch() {
handler.map.centerOn({ lat: <%=#searchy.latitude %>, lng: <%=#searchy.longitude %>});
handler.getMap().setZoom(16);
marker = <%=#searchy.id%>
marker.infowindow.open(map, marker.serviceObject);
}
But I guess I am going wrong there...
Anyone can help?
If you have an Idea how to directly use the #search:params, I am happy!
Thanks for helping out!
I've created a plunkr with working code here.
Basically steps are:
associate the marker to the original json data where ids are available
search the marker list for the id you expect
trigger the 'click' google map event on the marker which triggers pan + infowindow
I apologize in advance if this question is stupid/not being asked correctly, this is my first post in stackoverflow and I'm completely new at RoR...
I have a rails application which uses the gem gmaps4rails v2.0.4. The application takes in an address (street, city and country), uses geocoder to calculate the latitude and longitude then plugs them into my marker builder.
Every time I refresh my show page, the marker in google maps changes position...I even tried to plug in the actual latitude and longitude ([{"lat":49.245253,"lng":-123.0651361}]) instead of "raw #hash.to_json" and it still renders the marker in different positions every time I refresh.
does anyone know how to fix this?
Note: I tried to copy and paste that coordinate in google maps as well and the marker is very consistent in its position. My controller.rb and show.html.erb are pasted below. Thanks in advance!!
controller.rb
#hash = Gmaps4rails.build_markers(#branches) do |branch, marker|
marker.lat branch.latitude
marker.lng branch.longitude
end
show.html.erb
<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>
Its a feature to prevent overlapping. Its documented in the code here.
You can customise or remove the behaviour, example:
handler = Gmaps.build('Google', { markers: { maxRandomDistance: null } });
I have some list of markers being shown in google map. Now I want to do some additional things when I close the infowindow.
google.maps.event.addListener(Gmaps.map.visibleInfoWindow,'closeclick',function()
{
do_something();
});
It doesn't seem to working. Please provide some tutorial or code block to achieve this.
You should override the way infowindows are created.
Something like this:
old_method = Gmaps4Rails.Google.Marker.prototype.createInfoWindow
Gmaps4Rails.Google.Marker.prototype.createInfoWindow = function(){
old_method();
// then access the infowindow with: this.infowindow and add whatever you need
}
For 1.x, do the same but with: Gmaps4RailsGoogle.prototype.createInfoWindow
Is there a way to click a Google Maps overlay with capybara-webkit? What about Capybara using Selenium? I want to test the content of the info window once the marker is selected. I also want to test that there are n markers on the page.
To test that there are n markers on the page:
expect(find('.gmap_container')['data-markers'].split('},{').count).to eq(n)
This can be done, but requires a change to how you create your markers. You must instruct them to render as images rather than canvas elements:
new google.maps.Marker({
position: latLng,
animation: google.maps.Animation.DROP,
name: business.get('name'),
id: business.get('id'),
optimized: false, // <-- this is the stuff
title: business.get('name')
});
Then in your test, you can find('div[title="Business\ Title"]').click
If possible, you might want to consider doing this just for a test environment, but that's up to you and your needs.
Credit: http://blog.mojotech.com/selecting-google-maps-v3-markers-with-selenium-or-jquery/
Hope this helps!