When I click on the map marker, the modal pops up as such:
I just implemented a search function and try to get it when I click on the result, the modal with all the information will pop up just like in the photo.
Here is the code I'm working with for this page:
MapsController:
class MapsController < ApplicationController
def index
@maps = Map.all
@hash = Gmaps4rails.build_markers(@maps) do |map, marker|
marker.lat map.latitude
marker.lng map.longitude
marker.json({:id => map.id,
:number => map.number,
:name => map.name,
:tabid => map.tabid,
:zipcode => map.zipcode,
:latitude => map.latitude,
:longitude => map.longitude
})
end
end
def favorite
@map = Map.new(:number => 'Favorite Site')
@map.save
redirect_to :back
flash[:success] = "favorited"
end
def show
@maps = Map.find(params[:id])
end
end
SearchController:
class SearchController < ApplicationController
def index
if params[:query].present?
@maps = Map.search(params[:query]).with_pg_search_highlight
@count = @maps.pluck(:id).count
@hash = Gmaps4rails.build_markers(@maps) do |map, marker|
marker.lat map.latitude
marker.lng map.longitude
marker.json({:id => map.id,
:number => map.number,
:name => map.name,
:tabid => map.tabid,
:zipcode => map.zipcode,
:latitude => map.latitude,
:longitude => map.longitude
})
end
else
@maps = Map.all
end
end
end
Here is my code for my search results page:
<% provide(:page_title, 'Search Results') %>
<script src="//maps.google.com/maps/api/js?key=AIzaSyAxwNVY12NVNEbrnPorhkHRe7V0_xU8xHM&libraries=places"></script>
<% content_for :scripts %>
<%= javascript_include_tag 'creative/marker_cluster.js', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'creative/infobox_packed.js', 'data-turbolinks-track': 'reload' %>
<div class="main">
<div id="sideBar" class="pre-scrollable">
<h2><%= @count%> results found </h2>
<br>
<% @maps.each do |map| %>
<div>
<div class="" id="map_<%= map.id %>">
<h4>
<%= link_to map.number, controller: "maps", action: "show", id: map.id %>
</h4>
<hr>
</div>
</div>
<% end %>
<%= link_to 'Return to Main Map', maps_path %>
</div>
<div id="map_wrapper">
<div id="map" style='width: 100%; height: 100%;'></div>
</div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
<div class="modal-dialog">
<div class="panel panel-green margin-bottom-40">
<div class="panel-heading">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<div class = "name"></div>
</div>
<div class="panel-body">
<div id="map2" style='width: 568px; height: 365px;'>
</div>
<div class="row">
<div class="col-sm-12 text-center">
</div>
</div>
</div>
<table class="table paneltb">
</table>
</div>
</div>
</div>
<script type = "text/javascript">
var handler = Gmaps.build('Google', {
markers:
{clusterer: {
gridSize: 60,
maxZoom: 20,
styles: [ {
textSize: 10,
textColor: '#ff0000',
url: 'assets/creative/m1.png',
height: 60,
width: 60 }
, {
textSize: 14,
textColor: '#ffff00',
url:'assets/creative/m2.png',
height: 60,
width: 60 }
, {
textSize: 18,
textColor: '#0000ff',
url: 'assets/creative/m3.png',
width: 60,
height: 60}
]}}
});
var current;
function initialize(){
handler.buildMap({ internal: {id: 'map'} }, function() {
markers_json = <%=raw @hash.to_json %>;
markers = _.map(markers_json, function(marker_json){
marker = handler.addMarker(marker_json);
handler.fitMapToBounds();
_.extend(marker, marker_json);
return marker;
});
getLocation();
markers.map(function(elem, index) {
google.maps.event.addListener(elem.getServiceObject(), "click", function(evt) {
var id = elem.id,
number = elem.number,
name = elem.name,
zipcode = elem.zipcode,
tabid = elem.tabid,
latitude = elem.latitude,
longitude = elem.longitude
$(".name").html("<h3 class='panel-title'><i class='fa fa-id-card'></i>"+number+"</h3>")
$(".paneltb").html("<thead><tr><th>Panel</th><th>Location</th><th>Tab ID</th><th>Zip Code</th><th>Latitude</th><th>Longitude</th></tr></thead><tbody><tr><td>"+number+"</td><td>"+ name + "</td><td>"+tabid+"</td><td>"+zipcode+"</td><td>"+latitude+"</td><td>"+longitude+"</td></tr></tbody>")
pos = new google.maps.LatLng( latitude, longitude );
var div = document.getElementById('map2');
var sv = new google.maps.StreetViewPanorama(div);
sv.setPosition( pos );
sv.setVisible( true );
// find the heading by looking from the google car pos to the venue pos
var service = new google.maps.StreetViewService();
service.getPanoramaByLocation( pos, 50, function(result, status) {
if (status == google.maps.StreetViewStatus.OK)
{
carPos = result.location.latLng;
heading = google.maps.geometry.spherical.computeHeading( carPos, pos );
sv.setPov( { heading: heading, pitch: 0, zoom: 0 } );
}
})
$('#myModal').modal('show')
current = elem;
$("#myModal").on("shown.bs.modal", function () {
google.maps.event.trigger(sv, "resize");
});
});
})
});
// Create the search box and link it to the UI element.
}
function getLocation(){
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(displayOnMap);
}
else{
navigator.geolocation.getCurrentPosition(displayOnMapError);
}
};
function displayOnMap(position){
marker2 = handler.addMarker({
lat: position.coords.latitude,
lng: position.coords.longitude,
picture: {
url: "<%= asset_path 'creative/1499326997_Untitled-2-01.png' %>",
width: 48,
height: 48
},
infowindow: "You are Here!"
});
handler.map.centerOn(marker2);
handler.getMap().setZoom(10);
};
function displayOnMapError(position){
marker2 = handler.addMarker({
lat: 34.0522,
lng: -118.2437,
picture: {
url: "<%= asset_path 'creative/1499326997_Untitled-2-01.png' %>",
width: 48,
height: 48
}
});
handler.map.centerOn(marker2);
handler.getMap().setZoom(10);
};
initialize();
</script>
Right now, when I click on the link, I am redirected to the link with the map identifier, which is nothing (see address), for example:
If someone can guide me, we will be very grateful.
Update 1
, , . , , (. ). , :
, , , , , , , - .
2
, , , javascript . , , .
3
, , onclick, , , .
<%= link_to map.number, "#", data: {toggle: "modal", target: "#myModal"}, :html => {:onclick => 'initialize()' } %>