I need to load google map link(remote) after open modal box.
HTML:
<a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal</a>
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">Location:
<input type="text" id="us2-address" style="width: 200px" />Radius:
<input type="text" id="us2-radius" />
<div id="us2" style="height: 400px;"></div>Lat.:
<input type="text" id="us2-lat" />Long.:
<input type="text" id="us2-lon" />
</div>
<div class="modal-footer"> <a href="#" data-dismiss="modal" class="btn">Close</a>
<a href="#" class="btn btn-primary" id="save-changes">Save changes</a>
</div>
</div>
</div>
</div>
JS:
var stillPresent = false;
$('#myModal').on('shown.bs.modal', function (e) {
if(stillPresent == false){
$('#us2').locationpicker({
location: {
latitude: 46.15242437752303,
longitude: 2.7470703125
},
radius: 300,
inputBinding: {
latitudeInput: $('#us2-lat'),
longitudeInput: $('#us2-lon'),
radiusInput: $('#us2-radius'),
locationNameInput: $('#us2-address')
}
});
stillPresent = true;
}
})
google map link : http://maps.google.com/maps/api/js?sensor=false&libraries=places
DEMO : http://jsfiddle.net/Lzv7w/9/
if I add google map link into external resources jsfiddle worked. but I need to load google map link after open modal.
How to load this ?
Google has a nice tutorial here that may help you. And the code below should fix your problem. Note that it may not work jsfiddle, but it should work on your real page.
var stillPresent = false;
function initialize() {
if (stillPresent == false) {
$('#us2').locationpicker({
location : {
latitude : 46.15242437752303,
longitude : 2.7470703125
},
radius : 300,
inputBinding : {
latitudeInput : $('#us2-lat'),
longitudeInput : $('#us2-lon'),
radiusInput : $('#us2-radius'),
locationNameInput : $('#us2-address')
}
});
stillPresent = true;
}
}
function loadScript() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://maps.google.com/maps/api/js?sensor=false&libraries=places&callback=initialize';
document.body.appendChild(script);
}
$('#myModal').on('shown.bs.modal', function(e) {
loadScript();
});
Also, here is a link to a similar question.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.