How to pass php array to Google JavaScript Map API make label?
Question
Here is the code, I do get the longitude and latitude from the database, but now cannot writer to Google Javascript Maps API to make red circle on the map. I think there is some problems on Js object.
<?php
error_reporting(0);
$db = new mysqli("localhost", "root", "", "app");
if ($db->connect_errno) {
die("<center>Sorry, please check your network connection!</center>");
}
$longiArray = array();
$latitArray = array();
$num = 0;
$longitude = $db->query("SELECT * FROM water");
$longitude->num_rows;
while ($row = $longitude->fetch_object()) {
$longiArray[$num] = $row->longi;
$latitArray[$num] = $row->latit;
$num++;
}
?>
<!DOCTYPE html>
<html>
<head>
<meta content="initial-scale=1.0, user-scalable=no" name="viewport">
<meta charset="utf-8">
<title>
Circles
</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</meta>
</meta>
</head>
<body>
<div id="map">
</div>
<script>
var city = new Array();
var counter = <?php echo"$num";?>;
for (var x = 0; var x < counter; var x++){
var citymap = {
city[x] = {
center: {lat: <?php echo"$latitArray[x]";?>,
lng: <?php echo"$longiArray[x]";?>},
population: 10
},
}
};
function initMap() {
// Create the map.
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: {lat: -28.73226, lng: 24.76232},
mapTypeId: google.maps.MapTypeId.TERRAIN
});
for (var city in citymap) {
var cityCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: citymap[city].center,
radius: Math.sqrt(citymap[city].population) * 100
});
}
}
</script>
<script async="" defer="" src="https://maps.googleapis.com/maps/api/js?key=Google API Key here &signed_in=true&callback=initMap">
</script>
</body>
</html>
2 answers
solution1
0 2016-10-09 20:55:36
error is from cityArray in javascript. correct like bellow:
<?php
echo "var city = new Array();";
echo "var counter = $num";
for($x=0 ; $x<$num ; $x++){
echo "var citymap = {".
"city[x] = {".
"center: {lat: $latitArray[$x] ,".
"lng: $longiArray[$x] }, ".
"population: 10".
"},".
"}";
}
?>
solution2
0 ACCPTED 2016-10-09 21:14:57
A couple of corrections:
- Meta tags are self-closing, so they don't need a
</meta>. Refer to MDN for more information. Get a key for your google maps - refer to the Google Maps documentation for this
So this:
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" type="text/javascript"></script>
should become something like:
<script async defer src="https://maps.googleapis.com/maps/api/js?key=asdf23f2...23f&callback=initMap" type="text/javascript"></script>- Generate the citymap javascript variable using PHP and json_encode see example below. Does each database record have a
namecolumn? We need to have a label for each city (eg 'chicago', 'vancouver' etc), in order to have a key for each city:
$longitude = $db->query("SELECT * FROM water");
//$longitude->num_rows;//what is the point of this line?
$cityMap = array();
while ($row = $longitude->fetch_object()) {
//presuming we have a name column - otherwise assign from another source (e.g. array of cities)
$cityMap[$row->name] = array(
'center' => array(
'lng' => $row->longi,
'lat' => $row->latit
),
'population' => 10
);
?>
<!-- in the html body .... -->
<script>
var citymap = <? echo json_encode($cityMap); ?>;
function initMap() {
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.