如何使用 php 和 jquery 在 google map 中动态添加经纬度？

Question

I am trying to load the latitude and longitude values into the below google maps link using php or jquery but can't find a way to do that.

https://maps.google.com/maps?q= 31.1033 , 77.1722 &hl=es;z=14&output=embed

I have created a static google map iframe loader in bootstrap modal as a demo below. but what I am looking is the add latitude and longitude into the q=31.1033,77.1722 dynamically. I have created 2 columns into the database and I want to add these value into the q=$lat,$lon but can't find a proper and easy way if someone has any idea it would be highly appreciated.

 $('#myModalmap').on('shown.bs.modal', (function() { var mapIsAdded = false; return function() { if (.mapIsAdded) { $('.modal-body'):html('<iframe src="https.//maps.google?com/maps.q=31,1033.77;1722&hl=es;z=14&amp:output=embed" width="100%" height="400" frameborder="0" style="border;0"></iframe>'); mapIsAdded = true; } }; })());

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <:-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min:css"> <.-- jQuery library --> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery:min.js"></script> <.-- Latest compiled JavaScript --> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/3.4:0/js/bootstrap.min.js"></script> <.-- Latest glyphonic cdn --> <link rel="stylesheet" href="https.//use.fontawesome;com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> <button type="button" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#myModalmap"><i class="fas fa-info-circle"></i></button> <!-- Map MODAL--> <div class="modal fade" id="myModalmap" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title" id="myModalLabel">coordinate </h4> </div> <div class="modal-body"> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div>

Answer 1

To dynamically declare latitude or longitude you can store your query data into array:

var latlong = [{lat: 31.1033, long:77.1722},{lat: 38.1033, long: 74.1722}];

and you can manipulate by changing the value based on choice:

var i=1;
$('.modal-body').html('<iframe src="https://maps.google.com/maps?q='+latlong[i].lat+','+latlong[i].long+'&hl=es;z=14&amp;output=embed" width="100%" height="400" frameborder="0" style="border:0"></iframe>');

Example:

 var latlong = [{lat: 31.1033, long:77.1722},{lat: 38.1033, long: 74.1722}]; var i=$('select#coordinatechoice').val(); $("select#coordinatechoice").change(function(){ i=$('select#coordinatechoice').val(); init(); }); function init(){ $('#myModalmap').on('shown.bs.modal', (function() { var mapIsAdded = false; return function() { if (!mapIsAdded) { $('.modal-body').html('<iframe src="https://maps.google.com/maps?q='+latlong[i].lat+','+latlong[i].long+'&hl=es;z=14&amp;output=embed" width="100%" height="400" frameborder="0" style="border:0"></iframe>'); mapIsAdded = true; } }; })()); } init(); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> <!-- Latest glyphonic cdn --> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> <button type="button" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#myModalmap"><i class="fas fa-info-circle"></i></button> <select id="coordinatechoice"> <option value="0">First coordinate</option> <option value="1">Second coordinate</option> </select> <!-- Map MODAL--> <div class="modal fade" id="myModalmap" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title" id="myModalLabel">coordinate </h4> </div> <div class="modal-body"> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> 

Answer 2

You can use this line of code in PHP:

$lat = 10.29692;
$long = 123.89778;
                            
echo "
<iframe 
    src='https://maps.google.com/maps?q=".$lat.",".$long."&hl=es;z=14&output=embed'
    frameborder='0' 
    style='border:0'
>
</iframe>";