|
PHP - Center Map On Marker
Hi! I have this code
<?php
/**
* @Project: Virtual Airlines Manager (VAM)
* @Author: Alejandro Garcia
* @Web http://virtualairlinesmanager.net
* Copyright (c) 2013 - 2016 Alejandro Garcia
* VAM is licensed under the following license:
* Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International (CC BY-NC-SA 4.0)
* View license.txt in the root, or visit http://creativecommons.org/licenses/by-nc-sa/4.0/
*/
?>
<!DOCTYPE html>
<html>
<head>
<script
src="https://maps.googleapis.com/maps/api/js?key=XXX&callback=initMap" type="text/javascript">
</script>
<meta http-equiv="refresh" content="300">
</head>
<body>
<?php
include('./db_login.php');
$db_map = new mysqli($db_host , $db_username , $db_password , $db_database);
$db_map->set_charset("utf8");
if ($db_map->connect_errno > 0) {
die('Unable to connect to database [' . $db_map->connect_error . ']');
}
$sql_map = "select plane_type,ias,flight_id,u.gvauser_id as gvauser_id,u.callsign as callsign,u.name as name,gs,altitude,surname,departure,arrival,latitude,longitude,flight_status,heading,perc_completed,
pending_nm, a1.latitude_deg as dep_lat, a1.longitude_deg as dep_lon , a2.latitude_deg as arr_lat, a2.longitude_deg as arr_lon , network
from vam_live_flights lf, gvausers u , airports a1, airports a2 where u.gvauser_id=lf.gvauser_id and lf.departure=a1.ident and lf.arrival=a2.ident";
if (!$result = $db_map->query($sql_map)) {
die('There was an error running the query [' . $db_map->error . ']');
}
unset($flights_coordinates);
unset($flight);
unset($liveflights);
unset($datos);
unset($jsonarray);
$flights_coordinates = array();
$datos = array ();
$flight = array();
$liveflights = array ();
$jsonarray = array ();
$index = 0;
$index2=0;
$flightindex=0;
while ($row = $result->fetch_assoc()) {
$flight["gvauser_id"]=$row["gvauser_id"];
$flight["callsign"]=$row["callsign"];
$flight["name"]=$row["name"];
$flight["gs"]=$row["gs"];
$flight["ias"]=$row["ias"];
$flight["altitude"]=$row["altitude"];
$flight["surname"]=$row["surname"];
$flight["departure"]=$row["departure"];
$flight["arrival"]=$row["arrival"];
$flight["latitude"]=$row["latitude"];
$flight["longitude"]=$row["longitude"];
$flight["flight_status"]=$row["flight_status"];
$flight["heading"]=$row["heading"];
$flight["dep_lat"]=$row["dep_lat"];
$flight["dep_lon"]=$row["dep_lon"];
$flight["arr_lat"]=$row["arr_lat"];
$flight["arr_lon"]=$row["arr_lon"];
$flight["perc_completed"]=$row["perc_completed"];
$flight["pending_nm"]=$row["pending_nm"];
$flight["network"]=$row["network"];
$flight["plane_type"]=$row["plane_type"];
$liveflights[$flightindex] =$flight;
$sql_map2 = "select * from vam_live_acars where flight_id='".$row["flight_id"]."' order by id asc";
if (!$result2 = $db_map->query($sql_map2)) {
die('There was an error running the query [' . $db_map->error . ']');
}
while ($row2 = $result2->fetch_assoc()) {
$flights_coordinates ["gvauser_id"] = $row2["gvauser_id"];
$flights_coordinates ["latitude"] = $row2["latitude"];
$flights_coordinates ["longitude"] = $row2["longitude"];
$flights_coordinates ["heading"] = $row2["heading"];
$datos [$index2][$index] = $flights_coordinates;
$index ++;
}
$index=0 ;
$index2 ++;
$flightindex ++;
}
$jsonarray[0]=$liveflights;
$jsonarray[1]=$datos;
?>
<div class="container">
<div class="row">
<div id="map-outer" class="col-md-11">
<div id="map-container" class="col-md-12"></div>
<div id="over_map"></div>
</div><!-- /map-outer -->
</div> <!-- /row -->
</div><!-- /container -->
<style>
body { background-color:#FFFFF }
#map-outer {
padding: 0px;
border: 0px solid #CCC;
margin-bottom: 0px;
background-color:#FFFFF }
#map-container { height: 500px }
@media all and (max-width: 800px) {
#map-outer { height: 650px }
}
</style>
<style>
#wrapper { position: relative; }
#over_map { position: absolute; top: 50px; left: 10px; z-index: 99; background: white;}
</style>
</body>
<script type="text/javascript">
var mapCentre;
var map ;
function init_map() {
var flights = <?php echo json_encode($jsonarray[0]); ?>;
var locations = <?php echo json_encode($jsonarray[1]); ?>;
var numpoints=(locations.length);
console.log(locations);
var var_location = new google.maps.LatLng(<?php echo $datos[0][0]["latitude"]; ?>,<?php echo $datos[0][0]["longitude"]; ?>);
var var_mapoptions = {
center: var_location,
zoom: 5,
styles: [{"featureType":"all","elementType":"all","stylers":[{"saturation":"0"},{"lightness":"0"}]},{"featureType":"all","elementType":"geometry","stylers":[{"lightness":"20"}]},{"featureType":"administrative","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"visibility":"on"}]},{"featureType":"administrative","elementType":"labels","stylers":[{"visibility":"on"},{"color":"#716464"},{"weight":"0.01"}]},{"featureType":"administrative.country","elementType":"labels","stylers":[{"visibility":"on"}]},{"featureType":"landscape","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"landscape.natural","elementType":"geometry","stylers":[{"visibility":"simplified"}]},{"featureType":"landscape.natural.landcover","elementType":"geometry","stylers":[{"visibility":"simplified"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"poi","elementType":"geometry.fill","stylers":[{"visibility":"simplified"}]},{"featureType":"poi","elementType":"geometry.stroke","stylers":[{"visibility":"simplified"}]},{"featureType":"poi","elementType":"labels.text","stylers":[{"visibility":"simplified"}]},{"featureType":"poi","elementType":"labels.text.fill","stylers":[{"visibility":"simplified"}]},{"featureType":"poi","elementType":"labels.text.stroke","stylers":[{"visibility":"simplified"}]},{"featureType":"poi.attraction","elementType":"geometry","stylers":[{"visibility":"on"}]},{"featureType":"road","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"road","elementType":"labels","stylers":[{"visibility":"on"}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"visibility":"on"}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#ffad99"},{"lightness":"45"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"visibility":"on"},{"color":"#fbac99"},{"lightness":"1"}]},{"featureType":"road.highway","elementType":"labels","stylers":[{"visibility":"on"}]},{"featureType":"road.highway.controlled_access","elementType":"geometry.fill","stylers":[{"color":"#ffff80"},{"lightness":"50"}]},{"featureType":"road.highway.controlled_access","elementType":"geometry.stroke","stylers":[{"color":"#ff6666"},{"lightness":"59"},{"visibility":"on"},{"weight":"1.10"}]},{"featureType":"road.arterial","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#fff13a"}]},{"featureType":"road.arterial","elementType":"geometry.stroke","stylers":[{"color":"#f2d344"},{"visibility":"off"},{"weight":"1.41"}]},{"featureType":"road.local","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"transit","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"visibility":"simplified"}]},{"featureType":"transit.station","elementType":"geometry","stylers":[{"visibility":"on"}]},{"featureType":"water","elementType":"all","stylers":[{"visibility":"simplified"},{"color":"#12586f"},{"lightness":"20"},{"gamma":"6.95"},{"saturation":"-29"}]},{"featureType":"water","elementType":"geometry","stylers":[{"visibility":"on"}]},{"featureType":"water","elementType":"geometry.fill","stylers":[{"visibility":"on"}]}]
};
map = new google.maps.Map(document.getElementById('map-container'), var_mapoptions);
var mapas=[];
var flightPlanCoordinates=[];
var flightPath = new google.maps.Polyline({
strokeColor: "#c3524f",
strokeOpacity: 1,
strokeWeight: 2,
geodesic: true
});
var k=0;
var z=0;
var coordinate;
while (k<numpoints) {
while (z < locations[k].length)
{
coordinate =new google.maps.LatLng(locations[k][z]['latitude'],locations[k][z]['longitude']);
flightPlanCoordinates.push(coordinate);
z=z+1;
}
ruta = new google.maps.Polyline({
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
ruta.setPath(flightPlanCoordinates);
mapas.push(ruta);
z=0;
k=k+1;
};
function createMarker(pos, t) {
var coord=[];
var pathcoord=[];
var flight_id = t;
currentPath = new google.maps.Polyline({
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
// Plane marker begin
var image = new google.maps.MarkerImage("./map_icons/"+flights[t]['heading'] +".png",null,new google.maps.Point(0,0),new google.maps.Point(15, 15),new google.maps.Size(30, 30));
var icon_airport = new google.maps.MarkerImage("./map_icons/airport_yellow_marker.png");
var lineSymbol = {path: 'M 0,-1 0,1', strokeOpacity: 1, scale: 1 };
var lat1 = flights[t]["dep_lat"];
var lat2 = flights[t]["arr_lat"];
var lng1 = flights[t]["dep_lon"];
var lng2 = flights[t]["arr_lon"];
var dep = new google.maps.LatLng(lat1, lng1)
var arr = new google.maps.LatLng(lat2, lng2)
var icon_plane = 'images/plane.png';
var marker = new google.maps.Marker({
position: pos,
icon: image,
name: t ,
contenido: flights[t]['callsign']+ ' '+flights[t]['name']+ ' '+flights[t]['surname'] ,
icao1:new google.maps.Marker({
position: dep,
map: map,
icon: icon_airport,
visible: false
}),
icao2:new google.maps.Marker({
position: arr,
map: map,
icon: icon_airport,
visible: false
}),
line1:new google.maps.Polyline({
path: [dep, pos],
strokeColor: "#08088A",
strokeOpacity: 1,
strokeWeight: 2,
geodesic: true,
map: map,
polylineID: t,
visible: false
}) ,
line2:new google.maps.Polyline({
path: [pos, arr],
strokeColor: "#FE2E2E",
strokeOpacity: .3,
geodesic: true,
map: map,
icons: [{
icon: lineSymbol,
offset: '0',
repeat: '5px'
}],
polylineID: t,
visible: false
})
});
// On mouse over
google.maps.event.addListener(marker, 'mouseover', function () {
//infowindow.open(map, marker);
this.get('line1').setVisible(true);
this.get('line2').setVisible(true);
this.get('icao1').setVisible(true);
this.get('icao2').setVisible(true);
infowindow.open(map,marker);
infowindow.setContent(marker.contenido);
var s=0;
coord.length = 0;
pathcoord.length = 0;
while (s < locations[flight_id].length)
{
coord= new google.maps.LatLng(locations[flight_id][s]['latitude'],locations[flight_id][s]['longitude']);
pathcoord.push(coord);
s=s+1;
}
currentPath.setPath(pathcoord);
currentPath.setMap(map);
});
// On mouse end
// mouse out
google.maps.event.addListener(marker, 'mouseout', function () {
//infowindow.close();
//this.get('line1').setVisible(false);
//this.get('line2').setVisible(false);
//this.get('icao1').setVisible(false);
//this.get('icao2').setVisible(false);
//currentPath.setMap(null);
});
// mouse out end
// On Click begin
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
infowindow.setContent(marker.contenido);
var s=0;
coord.length = 0;
pathcoord.length = 0;
while (s < locations[flight_id].length)
{
coord= new google.maps.LatLng(locations[flight_id][s]['latitude'],locations[flight_id][s]['longitude']);
pathcoord.push(coord);
s=s+1;
}
currentPath.setPath(pathcoord);
currentPath.setMap(map);
if (this.get('line1').visible ='true')
{
this.get('line1').setVisible(false);
}
if (this.get('line2').visible ='true')
{
this.get('line2').setVisible(false);
}
if (this.get('icao1').visible ='true')
{
this.get('icao1').setVisible(false);
}
if (this.get('icao2').visible ='true')
{
this.get('icao2').setVisible(false);
}
flight_detail='<div class="panel panel-map">\
<!-- Default panel contents -->\
<div class=\"panel-heading\">'+flights[t]['departure'] + ' <i class="fa fa-arrow-right"></i> ' + flights[t]['arrival']+'</div>\
<table class="table-map">\
<tr>\
<td><small>Flight completed</small><br><div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="\
'+flights[t]['perc_completed'] + '" aria-valuemin="0" aria-valuemax="100" style="width:'+flights[t]['perc_completed']+'%">\
'+flights[t]['perc_completed'] + ' %</div></td>\
</tr>\
<tr>\
<td><small>Callsign</small><br><strong>\
'+flights[t]['callsign'] + '</strong></td>\
</tr>\
<tr>\
<td><small>Flight Status</small><br><strong>\
'+flights[t]['flight_status'] + '</strong></td>\
</tr>\
<tr>\
<td><small>Plane Type</small><br><strong>\
'+flights[t]['plane_type'] + '</strong></td>\
</tr>\
<tr>\
<td><small>Network</small><br><strong>\
'+flights[t]['network'] + '</strong></td>\
</tr>\
<tr>\
<td><small>Pending NM</small><br><strong>\
'+flights[t]['pending_nm'] + '</strong></td>\
</tr>\
<tr>\
<td><small>GS</small><br><strong>\
'+flights[t]['gs'] + '</strong></td>\
</tr>\
<tr>\
<td><small>IAS</small><br><strong>\
'+flights[t]['ias'] + '</strong></td>\
</tr>\
<tr>\
<td><small>Altitude</small><br><strong>\
'+flights[t]['altitude'] + '</strong></td>\
</tr>\
<tr>\
<td><small>Heading</small><br><strong>\
'+flights[t]['heading'] + '</strong></td>\
</tr>\
</table>\
</div>';
//flights[t]['departure'] + '-' + flights[t]['arrival'] + '<br />' + flights[t]['callsign']+ ' '+flights[t]['name']+ ' '+flights[t]['surname'] + '<br />' + 'ALTITUDE: ' + flights[t]['altitude'] + '<br />' + 'GS: ' + flights[t]['gs']+ '<br />' + 'HEADING: ' + flights[t]['heading'] + '<br />' + flights[t]['flight_status'];
$('#over_map').html("<div id='mySecondDiv'>"+flight_detail+"</div>");
});
// On Click end
return marker;
}
var numflight=0
while (numflight < flights.length )
{
var avionicon =new google.maps.LatLng(flights[numflight]['latitude'],flights[numflight]['longitude']);
var m1 = createMarker(avionicon, numflight);
m1.setMap(map);
numflight = numflight +1;
}
var s=0;
while (s < mapas.length)
{
s=s+1;
}
var infowindow = new google.maps.InfoWindow({
});
google.maps.event.addListener(infowindow, 'closeclick', function() {
$('#over_map').html("");
});
}
google.maps.event.addDomListener(window, 'load', init_map);
$( document ).ready(refreshflights);
function refreshflights(){
setInterval(function () {$.ajax({
url: 'get_map_coordinates.php',
data: "",
dataType: 'json',
success: function(data, textStatus, jqXHR) {
init_map();
}
})}, 120000);
}
</script>
</html>
I need map to be centered on marker every time i go on my webpage. Right now is centered on deparrture aiport. So this is map for flights, as flight is ongoing , aircraft (marker) on route, map should be tracking it so every time i refresh my wepage, map should point to marker, not to departure airport. Can anyone halp me. Thank you Edited December 23, 2020 by mrshiljoSimilar Tutorialshey guys how do i get a zip codes in the range of 50KM from the current search that is performed!! the search based on zipcodes. and also is ti possible to print text ON the marker. Dynamic text. anyideas will be great thanks Hi all
The issue is, I want to show a map on google map site with marker on the location, when someone click on the link on my site. The problem is map is showing correctly, but no marker is there. Here is the link I am using
<a href="https://www.google.c...803171">Map</a>
Any help ?
Hi, I currently have a google map which shows a marker where the postcode is for a certain pub (converts postcodes to coords lat/long) I would like to loop through all my pubs in my database as place a marker for each on one map, I am uncertain of how to loop through and show each marker for each postcode either PHP or JavaScript. here is my code for a single pub / postcode: Code: [Select] <!doctype html> <?php include "../config.php"; $loggedIn = (isset($_COOKIE['loggedin']) && $_COOKIE['loggedin'] == 'true')?true:false; $PUBID = intval($_REQUEST['PUBID']); $PUB = mysql_query("SELECT * FROM pubs WHERE PUBID = '".$PUBID."'"); $pubdetails = mysql_fetch_array($PUB); ?> <html> <head> <meta charset="UTF-8" /> <title><?php echo $pubdetails['rsPubName']; ?>, <?php echo $pubdetails['rsTown']; ?>, <?php echo $pubdetails['rsCounty']; ?></title> <style type="text/css" media="screen">@import "jqtouch/jqtouch.min.css";</style> <style type="text/css" media="screen">@import "themes/jqt/theme.min.css";</style> <script src="jqtouch/jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script> <script src="jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script> <script src="http://maps.google.com/maps?file=api&v=2&sensor=true&key=ABQIAAAAM17e4xGXwO4sBd_QYtRiSRQXB4T7UHWaz4zUQgLx9muJZW0c3hS8jRMJg733CHqOihn7BVfhZTkLiA" type="text/javascript"></script> <script type="text/javascript"> function initialize() { var latlng = new google.maps.LatLng(-34.397, 150.644); var myOptions = { zoom: 8, center: latlng, mapTypeId: google.maps.MapTypeId.G_NORMAL_MAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); } </script> <script type="text/javascript" charset="utf-8"> var jQT = new $.jQTouch({ icon: 'jqtouch.png', addGlossToIcon: false, startupScreen: 'jqt_startup.png', statusBar: 'black', preloadImages: [ 'themes/jqt/img/back_button.png', 'themes/jqt/img/back_button_clicked.png', 'themes/jqt/img/button_clicked.png', 'themes/jqt/img/grayButton.png', 'themes/jqt/img/whiteButton.png', 'themes/jqt/img/loading.gif' ] }); </script> </head> <body onLoad="ukPostcodeTest(); return false"> <!-- TOWNS --> <div id="pub" class="current"> <div class="toolbar"> <h1>View Pub</h1> <a class="back" href="index.php" rel="external">Home</a> </div> <h2><?php echo $pubdetails['rsPubName']; ?></h2> <?php echo $pubdetails['rsAddress']; ?><br /> <?php echo $pubdetails['rsTown']; ?><br /> <?php echo $pubdetails['rsCounty']; ?><br /> <?php echo $pubdetails['rsPostCode']; ?><br /> <?php echo $pubdetails['Region']; ?><br /> <?php echo $pubdetails['rsTel']; ?><br /> <?php echo '<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.mypubspace.com/pub_info.php?PUBID='.$pubdetails['PUBID'].'&layout=box_count&show_faces=true&width=450&action=like&colorscheme=light&height=65" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:60px; height:65px; float:right;" allowTransparency="true"></iframe>';?> <div id="map" style="width: 250px; height: 250px"></div> <form name="mapform" onsubmit="ukPostcodeTest(); return false" action="#"> <input id="search" type="hidden" value="<?php echo $pubdetails["rsPostCode"]; ?>" /> </form> <div id="message"></div> <noscript><b>JavaScript must be enabled in order for you to use Google Maps.</b> However, it seems JavaScript is either disabled or not supported by your browser. To view Google Maps, enable JavaScript by changing your browser options, and then try again. </noscript> <script type="text/javascript"> //<![CDATA[ if (GBrowserIsCompatible()) { var map = new GMap(document.getElementById("map")); map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng(51.520593197675446,-0.19775390625),16); // ====== Is the search string a UK Postcode ====== function ukPostcodeTest() { var search = document.getElementById("search").value; // take a copy and convert to upper case var s = search.toUpperCase(); // Replace punctuation and whitepsace by a single space s = s.replace(/\W+/g, " "); // Remove and trailing leading spaces s = s.replace(/^ /, ""); s = s.replace(/ $/, ""); // Perform the check var match = s.match(/^[A-Z]{1,2}[0-9R][0-9A-Z]? [0-9][ABD-HJLNP-UW-Z]{2}$/); if (!match) { // Its not a UK Postcode, so perform a standard GClientGeocoder call on the original search string showAddress(search); } else { // It is a UK Postcode, so call GDirections on the reformatted search string showPostcode(s); } } // ====== Code for handling search strings that are not UK Postcodes ======= // ====== Use the GClientGeocoder in the normal way ====== // ====== Create a Client Geocoder ====== var geo = new GClientGeocoder(); // ====== Array for decoding the failure codes ====== var reasons=[]; reasons[G_GEO_SUCCESS] = "Success"; reasons[G_GEO_MISSING_ADDRESS] = "Missing Address: The address was either missing or had no value."; reasons[G_GEO_UNKNOWN_ADDRESS] = "Unknown Address: No corresponding geographic location could be found for the specified address."; reasons[G_GEO_UNAVAILABLE_ADDRESS]= "Unavailable Address: The geocode for the given address cannot be returned due to legal or contractual reasons."; reasons[G_GEO_BAD_KEY] = "Bad Key: The API key is either invalid or does not match the domain for which it was given"; reasons[G_GEO_TOO_MANY_QUERIES] = "Too Many Queries: The daily geocoding quota for this site has been exceeded."; reasons[G_GEO_SERVER_ERROR] = "Server error: The geocoding request could not be successfully processed."; // ====== Geocoding ====== function showAddress(search) { // ====== Perform the Geocoding ====== geo.getLocations(search, function (result) { // If that was successful if (result.Status.code == G_GEO_SUCCESS) { // How many resuts were found document.getElementById("message").innerHTML = "Found " +result.Placemark.length +" results"; // Loop through the results, placing markers for (var i=0; i<result.Placemark.length; i++) { var p = result.Placemark[i].Point.coordinates; var marker = new GMarker(new GLatLng(p[1],p[0])); document.getElementById("message").innerHTML += "<br>"+(i+1)+": "+ result.Placemark[i].address + marker.getPoint(); map.addOverlay(marker); } // centre the map on the first result var p = result.Placemark[0].Point.coordinates; map.setCenter(new GLatLng(p[1],p[0]),14); } // ====== Decode the error status ====== else { var reason="Code "+result.Status.code; if (reasons[result.Status.code]) { reason = reasons[result.Status.code] } alert('Could not find "'+search+ '" ' + reason); } } ); } // ====== Create a Client Geocoder ====== var gdir = new GDirections(null); // ====== Using GDirections to process a UK postcode ====== function showPostcode(search) { // Call GDirections gdir.loadFromWaypoints([search,search],{getPolyline:true}); // Wait for the reply to come back GEvent.addListener(gdir,"load", function() { var poly = gdir.getPolyline(); var point = poly.getVertex(0); //document.getElementById("message").innerHTML = "Found a UK Postcode"; // Process the result var marker = new GMarker(point); //document.getElementById("message").innerHTML += "<br>" + search + " = " + point.toUrlValue(5); map.addOverlay(marker); // centre the map on the result map.setCenter(point,16); }); } } // display a warning if the browser was not compatible else { alert("Sorry, the Google Maps API is not compatible with this browser"); } // This Javascript is based on code provided by the // Community Church Javascript Team // http://www.bisphamchurch.org.uk/ // http://econym.org.uk/gmap/ //]]> </script> </div> </body> </html> Help me...
My objective is to reload the marker inside google map every 30s...
But the scripts below seem not running properly...
<?php
define('INCLUDE_CHECK',1);
include "dbconnect.php";
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name ="audience" CONTENT="all">
<meta name ="revisit-after" CONTENT="4 days">
<meta name ="content-Language" CONTENT="English">
<meta name ="distribution" CONTENT="global">
<link rel="shortcut icon" href="favicon.png"/>
<link rel="stylesheet" type="text/css" href="host_entry/css/demo.css" />
<link href="host_entry/css/bootstrap.min.css" rel="stylesheet" media="screen">
<script type="text/javascript" src="host_entry/js/jquery-1.7.1.min.js"></script>
<script src="host_entry/js/bootstrap.min.js"></script>
<!-- Google Map JS -->
<script src="http://maps.google.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false" type="text/javascript"></script>
<script>
//SCRIPTS TO RESFRESH THE MARKER...I THINK THIS IS INCORRECT...HELP!!!
$(document).ready(function() {
$.ajaxSetup({ cache: false }); // This part addresses an IE bug. without it, IE will only load the first number and will never refresh
setInterval(function() {
$('#result').load('index.php');
}, 10000); // the "3000" here refers to the time to refresh the div. it is in milliseconds.
});
// ]]>
</script>
</head>
//to dislay the map
<div id="map_canvas" style="top:55px;left:13px;"> <!-- Map will display -->
<div id="map"> <!-- Fullscreen Loading & Fullscreen Buttons area -->
<span style="color:Gray;">Loading map...</span>
</div>
<!-- Fullscreen Loading & Fullscreen Buttons area Ends -->
</div><!-- Map Ends display -->
<script type="text/javascript">
var locations = [
<?php
$query="SELECT * from host_entry";
$result=mysql_query($query)or die(mysql_error());
{
if ($num=mysql_numrows($result))
{
$i=0;
while ($i < $num)
{
$id=mysql_result($result,$i,"id");
//$host_type=mysql_result($result,$i,"host_type");
$host_name=mysql_result($result,$i,"host_name");
$host_status=mysql_result($result,$i,"host_status");
$host_lapt=mysql_result($result,$i,"host_lapt");
$host_long=mysql_result($result,$i,"host_long");
if($host_status==0)
echo "[
'<div id=result><div class=info style=text-align:center;><h4>$host_name</h4></div></div>', $host_lapt, $host_long],";
$i++;
}
}else {
echo "<h3 align='center'><font color='#ff0000'>No Content Found</font></h3>";
}
}
?>
];
//FROM HERE TO SET THE MARKER IMAGE
// Setup the different icons and shadows
var iconURLPrefix = 'host_entry/img/';
var icons = [
iconURLPrefix + 'p_red_alert.png'
]
var icons_length = icons.length;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: -5,
center: new google.maps.LatLng(3.1215681, 101.71180140000001),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
streetViewControl: false,
disableDefaultUI: true,
panControl: false,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_BOTTOM
}
});
var infowindow = new google.maps.InfoWindow({
maxWidth: 400,
maxHeight: 350,
});
var marker;
var markers = new Array();
var iconCounter = 0;
//I THINK THE PROBLEM START HERE...:(
// Add the markers and infowindows to the map
for (var i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2], locations[i][3], locations[i][4], locations[i][5]),
map: map,
animation: google.maps.Animation.BOUNCE,
icon : icons[iconCounter],
});
markers.push(marker);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
iconCounter++;
// We only have a limited number of possible icon colors, so we may have to restart the counter
if(iconCounter >= icons_length){
iconCounter = 0;
}
}
function AutoCenter() {
// Create a new viewpoint bound
var bounds = new google.maps.LatLngBounds();
// Go through each...
$.each(markers, function (index, marker) {
bounds.extend(marker.position);
});
// Fit these bounds to the map
map.fitBounds(bounds);
}
AutoCenter();
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<?php
//include "includes/footer.php";
?>
</body>
</html>
Is there a way to reload the marker with the ability of ajax towards the markersHelp me for the solution... Thanks.... HI guys, On my site users are enabled to see the location of other users they are trying to find, but i want to add a link to that all users profiles on the window of their marker. Below is the code for the map. The link would be coded something like Code: [Select] <a href="userprofile.php?id=<?php echo $row['id'];?>"> im not sure if this is or the correct approach . I would thnk that it would have to be added to the create marker function... but i can get it to work Any help would be appreciated. Code: [Select] <script type="text/javascript"> //<![CDATA[ var iconBlue = new GIcon(); iconBlue.image = 'http://labs.google.com/ridefinder/images/mm_20_blue.png'; iconBlue.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'; iconBlue.iconSize = new GSize(12, 20); iconBlue.shadowSize = new GSize(22, 20); iconBlue.iconAnchor = new GPoint(6, 20); iconBlue.infoWindowAnchor = new GPoint(5, 1); var iconRed = new GIcon(); iconRed.image = 'http://labs.google.com/ridefinder/images/mm_20_red.png'; iconRed.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'; iconRed.iconSize = new GSize(12, 20); iconRed.shadowSize = new GSize(22, 20); iconRed.iconAnchor = new GPoint(6, 20); iconRed.infoWindowAnchor = new GPoint(5, 1); var customIcons = []; customIcons["restaurant"] = iconBlue; customIcons["bar"] = iconRed; function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng(51.89787, -8.47109), 13); GDownloadUrl("geo.php", function(data) { var xml = GXml.parse(data); var markers = xml.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { var name = markers[i].getAttribute("name"); var address = markers[i].getAttribute("address"); var type = markers[i].getAttribute("type"); var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng"))); var marker = createMarker(point, name, address, type); map.addOverlay(marker); } }); } } function createMarker(point, name, address, type) { var marker = new GMarker(point, customIcons[type]); var html = "<b>" + name + "</b><br/>" + address; GEvent.addListener(marker, 'click', function() { marker.openInfoWindowHtml(html); }); return marker; } //]]> I've been pulling my hair out for the past couple of hours working with simplexml_load_file(). I was attempting to consume a web service generated by asp.net that I've been consuming using CURL and a function to remove the BOM (byte order marker) so that I could load it into simplexml_load_string(). When I switched over to simplexml_load_file() to call the file instead of using CURL and my function, I was getting errors that it could not find the beginning '<' and that the document was empty and so on.. I couldn't find anything about simplexml_load_file() handling BOM characters, so I went for a walk. I came back to my desk and refreshed the page.. and it just started working. I changed nothing! Guess I should be happy that it started working, but I'd sure like to know why it was breaking in the first place, and then why it would suddenly start working without me doing anything. Has anyone else seen anything like this? Hi, I have the code below: <? /* * search.php * * Script for searching a datbase populated with keywords by the * populate.php-script. */ print "<html><head><title>[Squashy] Search! NOT MESSED UP.</title></head><body>\n"; if( $_POST['keyword'] ) { /* Connect to the database: */ mysql_pconnect("www.freesqldatabase.com","sql01_44052","censored") or die("ERROR: Could not connect to database!"); mysql_select_db("sql01_4405hahamo1"); /* Get timestamp before executing the query: */ $start_time = getmicrotime(); /* Execute the query that performs the actual search in the DB: */ $query = ' SELECT p.page_url AS url, COUNT(*) AS occurrences FROM page p, word w, occurrence o WHERE p.page_id = o.page_id AND w.word_id = o.word_id AND (false '; $words = explode(' ', $_POST['keyword']); foreach ($words as $word) { $query .= 'OR w.word_word = "' . $word . '" '; } $query .= ') GROUP BY p.page_id ORDER BY occurrences DESC LIMIT ' . $_POST['results']; $result = mysql_query($query); /* Get timestamp when the query is finished: */ $end_time = getmicrotime(); /* Present the search-results: */ print "<h2>[Squashy] Search Results For '".$_POST['keyword']."':</h2>\n"; for( $i = 1; $row = mysql_fetch_array($result) or die(mysql_error()); $i++ ) { print "$i. <a href='".$row['url']."'>".$row['url']."</a>\n"; print "(occurrences: ".$row['occurrences'].")<br><br>\n"; } /* Present how long it took the execute the query: */ print "This search took: ".(substr($end_time-$start_time,0,5))." seconds."; } else { /* If no keyword is defined, present the search-page instead: */ print "<form method='post'>[Squashy Search] <input type='text' size='20' name='keyword'>\n"; print "Results: <select name='results'><option value='5'>5</option>\n"; print "<option value='10'>10</option><option value='15'>15</option>\n"; print "<option value='20'>20</option></select>\n"; print "<input type='submit' value='Search [Squashy]'></form>\n"; } print "</body></html>\n"; /* Simple function for retrieving the currenct timestamp in microseconds: */ function getmicrotime() { list($usec, $sec) = explode(" ",microtime()); return ((float)$usec + (float)$sec); } ?> How do I: a) Center the search box and title and add an image above it like in google, the code for the search box and title is (taken from the code above) { /* If no keyword is defined, present the search-page instead: */ print "<form method='post'>[Squashy Search] <input type='text' size='20' name='keyword'>\n"; print "Results: <select name='results'><option value='5'>5</option>\n"; print "<option value='10'>10</option><option value='15'>15</option>\n"; print "<option value='20'>20</option></select>\n"; print "<input type='submit' value='Search [Squashy]'></form>\n"; } b) How do I protect the code so that people can't see the database name and password? Thanks, Will Hey guys, I am having trouble centering a navbar with css on my template.
Here is a jsfiddle live preview for you.
http://jsfiddle.net/LRS38/
I added text-align:center; to it but it still wont center. I also added a margin:0 auto; but no luck.
Can anyone see what I am doing wrong?
<div id="navigation"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li class="current"><a href="#">Services</a></li> <li><a href="#">Contact us</a></li> </ul> </div>and
#navigation {
text-align:center;
background-color:#ef6b51;
overflow:hidden;
}
I tried to code this, but failed miserably. What I wanted was a admin page that contained various stats of a football match. TEAM 1....................TEAM 2 0...........Score...........0 0.......Shots on target.......0 0.......Shots off target.......0 ect, ect.... The first way I layed it out was a table, i entered the data and it saved to a text file, which then displayed on stats.php in a table format. That then displayed elsewhere via an iframe. I was wondering if someone would code me a stats center like I've explained! You could even help me do it, I don't mind....As long as I get it! Dear All, Hope all are fine. Need one hep to align the logo in the center of the footer. I tried align = Center but didn't help, please see below code ad advise. <div class="image"> <img src="images/icon/logo.jpg" alt="John Doe"/> </div>
Kind Regards, Naveed. Edited August 2, 2020 by Naveed786Hello,
Trying to rearrange a data on the website. Looks normal when looking through preview on IE and chrome. But once moved to live website, the whole alignment changes from left to center , including the text that needs to show up. I am a newbie to coding and dont have a clue. tried puttng something together based on what i foud on the web. attaching screenshot and the code that i did. any help is highly appreciated. also attached is a screenshot of what happens when the php file is uploaded. Prior to doing that, the menu on the left is aligned properly and the assets that we have show properly.
What we are trying to do is rearrage the whole assets into different categories.
many thanks
Attached Files
portfolio.php 3.27KB
2 downloads
noalignment.png 11KB
0 downloads <html> |
|||||||