How to add latitude and longitude in google map dynamically using php and jquery?

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>

Is your js code inside a file rendered by php?

Mark E
– Mark E

2019-03-29 06:44:31 +00:00
Commented Mar 29, 2019 at 6:44 — Mark E
– Mark E, Commented Mar 29, 2019 at 6:44
no sir, I tried to insert it but failed.

Ns789
– Ns789

2019-03-29 06:54:44 +00:00
Commented Mar 29, 2019 at 6:54 — Ns789
– Ns789, Commented Mar 29, 2019 at 6:54

Mukyuu · Accepted Answer · 2019-03-29 07:13:02Z

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>

Nar · Accepted Answer · 2022-11-17 11:53:37Z

0

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>";

edited Nov 17, 2022 at 11:53

answered Nov 17, 2022 at 11:51

Nar

11 bronze badge

Collectives™ on Stack Overflow

How to add latitude and longitude in google map dynamically using php and jquery?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related