0
gmaps4railsを使用しているときに、モーダルがポップアップするマーカーをクリックすると、モーダルでは、絵の代わりにストリートビューの地図が必要です。2つのgmaps4railsを同じページに表示する方法1つの通常のマップと1つの画像を表示する（Googleマップとレール）
これまでのところ、これは私の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>
は、マップがどのように見えるし、それが開いたときに、モーダルは、私は別のマップを配置する場所灰色の領域がポップアップ表示の例です。
