i have to try to fetch lat ,lng value from db and encode results in json like this
[{"name":"ahmedabad,GUJ","lat":"72.5226896","lng":"72.5226896"}]
but marker not displaying on map(location not display on map)
this is my code, what are the my mistake please guide me
<?php
include "db.php";
/* lat/lng data will be added to this array */
$locations=array();
$query = $db->query("SELECT * FROM ds_petroling_history");
while( $row = $query->fetch_assoc() ){
$nama_kabkot = $row['name'];
$longitude = $row['lng'];
$latitude = $row['lat'];
/* Each row is added as a new array */
$locations[]=array( 'name'=>$nama_kabkot, 'lat'=>$longitude, 'lng'=>$longitude );
}
/* Convert data to json */
$markers = json_encode($locations);
?>
<html>
<head>
</head>
<body>
<div><?php echo $markers ?></div>
<script type='text/javascript'>
<?php
echo "var markers=$markers;\n";
?>
function initMap() {
var latlng = new google.maps.LatLng(23.0117523,72.5226665);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
};
var map = new google.maps.Map(document.getElementById("peta"),myOptions);
var infowindow = new google.maps.InfoWindow(), marker, lat, lng;
var json=JSON.parse( markers );
for( var o in json ){
lat = json[ o ].lat;
lng=json[ o ].lng;
name=json[ o ].name;
marker = new google.maps.Marker({
position: new google.maps.LatLng(lat,lng),
name:name,
map: map
});
google.maps.event.addListener( marker, 'click', function(e){
infowindow.setContent( this.name );
infowindow.open( map, this );
}.bind( marker ) );
}
}
</script>
<div id="peta" style="width: 100%; height: 660px;">
</div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=yourkey&callback=initMap"
type="text/javascript"></script>
</body>
</html>
value fetched from db successfully and encode in json also but not find those coordinates location on map
you have just assigned the values for markers to a php var not to a javascript var
/* Convert data to json */
$markers = json_encode($locations);
echo "<script>
var markers[] = " . $markers .";
</script>";
?>
Related
i have tried almost everything but i am unable to correct my code.My code is not showing google map and markers on it. I have a sqlite3 db canberra.db from where i am getting the data.
canberra.db:
CREATE TABLE `markers` (
`city_id` INTEGER,
`name` TEXT,
`latitude` TEXT,
`longitude` TEXT,
`type` TEXT
)
Any help would be highly appreciated thanks in advance.
test.php:
<!DOCTYPE html>
<html>
<head>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div id="map"></div>
<?php
class MyDB extends SQLite3
{
function __construct()
{
$this->open('canberra.db');
}
}
$db = new MyDB();
if(!$db){
echo $db->lastErrorMsg();
} else {
echo "Opened database successfully\n";
}
$sql=<<<EOF
SELECT * from markers;
EOF;
$result = $db->query($sql);
$json = array();
while($row = $result->fetchArray(SQLITE3_ASSOC) ){
echo $json[]['lat'] = $row['latitude'];
echo $json[]['lon'] = $row['longitude'];
echo $json[]['name'] = $row['name'];
echo $json[]['type'] = $row['type'];
}
$db->close();
echo "Operation done successfully\n";
?>
<script type="text/javascript">
function initMap() {
var locationsJSON = '<?php echo json_encode($json) ?>';
var locations = JSON.parse(locationsJSON);
var bounds = new google.maps.LatLngBounds();
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 2,
center: new google.maps.LatLng(0, 0),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker, i;
for (i = 0; i < locations.length; i++) {
console.log(locations[i]);
var myLatLng = new google.maps.LatLng(locations[i].lat, locations[i].lon);
bounds.extend(myLatLng);
map.fitBounds(bounds);
marker = new google.maps.Marker({
position: myLatLng,
map: map
});
}
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDooxT39owZBkpRXCGKPbRuQd5fSkr0Xvk&callback=initMap">
</script>
Try var_dumping your $json array and you'll see what's wrong.
You can replace your while loop content with:
$json[] = array(
'lat' => $row['latitude'],
'lon' => $row['longitude'],
'name' => $row['name']
);
I have change this function and my code works :)
function initMap() {
debugger;
var locationsJSON = <?php echo json_encode($json, JSON_PRETTY_PRINT) ?>;
var locations = locationsJSON;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 2,
center: new google.maps.LatLng(0, 0),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker, i;
for (i = 0; i < locations.length; i++) {
console.log(locations[i]);
var myLatLng = new google.maps.LatLng(locations[i].lat, locations[i].lon);
marker = new google.maps.Marker({
position: myLatLng,
map: map
});
}
}
And one thing i also post php script at the top.
<?php
class MyDB extends SQLite3
?>
<!DOCTYPE html>
<html>
</html>
i hope this will help others.
You create your array with
echo $json[]['lat'] = $row['latitude'];
echo $json[]['lon'] = $row['longitude'];
echo $json[]['name'] = $row['name'];
But then you're referring to the coordinates with:
var myLatLng = new google.maps.LatLng(locations[i][1], locations[i][2]);
Change that to:
var myLatLng = new google.maps.LatLng(locations[i].lat, locations[i].lon);
I am beginner to web and making a webpage with google map and a marker in it. Admin can moniter the position of mobile that sends its coordinates (longitude, latitude) to server after some time interval, these coordinates are stored in database with a particular id.
The position of marker should change when coodinates changes, I am unable to understand how it will be done.
I have made php file to fetch the coordinates but cant understand how to proceed further.
This is the webpage that i have made so far:
<!DOCTYPE html>
<html>
<head>
<style>
#map { width: 1000px;height: 500px;}
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
var latlng = {lat: 31.54972, lng: 74.34361};
function initialize()
{
var mapCanvas = document.getElementById('map');
var mapOptions =
{
center: latlng,
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new google.maps.Marker({
position: latlng,
title: "Hello World!"
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
and here is the php file to fetch coordinates from database:
<?php
define('HOST','localhost');
define('USER','root');
define('PASS','');
define('DB','coordinates');
$con = mysqli_connect(HOST,USER,PASS,DB);
$id = $_GET['id'];
$query = "SELECT longitude,latitude FROM data";
$qry_result = mysqli_query($con,$query) or die(mysqli_error());
// Insert a new row in the table for each person returned
while($row = mysqli_fetch_array($qry_result)) {
$longitude = $row['longitude'];
$latitide = $row['latitude'];
}
?>
Okay, I'll first show you the result with test data, so you see how the map hehaves.
I add jQuery, to do the Ajax call. Ajax lets the webbrowser surf to any page on your site, without leaving the page. The user doesn't notice anything going on
10 points on a line through Lahore. Cookies store the index (0 to 9).
testdata.php
<?php
// this test loops a trajectory through Lahore, in 10 steps.
// every 10 steps it goes back to the start
// it's just test data, to show the map is working
// $start = 31.468885630398272,74.24052429199217
// $end = 31.572736162286912,74.43412613868712
$i = (isset($_COOKIE['i']) ? $_COOKIE['i'] + 1 : 0) % 10;
setcookie('i', $i);
echo json_encode(array(
'lat'=>31.468885630398272 + (31.572736162286912 - 31.468885630398272) * $i / 10,
'lng'=>74.24052429199217 + (74.43412613868712 - 74.24052429199217) * $i / 10
));
exit;
?>
index.php
<!DOCTYPE html>
<html>
<head>
<style>
#map { width: 1000px;height: 500px;}
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
var latlng = {lat: 31.54972, lng: 74.34361};
function initialize() {
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: latlng,
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new google.maps.Marker({
position: latlng,
title: "Hello World!",
map: map // replaces marker.setMap(map);
});
// now let's set a time interval, let's say every 3 seconds we check the position
setInterval(
function() {
// we make an AJAX call
$.ajax({
dataType: 'JSON', // this means the result (the echo) of the server will be readable as a javascript object
url: 'testdata.php',
success: function(data) {
// this is the return of the AJAX call. We can use data as a javascript object
// now we change the position of the marker
marker.setPosition({lat: Number(data.lat), lng: Number(data.lng)});
}
})
}
, 3000 // 3 seconds
);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
So now your real php file.
call it (for example) ajax.php. Change 'testdata.php' to 'ajax.php' on line 31 of index.php
I think it should be this, though I didn't test it with a database. Check it yourself
I assume you have an AUTOINCREMENT id, but this could also be done with a timestamp, or so
ajax.php
<?php
define('HOST','localhost');
define('USER','root');
define('PASS','');
define('DB','coordinates');
$con = mysqli_connect(HOST,USER,PASS,DB);
$id = $_GET['id'];
$query = "SELECT id, longitude, latitude FROM data ORDER BY id DESC LIMIT 1";
$qry_result = mysqli_query($con,$query) or die(mysqli_error());
// Insert a new row in the table for each person returned
if($row = mysqli_fetch_array($qry_result)) { // whenever you only need 1 record, use "if" instead of "while"
$longitude = $row['longitude'];
$latitude = $row['latitude'];
// echo the object
echo json_encode(array(
'lat'=>$latitude,
'lng'=>$longitude
));
}
exit;
?>
I want to add multiple locations on google map. I have saved the longtitude and latitude in the database. Then I retrieve it from PHP and append the the data to a Javascript function. When I hardcode the locations in Javascript, it works fine. But when I load the data with PHP it's not working. But when I check it with Firebug, it shows that the PHP values have come to the relevant places. The issue is that nothing is loading. The following is the code I up with.
<script type="text/javascript">
function initialize() {
<?php
$con=mysqli_connect("HOST","DBUSERNAME","DBPASSWORD","TABLE");
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$result = mysqli_query($con,"SELECT * FROM locations");
?>
var count=0;
var my = new google.maps.LatLng(7.860661,80.674896);
var mapOptions = {
zoom: 8,
center: my
}
<?php while($row = mysqli_fetch_array($result))
{
?>
var myLatlng;
var finallatlang=myLatlng.concat(count.toString());
finallatlang = new google.maps.LatLng(<?php echo $row['latitude'];?>,<?php echo $row['longtitude'];?>);
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: finallatlang,
map: map,
title: '<?php echo $row['location_name'];?>'
});
count++;
<?php } ?>
mysqli_close($con);
?>
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Updated my code
function initialize() {
$result = mysqli_query($con,"SELECT * FROM locations");
?>
//var count=0;
<?php $count=0;?>
var my = new google.maps.LatLng(7.860661,80.674896);
var mapOptions = {
zoom: 8,
center: my
}
<?php while($row = mysqli_fetch_array($result))
{
?><?php echo $count++;?>
//var myLatlng;
<?php $mylatlang="mylatlang";?>
//var finallatlang=myLatlng.concat(count.toString());
//var count=parseInt(<?php //echo $count;?>);
//var finallatlang=myLatlng+count.toString();
finallatlang = new google.maps.LatLng(parseFloat(<?php echo $row['latitude'];?>),parseFloat(<?php echo $row['longtitude'];?>));
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var latlang='<?php echo $mylatlang+$count?>';
//var latlang=Math.random();
var marker = new google.maps.Marker({
position: latlang,
map: map,
title: '<?php echo $row['location_name'];?>'
});
//count++;
}
google.maps.event.addDomListener(window, 'load', initialize);
This is the final answer which i was come up with.Special thanks to Rorschach.
<div id="map" style="width: 1000px; height: 900px;"></div>
<script type="text/javascript">
<?php
$con=mysqli_connect("HOST","HOSTUSERNAME","HOSTPASSWORD","DATABASE");
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$result = mysqli_query($con,"SELECT * FROM locations");
?>
var locations = [<?php while($row = mysqli_fetch_array($result))
{?>
['<?php echo $row['location_name'];?>', <?php echo $row['latitude'];?>, <?php echo $row['longtitude'];?>],
<?php }?>
];
var latlng = new google.maps.LatLng(6.934947,79.862308);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"),
myOptions);
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));
}
Your problem is here (info in your 'answer', not yet in your question):
new google.maps.LatLng('6.936992','79.860935')
The LatLng constructor expects two floating point numbers, not two strings. If it were
new google.maps.LatLng(6.936992,79.860935)
you'd be fine. Use parseFloat to convert these values to floats:
finallatlang = new google.maps.LatLng(
parseFloat(<?php echo $row['latitude'];?>),
parseFloat(<?php echo $row['longtitude'];?>)
);
Your db connection(php code):
<?php $con=mysql_connect("host","dbuser","dbpassword");
mysql_select_db("dbname",$con);
$result = mysql_query("SELECT * FROM locations");
?>
Google map multiple markers (Javascript code) :
<div id="map" style="width: 500px; height: 400px;"></div>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var locations = [
<?php while($row = mysql_fetch_array($result)) { ?>
['marker 1',<?php echo $row["lat"] ?>,<?php echo $row["longs"] ?>, 4],
<?php } ?>
];
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"),
myOptions);
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>
I have a Problem i am a beginner in Google Maps and not really good in Java Script but in PHP. Is there a possibel Solution for an "Auto-Zoom" Function. I have different Markers on my Map an i want to Zoom automaticcaly to the level that every Marker is Visibel ?
Is there any Solution Please Help me !
Ok This is my Script:
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCxuRdCmN2BO5PD7kwI0mO8JflcUOF4CtI&sensor=true">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(50.903033, 10.496063),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var markerBounds = new google.maps.LatLngBounds();
var contentString;
<? php
$i = 1;
foreach($FertigID as $ID) {
$result = mysql_query("SELECT * FROM Daten_CH WHERE ID = ".$ID."");
while ($Ergebnisse = mysql_fetch_array($result)) { // Werden alle ergebnisse (ID´s) in einen Array geschriebenn
if (isset($Ergebnisse["GIS_y"]) && $Ergebnisse["GIS_y"] != "" && $Ergebnisse["GIS_y"] != " ") { ?> contentString = '<input type="button" value="BEARBEITEN"></button>';
var Position = new google.maps.LatLng( <? php echo $Ergebnisse["GIS_y"]; ?> , <? php echo $Ergebnisse["GIS_x"]; ?> );
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker <? php echo $i; ?> = new google.maps.Marker({
position: Position,
map: map,
title: '<?php echo $Ergebnisse["AA_Objektname"]; ?>'
});
google.maps.event.addListener(marker <? php echo $i; ?> , 'click', function() {
infowindow.open(map, marker <? php echo $i; ?> );
});
<? php
}
}
$i++;
} ?>
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
What you want to do, is create a LatLngBounds object, use its extend method to extend the bounds with your markers (using LatLng objects), then use the fitBounds (or panToBounds if you want animation) of the Map object and the map will auto zoom to a position where it will show all your markers.
Here's some basic pseudocode:
// You create your map. You have to do this anyway :)
// The Map object has a lot of options, you specify them according to your needs.
var map = new google.maps.Map(document.getElementById('map'), {
'param1': 'value1',
'param2': 'value2'
});
// Create a new LatLngBounds object
var markerBounds = new google.maps.LatLngBounds();
// Add your points to the LatLngBounds object.
foreach(marker in markers) {
var point = new google.maps.LatLng(marker.lat, marker.lng);
markerBounds.extend(point);
}
// Then you just call the fitBounds method and the Maps widget does all rest.
map.fitBounds(markerBounds);
Here's your code:
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCxuRdCmN2BO5PD7kwI0mO8JflcUOF4CtI&sensor=true">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(50.903033, 10.496063),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var markerBounds = new google.maps.LatLngBounds();
var contentString;
<? php
$i = 1;
foreach($FertigID as $ID) {
$result = mysql_query("SELECT * FROM Daten_CH WHERE ID = ".$ID."");
while ($Ergebnisse = mysql_fetch_array($result)) { // Werden alle ergebnisse (ID´s) in einen Array geschriebenn
if (isset($Ergebnisse["GIS_y"]) && $Ergebnisse["GIS_y"] != "" && $Ergebnisse["GIS_y"] != " ") { ?> contentString = '<input type="button" value="BEARBEITEN"></button>';
var Position = new google.maps.LatLng( <? php echo $Ergebnisse["GIS_y"]; ?> , <? php echo $Ergebnisse["GIS_x"]; ?> );
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker <? php echo $i; ?> = new google.maps.Marker({
position: Position,
map: map,
title: '<?php echo $Ergebnisse["AA_Objektname"]; ?>'
});
markerBounds.extend(Position); // you call this method for each Position (LatLng object)
google.maps.event.addListener(marker <? php echo $i; ?> , 'click', function() {
infowindow.open(map, marker <? php echo $i; ?> );
});
<? php
}
}
$i++;
} ?>
map.fitBounds(markerBounds); // Then you call this method here.
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
I have been working with a wordpress theme that has the support to just add coordinates in a menu and directly display the map on the contact page. Now I have a new business address that needs to be added to the contact map but the theme doesn't support that.
Giving the fact that my experience in php and js is limited I couldn't find a solution for my problem.
My code for the contact page is bellow and all I need is to add a new map with different coords before the contact form.
<div id="content">
<?php
if ( have_posts() ) :
while ( have_posts() ) :
the_post();
$show_map = get_option('theme_gmap_show');
if($show_map == 'true')
{
$map_lati = get_option('theme_gmap_lati');
$map_longi = get_option('theme_gmap_longi');
$map_zoom = get_option('theme_gmap_zoom');
?>
<div class="map-container clearfix">
<div id="map_canvas"></div>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize()
{
var geocoder = new google.maps.Geocoder();
var map;
var latlng = new google.maps.LatLng(<?php echo $map_lati; ?>, <?php echo $map_longi; ?>);
var infowindow = new google.maps.InfoWindow();
var myOptions = {
zoom: <?php echo $map_zoom; ?>,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
geocoder.geocode( { 'location': latlng },
function(results, status) {
if (status == google.maps.GeocoderStatus.OK)
{
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
}
else
{
alert("Geocode was not successful for the following reason: " + status);
}
});
}
initialize();
</script>
</div>
<?php
}
the_content();
$postal_address = stripslashes(get_option('theme_postal_address'));
if(!empty($postal_address))
{
?>
<h3 class="smart-head">Adresa de contact</h3>
<p><address>
<?php echo $postal_address; ?>
</address></p>
<?php
}
?>
<div class="contact-orar">
<h3 class="smart-head">Program de Lucru</h3>
<p><strong>Luni - Vineri:</strong> 8:00 - 17:00<br />
<strong>Sambata:</strong> 8:00 - 14:00<br />
<strong>Duminica:</strong> inchis</p>
</div>
<div class="contact-form-container">
Thank in advance for any help!
You have to add a random key to the end of the call to your query. This is an example using KML layers, but it is the same concept.
$( function() {
$(".map_canvas").each( function() {
var theElement = $(this).attr('id');
var lat = $(this).attr('lat');
var lon = $(this).attr('lon');
var kml = $(this).attr('kml');
var mapCenter = new google.maps.LatLng(lat,lon);
var mapOptions = {
zoom: 14,
center: mapCenter,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById(theElement), mapOptions);
var geopoints = new google.maps.KmlLayer('http://blah.com/temps/kmls/' + kml + '.kml?run=' + (new Date()).getTime() ); //?nocache=0
geopoints.setMap(map);
});
})
Even without any PHP knowledge you should be able to manage adding a map, the code uses the Google Maps API v3. You can easiliy add another map using JavaScript. First of all add another div with ID map_canvas_2 next you should use the following Javascript code:
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(/*latitude here*/,/*longitude here*/)
};
map = new google.maps.Map(document.getElementById('map_canvas_2'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
This will display a map centered on the coordinates you specify in the map_canvas_2 div. You can find more information here: https://google-developers.appspot.com/maps/documentation/javascript/reference
JsFiddle here: http://jsfiddle.net/Chycx/2/