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
Related
I'm building a web app to view featured walking routes in my neighbourhood.
User opens the app and sees all different routes.
App gets current location and checks for most nearby route.
App requests the route to one of my featured routes.
User can use the app to navigate to a marker from my featured route that is most nearby.
I'm working with the Directions Service which can give me a list of walking instructions like this:
I'm now trying to combine the directions with my current location. What is the best option to do this? I want to update the instructions based on my current location so for example if I head east on the Amstelkade I want to see the next instruction at the top. I came up with the following:
Add GeolocateControl to Mapbox
let geolocate = new mapboxgl.GeolocateControl({
positionOptions: {
enableHighAccuracy: true
},
trackUserLocation: true
})
map.addControl(geolocate);
Put a listener on the geolocate change event and update starting place (origin) to get the latest direction instructions.
geolocate.on('geolocate', function(location) {
currentLocation = location;
setOrigin(location);
setDestination(location);
});
function setOrigin(location){
if(Object.keys(directions.getOrigin()).length === 0){
directions.setOrigin([location.coords.longitude, location.coords.latitude]);
}
}
I'm a little bit lost if this is a proper solution because in this way i'm making a lot of requests (could put a debouncer on the geolocate event though). Is there a better way to solve this and make it more user friendly?
Question 2: is it possible to add a direction indicator (blue beam of direction you're heading) to Mapbox like Google does?
Thanks all!
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'm trying to get the current center of an Openlayers map in lat/lon coordinates. I've got the following event handler setup:
this.map.on('pointermove', function (e) {
if (e.dragging) {
console.log(that.map.getView().getCenter());
}
});
This works, but I'm getting weird values. Here's an example:
[9318218.659044644, 3274618.6225819485]
Those are obviously not lat/lon values :) Do I need to transform this somehow? Thanks!
I'm not super familiar with openlayers but it sounds like the map is in different projection.
Check out the following on spherical_mercator, transform,
Open Layers projections
UPDATED
I've done a little more research, check out this example. Not sure what the projection your view is in. the map in this example is in ''EPSG:21781' if you go to a js console and enter map.getView().getCenter() you get [693230.7161150641, 179010.3389264635] but if you enter ol.proj.transform(map.getView().getCenter(), 'EPSG:21781', 'EPSG:4326') you get [8.658936030357363, 46.75575224283748] hope that helps.
For those who are working with angular.
Also, I would consider searching the projection of the map, instead of entering it manually.
import * as olProj from 'ol/proj'
import Map from 'ol/Map'
// ...
olProj.transform(
this.map.getView().getCenter(),
this.map.getView().getProjection(),
'EPSG:4326',
)
Update for OpenLayers 6 (assuming your map is called 'map') the following gives an array of [lon, lat] for the centre of your map's view.
ol.proj.toLonLat( map.getView().getCenter() )
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.
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