Pass Latitude and Longitude to a javascript function and get a view from the google map
Question
I'm implementing a PHP website using weather data. I want to know how to pass latitude and longitude values from an HTML element with a JavaScript onClick event. I have used this code to get Google maps:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key*****************&sensor=true"></script>
<script type="text/javascript">
function initialize() {
var myOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
}
</script>
</head>
<body>
<p onClick="initialize()">Search</p>
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
In the above code, the latitude and longitude coordinates are inside the JavaScript function. But, I want the HTML paragraph tag like:
<p onClick=".....">6.234235, 34.234345</p>
And I want to pass above values as a URl like:
https://www.google.lk/maps/@[lat],[long]
Does anyone know how to pass a URL like this to the above function?
3 answers
solution1
3 ACCPTED 2014-07-07 13:49:20
One possible way could be gathering the coords from the <p> node and parse them to the Google Maps Initialize function.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key*****************&sensor=true"></script>
<script type="text/javascript">
function initialize() {
var coords = document.getElementById('coords').innerHTML.split(",");
var lat = coords[0];
var lng = coords[1];
var myOptions = {
center: new google.maps.LatLng(lat, lng),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var myMarkerLatlng = new google.maps.LatLng(lat,lng);
var marker = new google.maps.Marker({
position: myMarkerLatlng,
map: map,
title: 'Hello World!'
});
}
</script>
</head>
<body>
<p onClick="initialize()">Search</p>
<p id="coords" onClick="initialize()">6.234235, 34.234345</p>
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
solution2
1 2015-08-12 13:51:26
This is a little late, but I stumbled on this while searching my own answer. I found my solution based on what I learned here:
In Markup:
<div id="map" data-lat="<?php echo $locationInfo[0]['lat']; ?>" data-lon="<?php echo $locationInfo[0]['lng']; ?>"></div>
In Javascript:
var themap = document.getElementById('map');
//console.log('lat: ' +themap.dataset.lat);
//console.log('lon: ' +themap.dataset.lon);
var myOptions = {
center: new google.maps.LatLng(themap.dataset.lat, themap.dataset.lon),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
I haven't tested it in your code, but this works for me.
solution3
0 2014-07-07 13:50:31
To get the values from the p tag, and an ID to it and include this in your initialize() function:
var latLng = document.getElementById('yourId').innerHTML.split[', '];
var myOptions = {
center: new google.maps.LatLng(latLng[0], latLng[1]),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
If you've got multiple p tags with different locations that users can click, set up an event listener and call getSource() on the event object instead of document.getElementById().
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.