How to pass javascript variable value to google maps

Question

I am trying to pass the value from javascript to google maps v3. Here i have php code that is getting the lat and lon values from database and generating table for one record.

i am getting lat and lon from that table and alerting that value.Now i want to pass the lat and lon values to the google maps, onclick. how can i do this?

Code:

while($row = mysql_fetch_assoc($retval))
{
echo "<tr>";
echo "<td>" . $row['id'] . "</td>";
echo "<td>" . $row['theater_name'] . "</td>";
echo "<td>" . $row['address'] . "</td>";
echo "<td id='lat'>" . $row['lat'] . "</td>";
echo "<td id='lon'>" . $row['lon'] . "</td>";
echo "</tr>";
}

The above code is generating the table using php code.

<script type="text/javascript">
function getvalue()
{
var lat = document.getElementById('lat').innerHTML;
var lon = document.getElementById('lon').innerHTML;
alert(lat+","+lon);
}
</script>

The above javascript function is getting the lat and lon value from the table.

Now i want to pass the lat and lon values to the below goole maps api to lat and lon

Code:

<script type="text/javascript">

  function initialize() {
    var mapDiv = document.getElementById('map-canvas');
    var map = new google.maps.Map(mapDiv, {
      center: new google.maps.LatLng(12.955649,77.570837),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  }


  google.maps.event.addDomListener(window, 'load', initialize);
</script>

In place of (12.955649,77.570837) i want to get the lat and lon value that the javascript function is getting from table

Andy · Accepted Answer · 2014-02-06 10:59:45Z

2

Just pass them in to initialize as parameters. You may have to use parseInt on the values as they will be returned as strings using getElementById(x).innerHTML rather than integers.

function getvalue() {
  var lat = parseInt(document.getElementById('lat').innerHTML, 10);
  var lon = parseInt(document.getElementById('lon').innerHTML, 10);
  initialize(lat, lon);
}

function initialize(lat, lon) {
  var mapDiv = document.getElementById('map-canvas');
  var map = new google.maps.Map(mapDiv, {
    center: new google.maps.LatLng(lat, lon),
    zoom: 13,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
}

answered Feb 6, 2014 at 10:59

Andy

63.6k13 gold badges72 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to pass javascript variable value to google maps

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related