I'm trying to load marker from database but those markers doesn't loaded. However if I try to load manually it's working.
my view view_file.php
var map;
function initialize(lt,lg) {
var mapDiv = document.getElementById('map-canvas');
map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(lt, lg),
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
<?php foreach ($position as $row) { ?>
$lat = $row['lat'];
$longi = $row['longi'];
var latLng = new google.maps.LatLng($lat,$longi);
new google.maps.Marker({
position: latLng,
map: map
})
<?php } ?>
}
</script>
</head>
<body onload="initialize(-0.165343, 113.930935)">
<div id="map-canvas" style="width: 100%; height: 600px"></div>
my controller map.php
public function __construct(){
parent::__construct();
$this->load->model('maps');
}
function index(){
$data['position'] = $this->maps->marker();
$this->load->view('include/header');
$this->load->view('view_file', $data);
$this->load->view('include/footer');
}
my model maps.php
function marker(){
$post = $this->db->get('koor');
return $post->result();
}
This code below is works (entered coordinate manually). controller are same like above.
var map;
function initialize(lt,lg) {
var mapDiv = document.getElementById('map-canvas');
map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(lt, lg),
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
marker(-0.735467, 110.521677);
marker(1.549480, 116.124705);
marker(-2.558367, 115.179880);
}
function marker(lt,lg){
var latLng = new google.maps.LatLng(lt,lg);
var marker = new google.maps.Marker({
position: latLng,
map: map
});
}
</script>
</head>
<body onload="initialize(-0.165343, 113.930935)">
<div id="map-canvas" style="width: 100%; height: 600px"></div>
I've tried to modified my code, searched similiar problem but nothing works, this is last shape of my code.
UPDATE
I've already solve this
var map;
function initialize() {
var mapDiv = document.getElementById('map-canvas');
map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(-0.165343, 113.930935),
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var lat, longi, marker;
<?php foreach ($position as $row) { ?>
lat = <?php echo $row->lat ?>,
longi = <?php echo $row->longi ?>,
marker = new google.maps.LatLng(lat,longi);
new google.maps.Marker({
position: marker,
map: map
});
<?php } ?>
}
Your error:
$lat = $row['lat'];
$longi = $row['longi'];
This is showing up in the javascript.
Make sure that it is going to be executed in php and not javascript.
The right code:
<?php
$lat = $row['lat'];
$longi = $row['longi'];
?>
var map;
function initialize(lt,lg) {
var mapDiv = document.getElementById('map-canvas');
map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(lt, lg),
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var lat, longi;
<?php foreach ($position as $row) { ?>
lat = <?= $row->lat ?>;
longi = <?= $row->longi ?>;
marker(lat, longi);
<?php } ?>
}
function marker(lt,lg){
var latLng = new google.maps.LatLng(lt,lg);
var marker = new google.maps.Marker({
position: latLng,
map: map
});
}
</script>
</head>
<body onload="initialize(-0.165343, 113.930935)">
<div id="map-canvas" style="width: 100%; height: 600px"></div>
Related
I have created a map to pin point the exact location for the customer's provided address. I am getting lat long for the address but it is not pointing out with a map marker on the map I do not know why it is not pointing out can anyone help me out pleasen here is my code
<?php
$addresse = $_POST['address'];
$prepAddr = str_replace(' ','+',$addresse);
$geocode = file_get_contents('https://maps.google.com/maps/api/geocode/json?address='.$prepAddr.'&sensor=false');
$output = json_decode($geocode);
$latitude = $output->results[0]->geometry->location->lat;
$longitude = $output->results[0]->geometry->location->lng;
?>
<div id="map" style="width:400px;height:400px;"></div>
<script>
function unick() {
var mapOptions = {
center: new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>),
zoom: 10,
mapTypeId: google.maps.MapTypeId.satellite
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
</script>
You have to add a marker to the map, like this:
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var latLng = new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>);
var marker = new google.maps.Marker({
position: latLng,
map: map,
title: 'You are here'
label: 'You are here'
});
Edit: added title and label properties. For more information, see the Google Maps API Reference
I am trying to display multiple markers on Google maps using data (lat and lng) from a MySQL database. When I run a foreach loop to return these markers on the map, it returns only the last row. What might be the problem?
<?php
require_once "db/db_handle.php";
$select = "SELECT * FROM map";
$data = $db->query($select);
?>
<!DOCTYPE html>
<html>
<head>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div id="map"></div>
<?php foreach ($data as $key) {
echo $key['lat'];
?>
<script>
function initMap() {
var uluru = {lat: <?php echo $key['lat']; ?>, lng: <?php echo $key['lng']; ?>};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
var contentString = '<?php echo $key['address']; ?>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: uluru,
map: map,
title: 'Uluru (Address)'
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
}
</script>
<?php } ?>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=myKey&callback=initMap">
</script>
</body>
</html>
It will be very easy to fetch all the lat and long.
require_once "db/db_handle.php";
$select = "SELECT * FROM map";
$data = $db->query($select);
foreach ($data as $key)
$locations[]=array( 'name'=>'Location Name', 'lat'=>$key['lat'], 'lng'=>$key['lng'] );
}
/* Convert data to json */
$markers = json_encode( $locations );
Then set the google map markers using the php variable markers.
<script type='text/javascript'>
<?php
echo "var markers=$markers;\n";
?>
function initMap() {
var latlng = new google.maps.LatLng(-33.92, 151.25); // default location
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
};
var map = new google.maps.Map(document.getElementById('map'),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 ) );
}
}
Overall code will be :
require_once "db/db_handle.php";
$select = "SELECT * FROM map";
$data = $db->query($select);
foreach ($data as $key)
$locations[]=array( 'name'=>'Location Name', 'lat'=>$key['lat'], 'lng'=>$key['lng'] );
}
/* Convert data to json */
$markers = json_encode( $locations );
?>
<!DOCTYPE html>
<html>
<head>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div id="map"></div>
<script type='text/javascript'>
<?php
echo "var markers=$markers;\n";
?>
function initMap() {
var latlng = new google.maps.LatLng(-33.92, 151.25); // default location
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
};
var map = new google.maps.Map(document.getElementById('map'),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>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=myKey&callback=initMap">
</script>
</body>
</html>
I am able to display my mp ok, but when I go to add markers it is no longer loading the map... i.e. when I add the latter php code to my initialize function it doesn't work! Any ideas??!
<script type="text/javascript">
var map = null;
function addMarker(lat, lng){
var point = new google.maps.LatLng(lat, lng);
var marker = new google.maps.Marker({
position: point,
map: map
});
}
function initialize() {
var mapOptions = {
center: {lat: 54.872128, lng: -6.284874},
zoom: 15
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
<?php
$query = mysqli_query("select * from tester") or die(mysqli_error());
while($row = mysqli_fetch_array($query)){
$lat = $row['lat'];
$lng = $row['lng'];
echo ("addMarker($lat, $lng);");
?>
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map-canvas" style="height:600px; width:600px;
margin-top:100px; margin-bottom: 100px;
">
</div>
You have an issue with the scope of map, in your initialize function you are redeclaring it inside that scope instead of populating the previous map var, remove the var from your function as follows:
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); //Note i've removed the "var" keyword from this line.
A little more explanation:
var map = null; -> declared in global scope.
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); -> declared inside initialize function scope.
var marker = new google.maps.Marker({
position: point,
map: map // -> NULL because it will look for map in the parent scope.
});
I've found the issue, you are missing the closing bracers of your while statement:
<?php
$query = mysqli_query("select * from tester") or die(mysqli_error());
while ($row = mysqli_fetch_array($query)) {
$lat = $row['lat'];
$lng = $row['lng'];
echo ("addMarker($lat, $lng);");
} //Missing!!!
?>
I am working on a tracking system.
I get gps lat long values from database and then show marker on map,
and refresh a page after 30 seconds to check may b values updated on server.
my code is given below.
may map show page.
<!DOCTYPE html />
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"> </script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script>
<title>GoogleMaps</title>
<script>
function initialize(lang,lat) {
var myLatlng = new google.maps.LatLng(lang,lat);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var contentString = 'Location NAme';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Location NAme'
});
}
function show_map(){
$.ajax({
type: "POST",
url: "some.php"
})
.done(function( msg ) {
alert(msg);
var obj = jQuery.parseJSON(msg);
initialize(obj.lang,obj.lat);
});
}
setInterval(show_map,30000);
</script>
</head>
<body onLoad="show_map()">
<div id="map_canvas" style="width: 100%; height: 100%;">
</body>
</html>
my PHP page is:
<?php
mysql_connect("localhost","root","")or die("error in connection");
mysql_select_db("gpsvalues");
$result = mysql_query("select * from gps");
$row = mysql_fetch_assoc($result);
$arr=array();
$arr = $row;
echo json_encode($arr);
?>
But it is not works fine.
For show multiple in a map you have to create array for lat long.
var locations;
locations=[
[lat1,long1],
[lat2,long2],
[lat3,long3],
[lat4,long4],
];
So your code should be change like
<script>
var locations;
locations=[
[lat1,long1],
[lat2,long2],
[lat3,long3],
[lat4,long4],
];
var map = new google.maps.Map(document.getElementById('maparea'), {
zoom: 14,
center: new google.maps.LatLng(6.778659644259302, 79.99540328979492),
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][0], locations[i][1]),
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>
You can call the add marker function through your php for every row in the gps..
<script>
<?php
mysql_connect("localhost","root","")or die("error in connection");
mysql_select_db("gpsvalues");
$result = mysql_query("select * from gps");
while($row = mysql_fetch_assoc($result))
{
echo "addmarker($row[lat], $row[lng]);"; //whatever way you have stored in your database
}
?>
function addmarker(lat, lng) {
var myLatlng = new google.maps.LatLng(lat,lng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Location NAme'
});
marker.setMap(map);
}
</script>
i have a problem with placing multiple marker in google map.here is my code.it display only one marker during page reloading and when page is complettly load then map is not display.
javascript code:
<head>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
function initialize(lat,lon)
{
var myCenter=new google.maps.LatLng(lat,lon);
var mapProp = {
center:myCenter,
zoom:9,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker=new google.maps.Marker({
position:myCenter,
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
php code:
<?php
require_once 'geocode.php';
$addarray=array(0=>'a, ahmedabad,india',1=>'b,ahmedabad,india');
foreach($addarray as $add)
{
// define the address and set sensor to false
$opt = array (
'address' => urlencode($add),
'sensor' => 'false'
);
// now simply call the function
$result = getLatLng($opt);
// if status was successful, then print the lat/lon ?
if ($result['status']) {
echo '<pre>';
?>
<script>
initialize(<?php echo $result['lat'];?>,<?php echo $result['lon'];?>);
</script>
<?php
echo '</pre>';
}
}
?>
here first i got lat and lon according to address then i called javascript function to place marker.but something is missing or create a problem.
thanks in advance.
Thanks #Tudor Ravoiu for your help. it is solved by changing few things.
i have created array in json format in php and pass it to javascript.
<?php
require_once 'geocode.php';
$addarray=array(0=>'a,ahmedabad,india',1=>'b,ahmedabad,india',2=>'c,ahmedabad,india');
$lat1=array();
foreach($addarray as $add)
{
// define the address and set sensor to false
$opt = array (
'address' => urlencode($add),
'sensor' => 'false'
);
// now simply call the function
$result = getLatLng($opt);
// if status was successful, then print the lat/lon ?
if ($result['status'])
{
array_push($lat1,array($result['address'],$result['lat'],$result['lon']));
}
}echo json_encode($lat1);
?>
javascript code:
<script type="text/javascript">
var locations = <?php echo json_encode($lat1);?>;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(23.0171240, 72.5330533),
mapTypeId: google.maps.MapTypeId.TERRAIN
});
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));
}
You have to set the array as a global var. Also notice that markers_array is an object that contain all the markers latitudes and longitudes and also other data if you want to initialize an infowindow also.
var markers;
var map;
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
for(i=0;i<markers_array.length;i++){
addMarker(markers_array[i].lat,markers_array[i].long);
}
function addMarker(lat,lng) {
var myLatlng = new google.maps.LatLng(lat,lng);
var marker = new google.maps.Marker({
map: map,
position: myLatlng,
name: zip
});
markers.push(marker);
}
LATER EDIT:
Here is an example of the marker array in json format:
[
{
"name":"Marker 1 Italy",
"lat":"46.027482",
"long":"11.114502"
},
{
"name":"Marker 2 France",
"lat":"48.019324",
"long":"3.555908"
},
{
"name":"Marker 3 Spain",
"lat":"40.329796",
"long":"-4.595948"
}
]