I have this map with Google maps API v3:
<?php
include('db_login.php');
$connection = mysql_connect($db_host, $db_username, $db_password);
if (!$connection){
die ("Eror connecting database: <br/>". mysql_error());
}
$db_select = mysql_select_db($db_database);
if (!$db_select){
die ("Database Error: <br/>". mysql_error());
}
$query = mysql_query("SELECT * FROM routes");
?>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false&language=es">
</script>
<script type="text/javascript">
window.onload = function () {
var options = {
zoom: 5,
center: new google.maps.LatLng(40.84706, -2.944336),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'), options);
<?php
for($i = 0; $i < mysql_num_rows($query); $i++){
$icao = mysql_result($query, $i, 'from');
$query2 = mysql_query("SELECT * FROM airports WHERE icao='$icao'");
$latitude = mysql_result($query2, 0, 'latitude');
$longitude = mysql_result($query2, 0, 'longitude');
$city = mysql_result($query2, 0, 'city');
?>
var Airport1 = '<h3 align="center" style="font-family:Arial, Helvetica, sans-serif"><?php echo $icao; ?> - <?php echo $city; ?></h3>';
var image = 'http://i46.tinypic.com/33zbm09.png';
var latLonCenter = new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>);
marker<?php echo $icao; ?> = new google.maps.Marker({
position: latLonCenter,
map: map,
draggable: false,
icon: image,
title: '<?php echo $icao; ?> - <?php echo $city; ?>',
Airport1: Airport1
});
var infowindow<?php echo $icao; ?> = new google.maps.InfoWindow({
content: Airport1
});
<?php
$query4 = mysql_query("SELECT * FROM routes WHERE `from`='$icao'");
for($y = 0; $y < mysql_num_rows($query4); $y++){
$destination = mysql_result($query4, $y, 'to');
$query5 = mysql_query("SELECT * FROM airports WHERE icao='$destination'");
$latitude_destination = mysql_result($query5, 0, 'latitude');
$longitude_destination = mysql_result($query5, 0, 'longitude');
?>
var PolyLine<?php echo $destination;?> = new google.maps.Polyline({
strokeColor: "#FF0000",
strokeOpacity: 2.0,
strokeWeight: 2
});
var polyCords<?php echo $destination;?> = [
new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>),
new google.maps.LatLng(<?php echo $latitude_destination; ?>, <?php echo $longitude_destination; ?>)
];
google.maps.event.addListener(marker<?php echo $icao; ?>, 'click', function() {
<?php for($z = 0; $z < mysql_num_rows($query); $z++){
$destination_delete = mysql_result($query, $z, 'to');?>
PolyLine<?php echo $destination_delete;?>.setMap(null);
<?php } ?>
PolyLine<?php echo $destination;?>.setPath(polyCords<?php echo $destination;?>);
PolyLine<?php echo $destination;?>.setMap(map);
});
google.maps.event.addListener(marker<?php echo $icao; ?>, 'click', function () {
var n = 1;
var infowindow<?php echo $icao; ?> = new google.maps.InfoWindow({
content: "",
maxWidth: 320,
zIndex: n
});
infowindow<?php echo $icao; ?>.setContent(this.Airport1);
infowindow<?php echo $icao; ?>.setZIndex(n++);
infowindow<?php echo $icao; ?>.open(map, marker<?php echo $icao; ?>);
});
<?php } } ?>
}
</script>
</head>
<body>
<center><div id="map_canvas" style="width:850px; height:560px;"></div></center>
</body>
It creates a lot markers and when you click on a maker a infowindow appers. How can I do that when a infowindow open if there is another open close it.
I need help. I tryed with this, to the final of the script:
<?php for($j = 0; $j < mysql_num_rows($query); $j++){
$icao_delete = mysql_result($query, $z, 'from');?>
google.maps.event.addListener(map, "click", function(){
infowindow<?php echo $icao_delete;?>.close();
});
<?php }?>
But It doesn´t work.
You have to store information about infowindow that was opened the last time (your solution didn't work because of the variable scope in JS):
var lastOpen = null;
google.maps.event.addListener(marker<?php echo $icao; ?>, 'click', function () {
if (lastOpen!=null)
lastOpen.close();
var n = 1;
var infowindow<?php echo $icao; ?> = new google.maps.InfoWindow({
content: "",
maxWidth: 320,
zIndex: n
});
infowindow<?php echo $icao; ?>.setContent(this.Airport1);
infowindow<?php echo $icao; ?>.setZIndex(n++);
infowindow<?php echo $icao; ?>.open(map, marker<?php echo $icao; ?>);
lastOpen = infowindow<?php echo $icao; ?>;
});
btw. I don't think that generating javascript every time is a proper approach
Related
hello I made a code to open a webpage that contain the map with coordinates placed in a database I want to auto update the map with new markers of the new coordinates from that database
here is the code in php please help me
<?php
// read data
$account =mysql_connect("localhost","username","password")
or die(mysql_error());
mysql_select_db("first",$account);
$sql ="SELECT * FROM test";
$result=mysql_query($sql,$account);
while($row=mysql_fetch_array($result)){
$Lo=$row['one'];
$Lat=$row['two'];
}
echo $Lo.'and '.$Lat.'<br>';
?>
<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js">
</script>
<script>
var myCenter=new google.maps.LatLng('<?php echo $Lo; ?>','<?php echo $Lat; ?>');
function initialize()
{
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>
So I finally did it :D . With help form various different sources and all! here us the complete code :
<?php
error_reporting(E_ALL ^ E_DEPRECATED);
$conn = mysql_connect("localhost", "root", "") or die(mysql_error());
mysql_select_db("vsms3") or die(mysql_error());
?>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps</title>
<!-------- Customizable Css for Map ----------------------------->
<style type="text/css">
body { font: normal 10pt Helvetica, Arial; }
#map { width: 500px; height: 300px; border: 0px; padding: 0px; }
</style>
<!---------------- Java Scripts for Map ----------------->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AIzaSyDzaa4MZ7r4s26i54PwErpKTynKAaWVxTc&v=3&language=en"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
<!------------- Java Scripts for Map ------------------->
<script type="text/javascript">
var marker;
var map = null;
var markersArray = [];
//--------------------- Sample code written by vIr ------------
var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/blue.png",
new google.maps.Size(32, 32), new google.maps.Point(0, 0),
new google.maps.Point(16, 32));
var center = null;
var currentPopup;
var bounds = new google.maps.LatLngBounds();
function addMarker(lat, lng, info) {
var pt = new google.maps.LatLng(lat, lng);
bounds.extend(pt);
marker = new google.maps.Marker({
position: pt,
draggable: true,
raiseOnDrag: true,
icon: icon,
map: map
});
markersArray.push(marker);
var popup = new google.maps.InfoWindow({
content: info,
maxWidth: 300
});
google.maps.event.addListener(marker, "click", function() {
if (currentPopup != null) {
currentPopup.close();
currentPopup = null;
}
popup.open(map, marker);
currentPopup = popup;
});
google.maps.event.addListener(popup, "closeclick", function() {
map.panTo(center);
currentPopup = null;
});
}
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(0, 0),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
},
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.ZOOM_PAN
}
});
setInterval(function mapload(){
$.ajax({
type: "POST",
url: 'location.php',
// data: form_data,
success: function(data)
{
// var json_obj = $.parseJSON(data);//parse JSON
var json_obj = jQuery.parseJSON(JSON.stringify(data));
for (var i in json_obj)
{ addMarker(json_obj[i].u_lat, json_obj[i].u_lon,"Longitude:" + json_obj[i].u_lon + "<br>" + json_obj[i].u_email + "<br>" + json_obj[i].u_name);
}
},
dataType: "json"//set to JSON
})
},3000);
center = bounds.getCenter();
map.fitBounds(bounds);
}
setInterval(function removeMarker() {
if (markersArray) {
for (i=0; i < markersArray.length; i++) {
markersArray[i].setMap(null);
marker=null;
}
markersArray.length = 0;
}
},3000);
</script>
</head>
<body onLoad="initMap()" style="margin:0px; border:0px; padding:0px;">
<div id="map"></div>
</body>
</html>
and the database related page :
<?php
$conn = mysql_connect("localhost", "root", "") or die(mysql_error());
mysql_select_db("vsms3") or die(mysql_error());
$data = array();
$result = mysql_query("SELECT * FROM users")or die(mysql_error());
while ($row = mysql_fetch_assoc($result)) {
$data[] = $row;
}
echo json_encode($data);
//echo("addMarker($lat, $lon, '<b>$name</b><br />$desc');\n");
?>
Hi i have problems to display more than one Google maps on one page
The first map shows correctly but the second doesnt show
I use Smarty to display templates. The results comes from a db. Can anybody check the code and help me to display more than one map
{foreach item=row from=$adress}
<tr>
<td>
<script type="text/javascript">
function initialize() {
var position = new google.maps.LatLng({$row->lat}, {$row->longi});
var myOptions = {
zoom: 12,
center: position,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(
document.getElementById("map_canvas{$row->site_id}"),
myOptions);
var marker = new google.maps.Marker({
position: position,
map: map,
title:"This is the place."
});
var contentString = 'Hello <strong>World</strong>!';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
</script>
<div id="map_canvas{$row->site_id}" style="width:300px;height:200px;"></div>
Here is your html code:-
</head>
<body onload="initialize()">
<H1 align="center">Two Google maps side-by-side</h1>
<div id="map_canvas1" style="top: 10px; left: 25px; width:210px; height:220px; float: left"></div>
<div id="map_canvas2" style="top: 10px; left: 75px; width:210px; height:220px"></div>
</body>
</html>
<script>
function initialize()
{
<?php
for($i=1; $i<=2; $i++){
?>
var latlng<?php echo $i ?> = new google.maps.LatLng(18.520266,73.856406);
var myOptions =
{
zoom: 15,
center: latlng<?php echo $i; ?>,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map<?php echo $i; ?> = new google.maps.Map(document.getElementById("map_canvas<?php echo $i ?>"), myOptions);
var myMarker<?php echo $i; ?> = new google.maps.Marker(
{
position: latlng<?php echo $i; ?>,
map: map<?php echo $i; ?>,
title:"Pune"
});
<?php } ?>
}
</script>
I know you are using different programming language to define your code. But the logic i hope you understood.
I have this google map:
<?php
//Conexion db
$query = mysql_query("SELECT * FROM routes");
?>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false&language=es">
</script>
<script type="text/javascript">
window.onload = function () {
var options = {
zoom: 5,
center: new google.maps.LatLng(40.84706, -2.944336),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'), options);
<?php
for($i = 0; $i < mysql_num_rows($query); $i++){
$icao = mysql_result($query, $i, 'from');
$query = mysql_query("SELECT * FROM airports WHERE icao='$icao'");
$latitude = mysql_result($query, 0, 'latitude');
$longitude = mysql_result($query, 0, 'longitude');
$city = mysql_result($query, 0, 'city');
?>
var Airport1 = '<h3 align="center" style="font-family:Arial, Helvetica, sans-serif"><?php echo $icao; ?> - <?php echo $city; ?></h3>';
var image = 'http://i46.tinypic.com/33zbm09.png';
var latLonCenter = new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>);
marker = new google.maps.Marker({
position: latLonCenter,
map: map,
draggable: false,
icon: image,
title: '<?php echo $icao; ?> - <?php echo $city; ?>',
Airport1: Airport1
});
var infowindow = new google.maps.InfoWindow({
content: Airport1
});
google.maps.event.addListener(marker, 'click', function () {
var n = 1;
var infowindow = new google.maps.InfoWindow({
content: "",
maxWidth: 320,
zIndex: n
});
infowindow.setContent(this.Airport1);
infowindow.setZIndex(n++); // superpone el último infowindows
infowindow.open(map, this);
});
<?php
$query = mysql_query("SELECT * FROM routes WHERE from='$icao'");
for($i = 0; $i < mysql_num_rows($query); $i++){
$destination = mysql_result($query, $i, 'to');
$query = mysql_query("SELECT * FROM airports WHERE icao='$destiantion'");
$latitudeD = mysql_result($query, 0, 'latitude');
$longitudeD = mysql_result($query, 0, 'longitude');
?>
var PolyLine = new google.maps.Polyline({
strokeColor: "#FF0000",
strokeOpacity: 2.0,
strokeWeight: 2
});
var polyCords = [
new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>),
new google.maps.LatLng(<?php echo $latitudeD; ?>, <?php echo $longitudeD; ?>)
];
google.maps.event.addListener(marker, 'click', function() {
PolyLine.setPath(polyCords);
PolyLine.setMap(map);
});
<?php } } ?>
}
</script>
</head>
<body>
<center><div id="map_canvas" style="width:850px; height:560px;"></div></center>
</body>
What happens is that it doesn´tshows me the polilyne. The idea is clicking on the marker to open a network of polylines to other marker. The marker is displayed without problems but when clicking on them the polylines don´t appear.
You will have to be using ajax. Clicking on the marker will have to load JSON data for the polyline. Also I noticed that you are loading coordinates via PHP query. I suggest you do this on a separate page where you will output it in JSON format then fetch it via ajax to display them to your map dynamically.
This the link of my code visit https://www.dropbox.com/s/1j0qc2uyp8vm9xj/map_user.php, this code is not working. I used JSON to get the array of data in mysql then echo it to javascript but when I try to run it I only see a gray map. Can anyone help me?
<?php
include('lock.php');
include('function/query.php');
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>USER MAPS AND UPDATES</title>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 500px; height: 400px;"></div>
<?php
$x = 0;
$query = "SELECT lat,lng FROM messages WHERE uid_fk='1'";
$result = mysql_query($query);
while($row = mysql_fetch_array($result, MYSQL_ASSOC)){
$data[$x] = array("lat" => $row['lat'], "lng" => $row['lng']);
$x++;
}
?>
<script type="text/javascript">
var markers = <?php echo json_encode($data); ?>
function initializeMaps() {
var myOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
};
var map = new google.maps.Map(document.getElementById("map"),myOptions);
var infowindow = new google.maps.InfoWindow();
var marker, i;
var bounds = new google.maps.LatLngBounds();
for (i = 0; i < markers.length; i++) {
var pos = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(pos);
marker = new google.maps.Marker({
position: pos,
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(markers[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
map.fitBounds(bounds);
}
initializeMaps();
</script>
</body>
</html>
I have data in mysql database and I want to be able to read that data in php array and use it for google geolocation.
So for this example I want to use only SELECT * statement, as I will not be bothering you with some parameters...
What I want to achieve is to get marked line from point A to point B ( depending where GPS location was saved )
This is the link what I want to have on my map: POLYLINE in this example there are only 4 data in the array I want to have it more.
So now we can get back to the code. This is my PHP script for connecting to mysql. I have been using mysqli as I will have stored procedures later one in the database, so don't get confused.
class dbMySql
{
static function Exec($query) {
// open database
$conn = mysqli_connect(
$GLOBALS['cfg_db_Server'],
$GLOBALS['cfg_db_User'],
$GLOBALS['cfg_db_Pass']
);
if($conn === false)
{
throw new Exception(mysqli_connect_error());
}
mysqli_select_db($conn,$GLOBALS['cfg_db_Name']);
$result = mysqli_query($conn,$query);
if(is_bool($result) && !$result)
{
$error = mysqli_error($conn);
mysqli_close($conn);
throw new Exception($error);
}
mysqli_close($conn);
return $result;
}
}
How to connect this php script to code that is example on google API page, and insert my array values when button is clicked instead of the fixed ones:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=KEY&sensor=true">
</script>
<script type="text/javascript">
function initialize() {
var myLatLng = new google.maps.LatLng(0, -180);
var myOptions = {
zoom: 3,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var flightPlanCoordinates = [
new google.maps.LatLng(37.772323, -122.214897),
new google.maps.LatLng(21.291982, -157.821856),
new google.maps.LatLng(-18.142599, 178.431),
new google.maps.LatLng(-27.46758, 153.027892)
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:80%"></div>
<div><button type="button">Click Me!</button></div>
</body>
</html>
EDIT:
this is what I get when I do your code:
EDIT2:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=key&sensor=true">
</script>
<script type="text/javascript">
function initialize() {
var myLatLng = new google.maps.LatLng(0, 180);
var myOptions = {
zoom: 3,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var flightPlanCoordinates = [ <?php echo implode(',', $coordinates) ?> ];
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
</script>
</script>
<?PHP
class dbMySql {
static function Exec($query) {
// open database
$conn = mysqli_connect('localhost','root','*****');
if($conn === false) {
throw new Exception(mysqli_connect_error());
}
mysqli_select_db($conn,'data_gps');
$result = mysqli_query($conn,$query);
if(is_bool($result) && !$result) {
$error = mysqli_error($conn);
mysqli_close($conn);
throw new Exception($error);
}
mysqli_close($conn);
return $result;
}
}
$coordinates = array();
$result = dbMySql::Exec('SELECT lat,lng FROM data');
while ($row = mysqli_fetch_assoc($result))
$coordinates[] = 'new google.maps.LatLng(' . $row['lat'] . ', ' . $row['lng'] . ')' ;
?>
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:80%"></div>
<div><button type="button">Click Me!</button></div>
</body>
</html>
Im guessing that you need to iterate between the results and then echo them into the javascript.
Im assuming you have the lat and lng stored in your database.
$coordinates = array();
$result = dbMySql::Exec('SELECT lat, lng FROM table WHERE id = 1');
while ($row = mysqli_fetch_assoc($result))
$coordinates[] = 'new google.maps.LatLng(' . $row['lat'] . ', ' . $row['lng'] . ')';
And then on your javascript section
var flightPlanCoordinates = [ <?php echo implode(',', $coordinates) ?> ];
Edit:
<!DOCTYPE html>
<?PHP
class dbMySql {
static function Exec($query) {
// open database
$conn = mysqli_connect('localhost','root','*****');
if($conn === false) {
throw new Exception(mysqli_connect_error());
}
mysqli_select_db($conn,'data_gps');
$result = mysqli_query($conn,$query);
if(is_bool($result) && !$result) {
$error = mysqli_error($conn);
mysqli_close($conn);
throw new Exception($error);
}
//mysqli_close($conn);
return $result;
}
}
$coordinates = array();
$result = dbMySql::Exec('SELECT lat,lng FROM data');
while ($row = mysqli_fetch_assoc($result))
$coordinates[] = 'new google.maps.LatLng(' . $row['lat'] . ', ' . $row['lng'] . ')';
?>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=key&sensor=true">
</script>
<script type="text/javascript">
function initialize() {
var myLatLng = new google.maps.LatLng(0, 180);
var myOptions = {
zoom: 3,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var flightPlanCoordinates = [<?php echo implode(',', $coordinates) ?>];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:80%"></div>
<div><button type="button">Click Me!</button></div>
</body>
</html>