How to display two gmaps4rails on same page one regular map and one in street view (Google Maps and Rails)
I am using gmaps4rails and have one map going already when someone clicks on a marker a modal pops up. In the modal I want a map in street view instead of the picture.
So far this is what I have in my index.html.erb I am just confused on how to do this. I know there are resources on the gmaps4rails wiki but I do not know where to even place the resources on my page. Someone with some insight would be greatly appreciated.
<% provide(:page_title, 'Browse Coverage') %>
<script src="//maps.google.com/maps/api/js?key=blablablaM&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 id="map" style='width: 100%; height: 900px;'></div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<!--Basic Table-->
<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 class="thumbnail-img">
<div class="overflow-hidden streetViewContainer">
</div>
</div>
<div class="row">
<div class="col-sm-12 text-center">
<button class="btn-u btn-u-lg rounded-4x btn-u-green" type="button"><i class="fa fa-check-circle" aria-hidden="true"></i> Check Availability</button>
<button class="btn-u btn-u-lg rounded-4x btn-u-green" type="button"><i class="fa fa-plus-circle" aria-hidden="true"></i> Add to Favorites</button>
<%= form_tag(controller: "maps", action: "favorite", method: "post")%>
<%= submit_tag "Favorite"%>
</div>
</div>
</div>
<table class="table paneltb">
</table>
</div>
<!--End Basic Table-->
</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,
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>Zip Code</th><th>Latitude</th><th>Longitude</th></tr></thead><tbody><tr><td>"+number+"</td><td>"+ name + "</td><td>"+zipcode+"</td><td>"+latitude+"</td><td>"+longitude+"</td></tr></tbody>")
$('#myModal').modal('show')
current = elem;
});
})
});
// 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>
<script type = "text/javascript">
pos = new google.maps.LatLng( <%= latitude %>, <%= longitude %> );
var div = document.getElementById('streetViewContainer');
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: 1 } );
}
} );
</script>
Here is an example of what the map looks like and when it opens a modal pops up the grey area is where I want to put another map.
Solution
I figured it out as I said I am using gmaps4rails and I have done some customizing instead of an infobox I have a modal, marker clusters, and now a map within the modal for google street view. I just added the code that was written for this https://stackoverflow.com/a/10938316/7039895 and wrote it in the part where I customized my modal passing the values longitude and latitude into the code. Worked perfectly.
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 handler2 = Gmaps.build('Google');
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,
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>Zip Code</th><th>Latitude</th><th>Longitude</th></tr></thead><tbody><tr><td>"+number+"</td><td>"+ name + "</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: 1 } );
}
})
$('#myModal').modal('show')
current = elem;
});
})
});
// 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();
- Is it possible to pull css values with HTA javascript?
- What a strange syntax?
- JavaScript / Jest: How to show logs from test case only when test fails?
- How to secure my login page
- How can I create a two-way mapping in JavaScript, or some other way to swap out values?
- Route "/[locale]" used `params.locale`. `params` should be awaited before using its properties
- Page.locator() is the recommended way to select and interact with elements. Why does it offer less functionalities than Page.$()?
- How to filter object array based on attributes?
- How do you convert from emoji to unicode escapes in JS
- How to simulate a mouse click?
- Is it possible to add a single item to a vis.js timeline?
- How to ensure order of Cypress request execution
- Jquery Ajax Problem
- Can I run a function after navigating to a new page and waiting for that page to finish loading?
- Cannot start cocos after adding a new file
- Active link with React-Router?
- Is there a way to schedule offline notifications in a pwa?
- How to get the grid coordinates of an element using JavaScript?
- Bootstrap popper.js Failed to find a valid digest in the 'integrity' attribute for resource
- LeafLet map doesnt render properly on modal
- Create object from array
- How to ignore lines of code from coverage in vitest?
- How to manage CORS in Django
- How can I get an element's Accessible Name in javascript in the browser?
- TypeError: fs.readFileSync is not a function in Next.js
- Show hide divs on click in HTML and CSS without jQuery
- If an IIFE contains just one variable declaration that is immediately exported to global scope, why bother with it?
- Need explanation on following type of Javascript code
- What does an array literal with the `for` keyword inside mean in JavaScript?
- How to call a function every minute in a React component?