My javascript is populating markers on map and for that i need locations ,which i have generated from php file in the format given below
i want to dynamically get the result of the php array in the javascript array
<script type="text/javascript">
var locations = /// i want here the output as shown below from the php file
var locations = [["Vidyasagar","28.6139391","77.20902120000005"],
["Pushpadantsagar","21.4598","80.195"],
["Tarunsagar","28.638","77.2936"],
["Samyaktbhushan","20.593684","78.96288000000004"],
["Pavitrasagar","23.2836","79.2318"],
["Prayogsagar","23.2836","79.2318"],
["Arunsagar","30.016","77.4"]];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: new google.maps.LatLng(23.2836,79.2318),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
</script>
and the php file is this
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "jainmunilocator";
$connection=mysqli_connect($servername, $username, $password, $dbname);;
if (!$connection) {
die("Connection failed: " . mysqli_connect_error());
}
$array = array();
$sql = "SELECT name,id,lat,lng FROM muni_location,munishri WHERE mid=id AND lat<>0";
$result=mysqli_query($connection,$sql);
$i=0;
while($row = mysqli_fetch_assoc($result)){
if(isset($row)){
$array[$i][0]=$row['name'];
$array[$i][1]=$row['lat'];
$array[$i][2]=$row['lng'];
$i++;
}
}
echo json_encode($array);
?>
You will need to use an ajax call. Here is a question on Stack Overflow that has some examples of an ajax call to a php page.
Keep in mind though that you'll need to either include a jQuery library for you to do that, or you can follow along in this question to make an ajax call without jQuery.
You could use PHP to output the variables into a hidden input field's value attribute and encode them as JSON. Then, using Javascript use JSON.parse to decode the PHP variables from the hidden input field's value attribute. You can then remove the element from the DOM.
The trick is by echoing the PHP var into javascript. As Php is processed before, outputting correct Js.
<script>
var locations = array(<?= $VAR ?>);
</script>
In this case $VAR must be something like $VAR = "'barcelona','madrid','london'";
Adjust $VAR so it generate correct output. No need to use JSON encode if you just need it for this.
Related
My objective is to obtain data from a table in a database and show it on the map. My table has three columns: LATITUD (stores the latitude)(type=float(10,6)), LONGITUD (stores the longitude)(type=float 10,6) and ASUNTO(stores the information)(type=VARCHAR). The first two have information of the location of the marker, while the third column stores information related to the marker. The content of this last column is the one I want to show with an info window.
To achieve this inside the body element of the page i have decided to insert a script element (javascript) which I use to create the map and to load all the information related to it.
Inside this javascript code I have included PHP code which is in charge of making a query to the database to obtain the content of the table we mentioned at the beggining in an associative array. Inside this code through a while loop I want to load all the markers with their corresponding info windows.
Loading the markers didn't gave me any problem, to load them I used this while loop code.
while ($row = $resultado->fetch( PDO::FETCH_ASSOC )) {
echo ' var myLatlng1 = new google.maps.LatLng('.
$row['LATITUD'].', '.$row['LONGITUD'].');
var marker1 = new google.maps.Marker({
position: myLatlng1,
map: map,
});';
}
Inside the PHP script I inserted this code and works fine to me. I have the problem when I want to add info windows for each marker which contain the information stored in the "ASUNTO" column mentioned at the beggining. When I modify the code shown above to add info windows I have problems. The code that is giving me problems is the one below.
while ($row = $resultado->fetch( PDO::FETCH_ASSOC )) {
echo ' var asunto = '. $row['ASUNTO'] . ';';
echo ' var myLatlng1 = new google.maps.LatLng('.
$row['LATITUD'].', '.$row['LONGITUD'].');
var marker1 = new google.maps.Marker({
position: myLatlng1,
map: map,
});
var infowindow = new google.maps.InfoWindow({
content: asunto
});
infowindow.open(map, marker1);
';
}
I think that the code line that is giving me problems is the first one inside the loop, which I will show now below.
echo ' var asunto = '. $row['ASUNTO'] . ';';
The reason I believe this, is because the "infowindow" variable when I change its content to a string which is not obtained through PHP and is directly inserted doesn't gives me any problem and displays an info window when it is called using the "open"method. The next code below doesn't gives me any problem.
while ($row = $resultado->fetch( PDO::FETCH_ASSOC )) {
echo ' var myLatlng1 = new google.maps.LatLng('.
$row['LATITUD'].', '.$row['LONGITUD'].');
var marker1 = new google.maps.Marker({
position: myLatlng1,
map: map,
});
var infowindow = new google.maps.InfoWindow({
content: "hello"
});
infowindow.open(map, marker1);
';
}
As you can see the content of the infowindow have changed and when I changed it, it worked correctly and the map was able to load. I would like to show info windows which display the information stored in the database rather than the string "hello" of the example above.
I would like to know why my approach is failing and how to resolve the problem in order to be able to show the info windows I want for each marker.
The problem is not with the database, nor the php. The problem is where you echo that data.
One simple example, it's quite obvious that this won't work
while ($row = $resultado->fetch( PDO::FETCH_ASSOC )) {
echo ' var myLatlng1 = new google.maps.LatLng('.
...
The while-loop creates multiple instances of this code. The variable myLatlng1 will simply be overwritten.
What you need to do, is separate the data from the functions.
So you generate 1 var.
It should be something like this (my php is a bit rusty, I hope I'm not generating errors):
<?php
$data = array(); // we make an empty object/array, we will fill it with the data in the rows
while ($row = $resultado->fetch( PDO::FETCH_ASSOC )) {
$data[] = array(
'LATITUD' => $row['LATITUD'],
'LONGITUD' => $row['LONGITUD'],
'ASUNTO' => $row['ASUNTO'],
);
}
// now we echo this variable, 1 variable containing all the data
$data_string = json_encode($data); // this turns php arrays into a javascript-readable object
echo 'var my_data = ' . $data_string .';'; // notice which ; is for javascript and which is for php
?>
var my_data will be something like this (I'll insert some locations in Brussels):
var my_data = [{"LATITUD":"50.89496405015655","LONGITUD":"4.341537103056892","ASUNTO":"Atomium"},{"LATITUD":"50.84501941894387","LONGITUD":"4.349947169423087","ASUNTO":"Manneken Pis"},{"LATITUD":"50.83847065124941","LONGITUD":"4.376028969883903","ASUNTO":"European Parliament"}];
Now the javascript. How do you use infowindows? I'll use my_data hard coded, so you can copy/paste this code and test the javascript.
don't forget your API key
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 90%;
}
</style>
<div id="map"></div>
<script>
var my_data = [{"LATITUD":"50.89496405015655","LONGITUD":"4.341537103056892","ASUNTO":"Atomium"},{"LATITUD":"50.84501941894387","LONGITUD":"4.349947169423087","ASUNTO":"Manneken Pis"},{"LATITUD":"50.83847065124941","LONGITUD":"4.376028969883903","ASUNTO":"European Parliament"}];
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 50.869754630095834, lng: 4.353812903165801},
zoom: 12
});
for(var i=0; i<my_data.length; i++) {
// marker
var position = {lat: Number(my_data[i].LATITUD), lng: Number(my_data[i].LONGITUD)};
var marker = new google.maps.Marker({
position: position,
title: my_data[i].ASUNTO,
map: map
});
// infowindow
var infowindow = new google.maps.InfoWindow({
content: my_data[i].ASUNTO,
map: map,
position: position
});
}
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
This question already has answers here:
How do I pass variables and data from PHP to JavaScript?
(19 answers)
Closed 7 years ago.
I have this code in PHP. i works fine:
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "tsunami_simulation";
// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
//========================================================
$sql='SELECT a.Household_Name, b.Latitude, b.Longitude FROM household a, location b WHERE a.Household_ID = b.Household_ID;';
$result = mysqli_query($conn, $sql);
if(mysqli_num_rows($result) > 0){
for($i=0;$i<$num_rows;$i++){
$row=mysql_fetch_row($result);
$location[]= $row[0].', '.$row[2].', '.$row[1].','.($i+1);
//echo "Household Name: " . $row[0]. " - Latitude: " . $row[1]. " - Longitude " . $row[2]. " " .($i+1)."<br>";
}
}else{echo "0 results";}
?>
now, what i want to do is access the array result from this PHP file in javascript. i tried using JSON.parse(). but i doesn't work.
i used this piece of code: var locations = '<?php echo json_encode($location); ?>'; i does not give errors. followed by locations = JSON.parse(locations) and it returns <?php echo json_encode($location); ?> this and not the data. how can i get the proper data, any methods will do as long as it works, please help me. btw, i want to get the array from database in wamp and put markers on googlemap using the coordinates from the array. help me please!..
EDIT: There's is the other code where i have to access the data:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>New 1 -- Google Maps Multiple Markers</title>
<script src="http://maps.google.com/maps/api/js?v3"
type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 500px; height: 400px;"></div>
<?php include 'Location.php';?>
<script type="text/javascript">
var locations = <?php echo json_encode($location, JSON_HEX_TAG); ?>;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(6.40, 125.60),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
loc_array = locations[i].split(",");
marker = new google.maps.Marker({
position: new google.maps.LatLng(loc_array[1], loc_array[2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(loc_array[0]);
infowindow.open(map, marker);
}
})(marker, i));
}
</script>
</body>
</html>
$location[]= array($row[0], $row[2], $row[1], $i+1);
and then
var locations = <?php echo json_encode($location, JSON_HEX_TAG); ?>
Note: no JSON.parse needed, no quotes, and especially not manual concatenation of variables to form a quasi-array.
EDIT: JSON_HEX_TAG is highly recommended, if you have PHP 5.3.3+, as plain json_encode is not quite secure.
Trying a new method of plotting a marker on google map with my lat/long queried from a data base. when i create variables within the jquery script tag, it works but im not able to make a call outside out that script. But when i try to set those variables with a json_encode from the php array outside of that script, the console returns with
Uncaught SyntaxError: Unexpected token < index:html:29
<!DOCTYPE html>
<html>
<head>
<style>
#map {
width: 1200px;
height: 900px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js">></script>
<script type = "text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(38.4403, -122.5463);
var mapOptions = {
zoom: 10,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
title:"Hello World!"
});
marker.setMap(map);
}
var latitude = <?php echo json_encode($lat);?>;
var longitude = <?php echo json_encode($long);?>;
var LatLong = new google.maps.LatLng(latitude, longitude);
var marker1 = new google.maps.Marker({
position: LatLong;
title:"Test"
});
marker1.setMap(map);
</script>
</head>
<body onload = "initialize()">
<div id="map"></div>
</body>
</html>
PHP to query over database:
<?php
require("server_info.php");
$connection=db2_connect($database, $username, $password);
if (!$connection) { die('Not connected : ' . db2_conn_error());}
$query = "SELECT lat,long FROM SCHOOL";
$stmt = db2_prepare($connection, $query);
$result = db2_execute($stmt);
$lat = array();
$long = array();
while ($row = db2_fetch_array($stmt)) {
$lat = $row[0];
$long = $row[1];
}
//echo json_encode($lat);
//echo json_encode($long);
db2_close($connection);
?>
The problem is that your file is named index.html. By default, only files with .php suffix are executed using PHP. Since it has a .html extension, the webserver is just returning the file verbatim to the browser, instead of running it through PHP, so <?php echo json_encode($lat); ?> is sent to the client, and that's not valid Javascript.
You should rename it to index.php, then it will be executed using PHP, and the variables will be substituted.
But it looks like there's more to the problem than this. You never set the variables $lat and $long anywhere in the script. You're setting them in a completely different script.
What you probably should be doing is using AJAX to call the query script from Javascript.
In 2 weeks I explored much about Google maps. I am try read a forum and tutorial. But I got this problem when I am going to develop a GIS web. I am using Google maps apiv3, postgre database, and php. I have so much row in my database. Now I only can show multiple marker based on my database, but what I after is the marker have a unique icon based on column content in database like a type 1 = 1.png type 2 = 2.png. the problem is the type is too many, so it is impossible to definition them by manual (because so many type, I already have about 30 type of content in database column ) . I get database value using json. I've already try read forum and some tutorial, but I can't find the answer. sorry for my bad english. please help me, thanks.
this is the code index.php and json.php :
<html lang="en">
<head>
<script type="text/javascript">
function initialize(){
var peta;
var gambar_tanda;
gambar_tanda = 'assets/images/enseval.jpg';
var x = new Array();
var y = new Array();
var customer_name = new Array();
var rayon_name = new Array();
// posisi default peta saat diload
var lokasibaru = new google.maps.LatLng( -1.2653859,116.83119999999997);
var petaoption = {
zoom: 5,
center: lokasibaru,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
peta = new google.maps.Map(document.getElementById("map_canvas"),petaoption);
var infowindow = new google.maps.InfoWindow({
content: ''
});
// memanggil function ambilpeta() untuk menampilkan koordinat
url = "json.php";
$.ajax({
url: url,
dataType: 'json',
cache: false,
success: function(msg){
for(i=0;i<msg.enseval.customer.length;i++){
x[i] = msg.enseval.customer[i].x;
y[i] = msg.enseval.customer[i].y;
customer_name[i] = msg.enseval.customer[i].nama_customer;
//rayon_name[i] = msg.enseval.customer[i].nama_rayon
var point = new google.maps.LatLng(parseFloat(msg.enseval.customer[i].x),parseFloat(msg.enseval.customer[i].y));
tanda = new google.maps.Marker({
position: point,
map: peta,
icon: gambar_tanda,
clickable: true
});
bindInfoWindow(tanda, peta, infowindow, msg.enseval.customer[i].nama_customer );
}
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
function bindInfoWindow(tanda, peta, infowindow, data) {
google.maps.event.addListener(tanda, 'click', function() {
infowindow.setContent(data);
infowindow.open(peta, tanda);
});
}
</script>
<?php
require ('config.php');
$rayon = $_POST['rayon'];
$cabang = $_POST['org_id'];
//echo "$rayon, $cabang, $rayonhasil";
$sql = "SELECT distinct org_id, customer_name, attribute16, attribute17 FROM hasilgis";
$data = pg_query($sql);
$json = '{"enseval": {';
$json .= '"customer":[ ';
while($x = pg_fetch_array($data)){
$json .= '{';
$json .= '"id_customer":"'.$x['org_id'].'",
"nama_customer":"'.htmlspecialchars($x['customer_name']).'",
"x":"'.$x['attribute17'].'",
"y":"'.$x['attribute16'].'"
},';
}
$json = substr($json,0,strlen($json)-1);
$json .= ']';
$json .= '}}';
echo $json;
?>
I'm not sure what's the problem :)
The only thing you must do is to generate icons for all types. You don't have to do it manually - just create a scipt that will generate icons of different colors for every type and name it like 1.jpg, 2.jpg, ...
Pass type via your json message and than on client side create icon url dynamically:
gambar_tanda = 'assets/images/'+msg.enseval.customer[i].type+'.jpg';
I wanna be able to dynamically generate the info for each info window using the php for loop i created due to certain variables in locations[i][3] so it will dynamically pull the information on each pass and i can simply assign it. but for some reason if i try to insert this. the code generates fine ... on the source page... but the map wont even load.. does anyone have a fix for this... and to help make it work... MUCH THX in ADVANCE!! the info has been dynamically pulled in a seperate script the $vars are just used for the count to pull the information from the individual arrays. the map markers generate fine with the lats and lng's its that [i][3] part of the location array thats being funky and -- ps. yes the $vars in the code have been set to zero again. but thats in the side script. so it DOES pull all the proper info. for the [3] string - the map just does not generate in the array.
'<'script type="text/javascript">
//PHP - Lat,Lng ARRAY
var locations = [
php code <?php
$x = 0; $i = 0; $j = 0;
for($aa = 0; $aa < $count; $aa++) {
echo "['" . $business_name[$x] . "'," . $lat[$i] . "," . $lng[$j] . "," . "<div class='coupon'><div class='ribbon'><div class='ribbon-stitches-top'></div><strong class='ribbon-content'><h1>$deal[$y]</h1></strong><div class='ribbon-stitches-bottom'></div></div><div class='picture_coupon'><img src='$deal_photo[$b]' width='150' height='100' /></div><div class='deal'><center><h1>$deal[$y]</h1>$deal_info[$a]<b>Expires: $deal_expiration[$c]</b></center></div></div>" . "],";
$x++; $i++; $j++; $id++;
}
?> END of PHP CODE
[ , , , ]
//['Maroubra Beach', -33.950198, 151.259302, 6]
];
//PHP - Lat,Lng ARRAY
var map;
function initialize() {
var myOptions = {
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
myOptions);
// Try HTML5 geolocation
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
// INVERSE CODE PHP DYNAMIC
var infowindow = new google.maps.InfoWindow();
var marker, i;
var image = '../images/map-icons/blue.png';
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: image
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][3]);
infowindow.open(map, marker);
}
})(marker, i));
}
/* */
// INVERSE CODE PHP DYNAMIC
// GEO LOCATION SET CENTER AND ERROR HANDLING
map.setCenter(pos);
}, function() {
handleNoGeolocation(true);
});
} else {
// Browser doesn't support Geolocation
handleNoGeolocation(false);
}
}
function handleNoGeolocation(errorFlag) {
if (errorFlag) {
var content = 'Error: The Geolocation service failed.';
} else {
var content = 'Error: Your browser doesn\'t support geolocation.';
}
// GEO LOCATION SET CENTER AND ERROR HANDLING
}
// google.maps.event.addDomListener(window, 'load', initialize);
</script>
FIXED -- unfortunately the echo ""; function doesnt allow anything but ('') on the inside of it to separate divs etc. unfortunately the javascript will not load with anything but STANDARD html inside of it. not PHP's variation.
solution was to set the string with proper html standards ie instead of and used the concatenation operator.
ex:
$content = '<div class="coupon"><div class="ribbon"><div class="ribbon-stitches-top"></div><strong class="ribbon-content"><h1>'.$deal[$y].'</h1></strong><div class="ribbon-stitches-bottom"></div></div><div class="picture_coupon"><img src="'.$deal_photo[$b].'" width="150" height="100" /></div><div class="deal"><center><h1>'.$deal[$y].'</h1>'.$deal_info[$a].'<b>Expires: '.$deal_expiration[$c].'</b></center></div></div>';
and i assigned that to the array loop to look like this
<?php
$x = 0; $i = 0; $j = 0; $y = 0; $z = 0; $a = 0; $b = 0; $c = 0;
for($aa = 0; $aa < $count; $aa++) {
$content = '<div class="coupon"><div class="ribbon"><div class="ribbon-stitches-top"></div><strong class="ribbon-content"><h1>'.$deal[$y].'</h1></strong><div class="ribbon-stitches-bottom"></div></div><div class="picture_coupon"><img src="'.$deal_photo[$b].'" width="150" height="100" /></div><div class="deal"><center><h1>'.$deal[$y].'</h1>'.$deal_info[$a].'<b>Expires: '.$deal_expiration[$c].'</b></center></div></div>';
echo "['" . $business_name[$x] . "'," . $lat[$i] . "," . $lng[$j] . "," . "'$content'" . "],";
$x++; $i++; $j++; $id++; $y++; $z++; $a++; $b++; $c++;
}
?>
i know nothing of javascript when it comes to what it allows for the goog.... so coming to that conclusion hurt my brain more than i could even imagine...