I am trying to open my first marker on my map via the gmaps4rails gem.
Using the sidebar example from their page:
function createSidebarLi(json) {
return ("<li><a>" + json.title + "</a> (" + json.categories + "...)</li>");
};
function bindLiToMarker($li, marker) {
$li.on('click', function () {
handler.getMap().setZoom(14);
marker.setMap(handler.getMap()); //because clusterer removes map property from marker
marker.panTo();
google.maps.event.trigger(marker.getServiceObject(), 'click');
})
};
handler = Gmaps.build('Google');
handler.buildMap({provider: {
mapTypeId: google.maps.MapTypeId.ROADMAP},
internal: {
id: 'map_sidebar'}}, function () {
var json_array = <%= raw #hash.to_json %>;
var markers = handler.addMarkers(json_array);
_.each(json_array, function (json, index) {
json.marker = markers[index];
});
createSidebar(json_array);
handler.bounds.extendWith(markers);
handler.fitMapToBounds();
});
I am bit confused because of their Version switch. Sometimes it's serviceObject, then it's getServiceObject,-...
I thought something like this
marker.infowindow.open(map, marker.serviceObject);
or this
markers[0].getServiceObject()
markers[0].panTo()
should work?
Can someone please help me out????
Many thanks!
do this in the buildMap callback
google.maps.event.trigger(markers[0].getServiceObject(), 'click');
Related
I have used gmaps4rails before with success but this time i have a need that i cant figure out how to do it.
I have my builder working and generating my map_info partials, also, i am able to open every infowindow from markers by clicking inside the map.
What i need is to call the infowindow of a marker from a list. (onclick event inside a div for instance)
builder inside controller
#gmaps_markers = Gmaps4rails.build_markers(#partners) do |partner, marker|
marker.lat partner.latitude
marker.lng partner.longitude
marker.title partner.company
marker.json({:id => partner.id })
marker.infowindow render_to_string(partial: 'pages/partials/subscribe/map_info', locals: { partner: partner })
end
javascript markers + maps generator
handler = Gmaps.build('Google', {
markers: {
clusterer: {
gridSize: 10,
maxZoom: 15
}
}
});
handler.buildMap({
provider: {
disableDefaultUI: false
},
internal: {
id: 'gmaps'
}
},
function() {
markers = handler.addMarkers(#{
raw #gmaps_markers.to_json
});
handler.bounds.extendWith(markers);
handler.fitMapToBounds();
handler.getMap().setZoom(8);
handler.map.centerOn;
}
);
Let me know if you need more details!
Thanks
The easiest option is to trigger the click event on the marker:
function openMarkerInfo(id) {
$.each(markers, function(index, marker) {
if (marker.id == id) {
google.maps.event.trigger(marker.getServiceObject(), 'click')
}
});
};
See working plunk here
You need to add id to marker
Change your map and markers generation js to
Gmaps.store = {}
handler = Gmaps.build('Google', {
markers: {
clusterer: {
gridSize: 10,
maxZoom: 15
}
}
});
handler.buildMap({
provider: {
disableDefaultUI: false
},
internal: {
id: 'gmaps'
}
},
function() {
Gmaps.store.markers = handler.addMarkers(#{
raw #gmaps_markers.to_json
});
handler.bounds.extendWith(Gmaps.store.markers);
handler.fitMapToBounds();
handler.getMap().setZoom(8);
handler.map.centerOn;
});
Then write js function
Gmaps.openMarkerInfo = function(id) {
$.each(Gmaps.store.markers, function() {
if (this.serviceObject.id == id) {
var infowindow = this.infowindow;
infowindow.open(Gmaps.map.map, marker.serviceObject);
}
});
}
Then add it to onclick of your list element
Gmaps.openMarkerInfo(1);
i found a solution. Take a look...
Javascript onclick function
openInfoWindow = function(id) {
$.each(Gmaps.store.markers, function() {
if (this.serviceObject.id == id) {
google.maps.event.trigger(this.getServiceObject(), 'click')
}
});
}
Javascript maps + markers generator
Gmaps.store = {}
Gmaps.store.handler = Gmaps.build('Google',
{
markers: {
clusterer: {
gridSize: 10, maxZoom:15
}
}
});
Gmaps.store.handler.buildMap({
provider: {
disableDefaultUI: false
},
internal: {
id: 'gmaps'
}
},
function(){
markers = #{raw #gmaps_markers.to_json};
Gmaps.store.markers = markers.map(function(m) {
marker = Gmaps.store.handler.addMarker(m);
marker.serviceObject.set('id', m.id);
return marker;
});
Gmaps.store.handler.bounds.extendWith(Gmaps.store.markers);
Gmaps.store.handler.fitMapToBounds();
}
);
And then, call onclick event.
openInfoWindow(id);
Working and no bugs so far...
:)
i have a working code that shows multiple markers on google map using geocoder such as
#nearbys = Place.near("#{params[:address]}", 5,:order => "distance",:units => :km)
#nearbys.first(5)
and i display the markers using the below code
function initialize() {
var map;
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
mapTypeId: 'roadmap'
};
// Display a map on the page
map = new google.maps.Map(document.getElementById("map-canvas-guest"), mapOptions);
map.setTilt(45);
// adding Multiple Markers from ruby object
var markers = [
['<%= #nearbys[0].title %>', '<%= #nearbys[0].latitude %>','<%= #nearbys[0].longitude %>'],
['<%= #nearbys[1].title %>', '<%= #nearbys[1].latitude %>','<%= #nearbys[1].longitude %>'],
['<%= #nearbys[2].title %>', '<%= #nearbys[2].latitude %>','<%= #nearbys[2].longitude %>'],
['<%= #nearbys[3].title %>', '<%= #nearbys[3].latitude %>','<%= #nearbys[3].longitude %>']
,
['<%= #nearbys[4].title %>', '<%= #nearbys[4].latitude %>','<%= #nearbys[4].longitude %>']
];
// adding Info Window Content
var infoWindowContent = [
['<div class="info_content" >' +
'<h3><%= #nearbys[0].title %></h3>' +'</br>'+
'<p><%= #nearbys[0].about %></p>' +
'</div>'],
['<div class="info_content">' +
'<h3><%= #nearbys[1].title %></h3>' +
'<p><%= #nearbys[1].about %></p>' +
'</div>'],
['<div class="info_content">' +
'<h3><%= #nearbys[2].title %></h3>' +'</br>'+
'<p><%= #nearbys[2].about %></p>' +
'</div>'],
['<div class="info_content">' +
'<h3><%= #nearbys[3].title %></h3>' +'</br>'+
'<p><%= #nearbys[2].about %>/p>' +
'</div>'],
['<div class="info_content">' +
'<h3><%= #nearbys[4].title %></h3>' +'</br>'+
'<p><%= #nearbys[4].about %></p>' +
'</div>']
];
// Display multiple markers on a map
var infoWindow = new google.maps.InfoWindow(), marker, i;
// Loop through our array of markers & place each one on the map
for( i = 0; i < markers.length; i++ ) {
var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0]
});
// Allow each marker to have an info window
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, marker);
}
})(marker, i));
// Automatically center the map fitting all markers on the screen
map.fitBounds(bounds);
}
// Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
this.setZoom(14);
google.maps.event.removeListener(boundsListener);
});
}//initialize ends
BUT the problem is:-what if #nearbys has less than 5 count,then this code fails.SO i have been trying to make it dynamic using jquery arrays but its not working because i think my code is missing something to work it dynamically.
it should be something like this..
var array=<%= #nearbys%>;
var markers=[];
var infowindows=[];
array.each(function(index){
markers.push('<%= #nearbys[0].title %>', '<%= #nearbys[0].latitude %>','<%= #nearbys[0].longitude %>');
infowindows.push('<div class="info_content" >'+'<h3><%= #nearbys[0].title %></h3>' +'</br>'+
'<p><%= #nearbys[0].about %></p>'+'</div>');
})
..SO how i can achieve this........to make this dynamic so that above working code doesnt breaks with the newly added code.
well after struggling with jquery arrays and json ,i was able to find this best solution...this is working in all scenarios and all i need is to handle empty and null conditions,which i already did and its working the way i needed.HOPE THIS HELPS SOMEONE
my controller
def show_nearby_locations
#nearbys = Place.near("#{params[:address]}", 5,:order => "distance",:units => :km)
#nearbys.first(10)
end
in my view file
<%= javascript_tag do%>
window.nearbys= <%=raw #nearbys.to_json %>;
<%end%>
this is my script inside view
function initialize() {
var map;
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
mapTypeId: 'roadmap'
};
// Display a map on the page
map = new google.maps.Map(document.getElementById("map-canvas-guest"), mapOptions);
map.setTilt(45);
var markers=[];
var infoWindowContent=[];
$.each(nearbys, function(index) {
console.log( data[0][index].latitude,data[0][index].longitude );
markers.push([nearbys[index]['title'], nearbys[index]['latitude'],nearbys[index]['longitude']]);
infoWindowContent.push(['<div class="info_content" >' +
'<h3 style="color: rgb(<%= rand(0..200)%>,<%= rand(0..200)%> ,<%= rand(0..200)%>);">'+nearbys[index]['title']+'</h3>' +'</br>'+
'<p>'+nearbys[index]['about']+'</p>' +
'</div>']);
});
// Display multiple markers on a map
var infoWindow = new google.maps.InfoWindow(), marker, i;
// Loop through our array of markers & place each one on the map
for( i = 0; i < markers.length; i++ ) {
var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0]
});
// Allow each marker to have an info window
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, marker);
}
})(marker, i));
// Automatically center the map fitting all markers on the screen
map.fitBounds(bounds);
}
// Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
this.setZoom(14);
google.maps.event.removeListener(boundsListener);
});
}//initialize ends
Hello Friends by doing with Google Maps With Rails i have searched the information from google maps site and Gmaps4rails i have done Multiple Markers and Info-window her is the code
My Controller
#users = User.all
#hash = Gmaps4rails.build_markers(#users) do |user, marker|
marker.lat user.latitude
marker.lng user.longitude
marker.infowindow user.title`
end
In My View
window.onload = function () {
var markers = <%=raw #hash.to_json %>;
var mapOptions = {
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
for (i = 0; i < markers.length; i++) {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title
});
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
});
})(marker, data);
}
}
I have a rails app with markers on a map (pink markers). When i mouseOn a marker on the sidebar, it change the color of the marker to BLUE (to follow on the map) and then when i mouseOut it comes back to the original color PINK. (works well)
But now i added an other color: when i CLICK on a marker (directly on the map or on the sidebar) the marker's color becomes grey. To allow my users to know that they have already check the information from that marker.
So if i mouseON now on a GREY marker from the sidebar, the marker become BLUE (normal) but if i mouseOut, il becomes pink and SHOULD STAY GREY.
if pink go back to pink
if grey go back to grey
How can i do that ? with a kind of attribute ?
<script type="text/javascript">
$(document).ready(function(){
var raw_markers = <%=raw #hash.to_json %>;
var input = (document.getElementById('pac-input'));
var autocomplete = new google.maps.places.Autocomplete(input);
function createSidebarLi(json){
return json.sidebar;
//return ("<li>" + json.titre + ' ' + json.address + "</li>");
};
function bindLiToMarker($li, marker){
$li.on('click', function(){
//handler.getMap().setZoom(14);
marker.setMap(handler.getMap()); //because clusterer removes map property from marker
marker.panTo();
google.maps.event.trigger(marker.getServiceObject(), 'click');
});
};
function bindLiToMarkerMouseOver($li, marker){
$li.on('mouseover', function(){
//handler.getMap().setZoom(14);
marker.setMap(handler.getMap()); //because clusterer removes map property from marker
marker.panTo();
//google.maps.event.trigger(marker.getServiceObject(), 'click');
marker.serviceObject.setIcon("http://198.100.149.26/lookn/markerBleu.png");
});
};
function bindLiToMarkerMouseOut($li, marker){
$li.on('mouseout', function(){
//handler.getMap().setZoom(14);
marker.setMap(handler.getMap()); //because clusterer removes map property from marker
marker.panTo();
//google.maps.event.trigger(marker.getServiceObject(), 'click');
**if (marker.isVisited = true) {
marker.serviceObject.setIcon("http://198.100.149.26/lookn/markerGris.png");
} else {
marker.serviceObject.setIcon("http://198.100.149.26/lookn/markerRose.png");
}**
});
};
function createSidebar(json_array){
_.each(json_array, function(json){
var $li = $( createSidebarLi(json) );
$li.appendTo('#markers_list');
bindLiToMarker($li, json.marker);
bindLiToMarkerMouseOver($li, json.marker);
bindLiToMarkerMouseOut($li, json.marker);
});
};
function closeInfoWindow(handler){
if(handler.currentInfowindow()) {
handler.currentInfowindow().close();
}
}
handler = Gmaps.build('Google', { builders: { Marker: InfoBoxBuilder} });
//handler = Gmaps.build('Google');
handler.buildMap({ internal: {id: 'map'}}, function(){
var markers = handler.addMarkers(raw_markers);
_.each(raw_markers, function(json, index){
var marker = markers[index];
json.marker = marker;
//google.maps.event.addListener(marker.getServiceObject(), 'mouseover', function(){
//google.maps.event.trigger(marker.getServiceObject(), 'click');
//});
google.maps.event.addListener(marker.getServiceObject(), 'click', function(){
marker.serviceObject.setIcon("http://198.100.149.26/lookn/markerGris.png");
**marker.isVisited = true;**
});
});
createSidebar(raw_markers);
handler.bounds.extendWith(markers);
handler.fitMapToBounds();
handler.centerMapOnUser();
google.maps.event.addListener(handler.getMap(), 'click', function(){
closeInfoWindow(handler);
});
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
});
});
});
</script>
set visited = true on Click event:
google.maps.event.addListener(marker.getServiceObject(), 'click', function(){
marker.serviceObject.set("isVisited", true);
});
if visited = true mouseOut setIcon Grey, else setIcon Pink
function bindLiToMarkerMouseOut($li, marker){
$li.on('mouseout', function(){
marker.setMap(handler.getMap());
if (marker.serviceObject.get("isVisited")) {
marker.serviceObject.setIcon("path_to/greyMarker.png");
} else {
marker.serviceObject.setIcon("path_to/pinkMarker.png");
};
});
};
I am trying to find a way to get information from the currently clicked marker on a map. For example, I would like to show the title and description of the currently clicked marker to show up on a different page. Any help is appreciated. Thank you.
You have to add a listener on click:
var handler = Gmaps.build('Google');
handler.buildMap({ provider: { }, internal: {id: 'map'}}, function(){
// I assume this is the way you retrieve the amrkers array
var json_data = <%=raw #hash.to_json %>;
var markers = handler.addMarkers(json_data);
_.each(json_data, function(json, index){
var marker = markers[index];
json.marker = marker;
google.maps.event.addListener(marker.getServiceObject(), 'click', function(){
console.log(json);
//whatever you need here
});
});
});
I have created a fusion table and layer that allows me to use check boxes to hide or display certain markers on the map. I would like to add a search feature that works like the pan and zoom feature. In addition, once the map zooms to the location I would like to have a radius option that identifies other locations within a certain area.
I have modified the sample code found on the IN Query (https://developers.google.com/fusiontables/docs/samples/in) and can get the checkboxes to work, but when I try to include the pan and zoom code (https://developers.google.com/fusiontables/docs/samples/search_and_zoom), I can't seem to get the search feature to work.
I have one fusion table with approximately 4000 records. I am a novice at coding so I am sure it is something in my syntax. I would also assume what I want to do is possible?
Any help would be appreciated.
Here is the code. As indicated I want to insert a search that utilizes pan and zoom feature. I ended up removing it from the code below because I was unsure how to insert or format it.
<head>
<style>
#map-canvas { width:800px; height:600px; }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var map;
var layerl0;
function initialize() {
var tableId = '4422804';
var map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(50.792047064406866, -99.052734375),
zoom: 2,
mapTypeId: google.maps.MapTypeId.HYBRID
});
var layer = new google.maps.FusionTablesLayer();
filterMap(layer, tableId, map);
google.maps.event.addDomListener(document.getElementById('< 5'),
'click', function() {
filterMap(layer, tableId, map);
});
google.maps.event.addDomListener(document.getElementById('> 5'),
'click', function() {
filterMap(layer, tableId, map);
});
google.maps.event.addDomListener(document.getElementById('Not Signed'),
'click', function() {
filterMap(layer, tableId, map);
});
google.maps.event.addDomListener(document.getElementById('Signed Not Selling'),
'click', function() {
filterMap(layer, tableId, map);
});
}
// Filter the map based on checkbox selection.
function filterMap(layer, tableId, map) {
var where = generateWhere();
if (where) {
if (!layer.getMap()) {
layer.setMap(map);
}
layer.setOptions({
query: {
select: 'Full Address',
from: tableId,
where: where
}
});
} else {
layer.setMap(null);
}
}
// Generate a where clause from the checkboxes. If no boxes
// are checked, return an empty string.
function generateWhere() {
var filter = [];
var stores = document.getElementsByName('store');
for (var i = 0, store; store = stores[i]; i++) {
if (store.checked) {
var storeName = store.value.replace(/'/g, '\\\'');
filter.push("'" + storeName + "'");
}
}
var where = '';
if (filter.length) {
where = "'Map' IN (" + filter.join(',') + ')';
}
return where;
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
You did not include your checkboxes, etc. But here's an example which works, using buttons, not checkboxes. Should not be too hard to adapt it your needs. No zoom to, which is really a different questions.
http://jsfiddle.net/ebridger/wmnDU/