How To Insert Google Maps Through A While Loop?
I want to insert a google map in a div(html) which generates through a while loop. Google map gets coordinates from the database. It should appear as in this image Since I need to
Solution 1:
ID of each div should be unique. Try this
<?php$connection = mysqli_connect('localhost', 'root', '', 'users');
functioncurrentUsers($connection){
$sql = "SELECT * FROM user ";
$result = mysqli_query($connection, $sql);
$x= 0;
if(mysqli_num_rows($result) > 0){
while($row = mysqli_fetch_assoc($result)) {
$userID = $row['id'];
$firstName = $row['firstname'];
$country = $row['country'];
$latitude = $row['latitude'];
$longitude = $row['longitude'];
echo'<div>
<div align = "left">
<h3>'. $userID. " ". $firstName. " ". $country. '</h3>
</div>
<div id = "map_'.$x.'" align = "right">
<script> <!--Google map api-->
function initMap() {
var x = '. $latitude. ';
var y = '. $longitude. ';
var myLatLng = {lat: x, lng: y};
var map = new google.maps.Map(document.getElementById("map_'.$x.'"), {
center: myLatLng,
scrollwheel: true,
zoom: 4
});
var marker = new google.maps.Marker({
map: map,
position: myLatLng,
title: \'Hello World!\'
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
</div>
</div>';
$x++;
}
}else{
echo"Currently there are no users!";
}
mysqli_close($connection);
}
currentUsers($connection);
?><html><head><title></title><style>#map {width: 500px; height: 400px; } </style><!--Size of the map--></head><body></body></html>Solution 2:
- You can only reliably include the API once. Currently you are including the API for each map you add.
- You can also only have one function with the name
initMap, currently you are including multiple versions of that function. - You can only have one div with id="map", currently you have one for each location.
related question (javascript only, no PHP): Adding multiple map canvases to window - Google Maps Javascript API v3
Solution 3:
This is 100% working for me i've tested this code
<?php$arr='';
$connection = mysqli_connect('localhost', 'root', '', 'users');
functioncurrentUsers($connection){
$sql = "SELECT * FROM user";
$result = mysqli_query($connection, $sql);
$x= 0;
if(mysqli_num_rows($result) > 0){
while($row = mysqli_fetch_assoc($result)) {
$userID = $row['id'];
$firstName = $row['firstname'];
$country = $row['country'];
$arr[] = array($row['latitude'],$row['longitude'],$x);
echo'<div style="width:100%;">
<div style="width:250px; height: 150px; float :left;">
<h3>'. $userID. ". ". $firstName. " ". $country. '</h3>
</div>
<div id = "map_'.$x.'" style="width:250px;height: 150px;"> </div>
</div>';
$x++;
}
echo'<script> var mymaps ='.json_encode($arr).'</script>';
}else{
echo"Currently there are no users!";
}
mysqli_close($connection);
}
currentUsers($connection);
?><scripttype="text/javascript"src="http://maps.google.com/maps/api/js"></script><script>var maps = [];
functioninitialize(id, myLatLng) {
geocoder = new google.maps.Geocoder();
var mapOptions = {
zoom: 9,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
maps[id] = new google.maps.Map(document.getElementById('map_'+id),
mapOptions);
var marker = new google.maps.Marker({
map: maps[id],
position: myLatLng,
title: 'Hello World!'
});
}
$(document).ready(function(){
for( var i = 0; i < mymaps.length; i++)
{
var x = parseFloat(mymaps[i][0]);
var y = parseFloat(mymaps[i][1]);
var myLatLng = {lat: x, lng: y};
google.maps.event.addDomListener(window, 'load', initialize(mymaps[i][2],myLatLng)); // two calls
}
});
</script>
Post a Comment for "How To Insert Google Maps Through A While Loop?"