[英]Passing data-id to bootstrap modal and use it iframe url
I am trying to display map in bootstrap Modal. 我正在尝试在Bootstrap Modal中显示地图。 i have list of records which contain location link.
我有包含位置链接的记录列表。 on click location its will show the map location in modal window.
单击位置后,它将在模式窗口中显示地图位置。 i successfully passed the value to modal window.
我成功地将值传递给模态窗口。 but unable to use in iframe src link.
但无法在iframe src链接中使用。 below is my code.
下面是我的代码。
<a href="#myMapModal" class="btn fblack" data-toggle="modal" data-id="<?=$row['lat']?>,<?=$row['lng']?>">Location on Map</a>
and my jquery 和我的jQuery
<script>
$('#myMapModal').on('show.bs.modal', function (e) {
var location = $(e.relatedTarget).attr('data-id');
$(this).find('#latlng').text(location);
});
</script>
i am trying to put the return value in a url 我试图将返回值放在url中
<iframe width="570" height="300" frameborder="0" style="border:0;" src="https://www.google.com/maps/embed/v1/place?q=#latlng&key=xxxxxxxxxxx"></iframe>
i given q=#latlng
我给了
q=#latlng
i could able to print by using <div id="latlng"></div>
我可以使用
<div id="latlng"></div>
进行打印
but i am unable to use in URL. 但我无法在URL中使用。
Use this script, learn more about the google api 使用此脚本,详细了解Google API
<script>
$(function(){
$('#myMapModal').$('.bs-example-modal-lg').on('show.bs.modal', function (e) {
var location = $(e.relatedTarget).attr('data-id');
var newUrl = 'https://www.google.com/maps/embed/v1/view?key=1234¢er='+location;
console.log(newUrl);
$(this).find('iframe').attr('src',newUrl);
});
});
</script>
what i did to make it work. 我做了什么使它工作。
<script>
$('#myMapModal').on('show.bs.modal', function (e) {
var location = $(e.relatedTarget).attr('data-id');
$.ajax({
type : 'post',
url : 'map-list.php', //Here you will fetch records
data : 'rowid='+ location, //Pass $id
success : function(data){
$('#fetched-data').html(data);//Show fetched data from database
}
});
});
</script>
on map-list.php 在map-list.php上
<?php
//Include database connection
if($_POST['rowid']) {
$eveid = $_POST['rowid']; //escape string
?>
<iframe width="570" height="300" frameborder="0" style="border:0;" src="https://www.google.com/maps/embed/v1/place?q=<?=$eveid?>&key=AIzaSyCoqMKgHRLWPQAwjGq0dzRhSg6e4UlrgE4"></iframe>
<?
}
?>
in modal body 在情态的身体
<div id="fetched-data"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.