Copy link to clipboard
Copied
Hey,
I got this function of the internet to convert an address from a database into coordinates, but i need them separately. Can anyone help to separate the code into two, so i can have one variable for the longitude and one for the latitude.
<!doctype html>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<?php
include('db.php');
$bestel_id = $_COOKIE['bestelnum'];
$query = "select Adres, Postcode, Stad from Bestelling where Bestel_id = '$bestel_id'";
$result = mysql_query($query) or die (mysql_error());
while ($row = mysql_fetch_array($result)) {
$plaats = "$row[Adres] $row[Postcode] $row[Stad]";
}
function getCoordinates($address){
$address = str_replace(" ", "+", $address); // replace all the white space with "+" sign to match with google search pattern
$url = "http://maps.google.com/maps/api/geocode/json?sensor=false&address=$address";
$response = file_get_contents($url);
$json = json_decode($response,TRUE); //generate array object from the response from the web
return ($json['results'][0]['geometry']['location']['lat'].",".$json['results'][0]['geometry']['location']['lng']);
}
echo getCoordinates($plaats);
?>
</body>
</html>
Thanks!!
Faberh wrote
No it's a school project. I thought if i do it this way, i will score better. But i think i will change everything in the database. Thanks for your help!
I think it will be more stable if you pull the co-ordinates from the database - you can still do that dynamically - the only downside is you have to source those co-ordinates but I think the pay off will probably work better.
By the way youre using the out-of-date mysql function to connect/query your database - you'll probably scrore
...Copy link to clipboard
Copied
Not sure if this will work but try splitting the code into getLatitude and getLongitude functions and see what happens, if anything:
function getLatitude($address){
$address = str_replace(" ", "+", $address); // replace all the white space with "+" sign to match with google search pattern
$url = "http://maps.google.com/maps/api/geocode/json?sensor=false&address=$address";
$response = file_get_contents($url);
$json = json_decode($response,TRUE); //generate array object from the response from the web
return ($json['results'][0]['geometry']['location']['lat']);
}
echo getLatitude($plaats);
function getLongitude($address){
$address = str_replace(" ", "+", $address); // replace all the white space with "+" sign to match with google search pattern
$url = "http://maps.google.com/maps/api/geocode/json?sensor=false&address=$address";
$response = file_get_contents($url);
$json = json_decode($response,TRUE); //generate array object from the response from the web
return ($json['results'][0]['geometry']['location']['lng']);
}
echo getLongitude($plaats);
Copy link to clipboard
Copied
It works! Thanks!!
How can i pass the variables from php to html, so i can put it into a map?
<!DOCTYPE html>
<html>
<head>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div id="map"></div>
<script>
function initMap() {
var uluru = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
i think i have to insert the variables into the lat and lng variable but how can i put php variables there, so i don't have to make a single page for each address?
Hope you will understand my question.
Thanks
Copy link to clipboard
Copied
Include2 hidden input fields in your pages code, one for latitude and the other for longtitude, as shown below:
<input type="hidden" class="latitude" value="<?php echo getLatitude($plaats); ?>">
<input type="hidden" class="longtitude" value="<?php echo getLongitude($plaats); ?>">
Add a couple of variables, latitude and longtitude, to the initMap function and add those variables to the uluru variable, as shown below:
<script>
function initMap() {
var latitude = document.querySelector(".latitude").value;
var longtitude = document.querySelector(".longtitude").value;
var uluru = {lat: latitude, lng: longtitude};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
</script>
That should give you dynamic map co-ordinations based on the address which is called out of the database.
Copy link to clipboard
Copied
It doesn't work, it will show a gray map.
<!DOCTYPE html>
<html>
<head>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<input type="hidden" class="latitude" value="<?php echo getLatitude($plaats); ?>">
<input type="hidden" class="longtitude" value="<?php echo getLongitude($plaats); ?>">
<h3>My Google Maps Demo</h3>
<div id="map"></div>
<script>
function initMap() {
var latitude = document.querySelector(".latitude").value;
var longtitude = document.querySelector(".longtitude").value;
var uluru = {lat: latitude, lng: longtitude};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB6k4w702Zoxq_QqaKubXyh6Yc62jl4ibA&callback=initMap">
</script>
</body>
</html>
Copy link to clipboard
Copied
Faberh wrote
It doesn't work, it will show a gray map.
Use the script below, see if that works:
<script>
function initMap() {
var latitude = document.querySelector('.latitude').value;
var longtitude = document.querySelector('.longtitude').value;
var myLatlng = new google.maps.LatLng(latitude,longtitude);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: myLatlng
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map
});
}
</script>
Copy link to clipboard
Copied
Sometimes, the result of the longitude is 0000000. The function is not so accurate, how can i fix this?
<!doctype html>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<?php
include('db.php');
$bestel_id = "1";
$query = "select Adres, Postcode, Stad from Bestelling where Bestel_id = '$bestel_id'";
$result = mysql_query($query) or die (mysql_error());
while ($row = mysql_fetch_array($result)) {
$plaats = "$row[Adres] $row[Postcode] $row[Stad]";
}
function getLatitude($address){
$address = str_replace(" ", "+", $address); // replace all the white space with "+" sign to match with google search pattern
$url = "http://maps.google.com/maps/api/geocode/json?sensor=false&address=$address";
$response = file_get_contents($url);
$json = json_decode($response,TRUE); //generate array object from the response from the web
return ($json['results'][0]['geometry']['location']['lat']);
}
echo getLatitude($plaats);
function getLongitude($address){
$address = str_replace(" ", "+", $address); // replace all the white space with "+" sign to match with google search pattern
$url = "http://maps.google.com/maps/api/geocode/json?sensor=false&address=$address";
$response = file_get_contents($url);
$json = json_decode($response,TRUE); //generate array object from the response from the web
return ($json['results'][0]['geometry']['location']['lng']);
}
echo getLongitude($plaats);
?>
<input type="hidden" class="latitude" value="<?php echo getLatitude($plaats); ?>">
<input type="hidden" class="longtitude" value="<?php echo getLongitude($plaats); ?>">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div id="map"></div>
<script>
function initMap() {
var latitude = document.querySelector('.latitude').value;
var longtitude = document.querySelector('.longtitude').value;
var myLatlng = new google.maps.LatLng(latitude,longtitude);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: myLatlng
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB6k4w702Zoxq_QqaKubXyh6Yc62jl4ibA&callback=initMap">
</script>
</body>
</html>
Copy link to clipboard
Copied
Faberh wrote
Sometimes, the result of the longitude is 0000000. The function is not so accurate, how can i fix this?
I found that also. It works randomly. I'm not sure this is a great way to access the map-co-ordinates as the function relies on a url connection to the google map server to produce those co-ordinates from the 'address' variable in the url supplied. I'm not sure if that is responsible for causing the hit and miss results. If the co-ordinates are 'hard coded' the results seem stable so I feel it is something to do with the dynamically generated co-ordinates, passing the address off to the google server and waiting for the response.
Is there an issue with coding the co-ordinates into the database itself as the result might be more stable? I suppose you have too many addresses?
Copy link to clipboard
Copied
No it's a school project. I thought if i do it this way, i will score better. But i think i will change everything in the database. Thanks for your help!
Copy link to clipboard
Copied
Faberh wrote
No it's a school project. I thought if i do it this way, i will score better. But i think i will change everything in the database. Thanks for your help!
I think it will be more stable if you pull the co-ordinates from the database - you can still do that dynamically - the only downside is you have to source those co-ordinates but I think the pay off will probably work better.
By the way youre using the out-of-date mysql function to connect/query your database - you'll probably scrore better if you use the new improved mysqli or pdo function, that's more in keeping with todays modern workflow.