如何在同一页面上显示两个 gmaps4rails 一个常规地图和一个街景视图（Google 地图和 Rails）
How to display two gmaps4rails on same page one regular map and one in street view (Google Maps and Rails)
我正在使用 gmaps4rails，当有人点击一个标记时，一个模式已经弹出。在模式中，我想要一张街景地图而不是图片。
到目前为止，这就是我的 index.html.erb 我只是不知道如何做到这一点。我知道 gmaps4rails wiki 上有资源，但我什至不知道将资源放在我的页面上的什么位置。有见识的人将不胜感激。
<% 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>
这是地图外观的示例，当它打开时会弹出一个模式，灰色区域是我想放置另一张地图的地方。
我想通了，正如我所说的，我正在使用 gmaps4rails，我做了一些自定义而不是信息框，我有一个模态、标记集群，现在模态内有一张地图，用于 google 街景。我刚刚添加了为此 编写的代码，并将其写在我自定义模式的部分，将值经度和纬度传递到代码中。完美运行。
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();
我正在使用 gmaps4rails，当有人点击一个标记时，一个模式已经弹出。在模式中，我想要一张街景地图而不是图片。
到目前为止，这就是我的 index.html.erb 我只是不知道如何做到这一点。我知道 gmaps4rails wiki 上有资源，但我什至不知道将资源放在我的页面上的什么位置。有见识的人将不胜感激。
<% 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>
这是地图外观的示例，当它打开时会弹出一个模式，灰色区域是我想放置另一张地图的地方。
我想通了，正如我所说的，我正在使用 gmaps4rails，我做了一些自定义而不是信息框，我有一个模态、标记集群，现在模态内有一张地图，用于 google 街景。我刚刚添加了为此 编写的代码，并将其写在我自定义模式的部分，将值经度和纬度传递到代码中。完美运行。
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();