This question already has answers here:
PHP code is not being executed, but the code shows in the browser source code
(35 answers)
PHP parse/syntax errors; and how to solve them
(20 answers)
Closed 3 years ago.
Well I have some code to use LAT&LONG, data saved in a txt, and display it as a Google Map in html. but the php function to import the txt, no works at all. Any idea of what the problem is ?
I tried to run in other machines, and system, in the rasp is mounted in Nginx
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>LOCATION</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?key="></script>
<?php $array = explode("\n", file_get_contents('locations.txt')); ?>
<script>
function initialize() {
var mapOptions = {
zoom: 20,
center: new google.maps.LatLng(<?php echo $array[0]; ?>),
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var flightPlanCoordinates = [
<?php foreach ($array as $arrayItem) {
echo 'new google.maps.LatLng('.$arrayItem.'),';
} ?>
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
Trows error "SyntaxError: Unexpected token '<'"
In the line 20. Specifically in the php function to add the array of the txt.
On Line 20 , you have
center: new google.maps.LatLng(<?php echo $array[0]; ?>),
Replace it with
center: new google.maps.LatLng('<?php echo $array[0]; ?>'),
Related
I want to call the Google maps API and have it return me a map that has the following.
Centered on the adress I'm giving the API call.
Icons for all nearby supermarkets, schools, fitness and train stations.
I know you can get all supermarkets by typing in "Supermarket" on google maps, but I need to get the supermarkets and more through the API, while being centered on the adress that I'm sending.
I expect the call to look something like this:
http://maps.google.com/?q=teststreet&supermarket&fitness&school&train
Edit:
I've found you can actually do what I wanted here:
https://developers.google.com/places/training/additional-places-features
The only problem is that the URL is returning me a 404, so I'm probably not building it properly.
Am I missing something?
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/place/search/json/js?v=3.exp&sensor=false&types=supermarkt|trein|school|fitness"></script>
<script>
var map;
function initialize() {
var mapOptions = { zoom: 8, center: new google.maps.LatLng(-34.397, 150.644) };
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
This morning i was trying to implement Google map, but when i load my page than nothing is being displayed. The code is listed below.
<?php
?>
<!--===========================HTML==========================-->
<!DOCTYPE html>
<html>
<head>
<style>
#map_canvas {
width: 500px;
height: 400px;
}
</style>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(44.5403, -78.5463),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options)
}
google.maps.event.addDomListener(window, ‘load’, initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
Please let me know what wrong with this code
This was a tricky one, but I've got it: it's your quotes. The JavaScript error is Uncaught SyntaxError: Unexpected token ILLEGAL on line 24.
Your quotes around the string load are part of a character set that JavaScript doesn't recognize. So:
google.maps.event.addDomListener(window, ‘load’, initialize);
Should be changed to:
google.maps.event.addDomListener(window, 'load', initialize);
I've tested your code with that one replacement and it works as desired.
To further add to Amal Murali's answer, it's the irregular single quotes ‘ ’ in the following line:
google.maps.event.addDomListener(window, ‘load’, initialize);
It needs to be changed to:
google.maps.event.addDomListener(window, 'load', initialize);
while using: <body onload="initialize();"> (as per Amal Murali's suggestion)
Most probable cause:
Errors as such come from copying/pasting code from the Internet, it can happen.
How to prevent this:
It's always best to double-check code taken from exterior sources.
Full fixed code: (it's safe to now copy/paste)
<?php
?>
<!--===========================HTML==========================-->
<!DOCTYPE html>
<html>
<head>
<style>
#map_canvas {
width: 500px;
height: 400px;
}
</style>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(44.5403, -78.5463),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options)
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body onload="initialize();">
<div id="map_canvas"></div>
</body>
</html>
Try like this
function initialize() {
latlng1 = new google.maps.LatLng(44.5403, -78.5463);
options = { zoom: 8, center: latlng1, mapTypeId: google.maps.MapTypeId.ROADMAP };
map = new google.maps.Map(document.getElementById("map_canvas"), options);
}
And in your code there is an syntax that you need to change like
google.maps.event.addDomListener(window, 'load', initialize);
And also #Amal said it will work only when it calls on load for the page like
<body onload="initialize();">
In My Project I am having some javascript to implement my work, but it is not taking when I am starting the page,but it is working after reloading the page.
Here is the code:
<?php
require_once"session.php";
$slat =$_GET['slat'];
$slang =$_GET['slang'];
$elat =$_GET['elat'];
$elang =$_GET['elang'];
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php require_once"header.php";?>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>Near My Location Contacts</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
<script type="text/javascript">
/* function refreshPage() {
alert('dfg');
window.location.href,
{
allowSamePageTransition : true,
transition : 'none',
showLoadMsg : false,
reloadPage : true
}
}
refreshPage();*/
//<![CDATA[
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
//var haight = new google.maps.LatLng(37.7699298, -122.4469157);
//var oceanBeach = new google.maps.LatLng(37.7683909618184, -122.51089453697205);
var haight = new google.maps.LatLng(<?php echo $slat;?>,<?php echo $slang;?>);
var oceanBeach = new google.maps.LatLng(<?php echo $elat;?>,<?php echo $elang;?>);
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var mapOptions = {
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: haight
}
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directionsPanel"));
}
function calcRoute() {
var request = {
origin:haight,
destination:oceanBeach,
travelMode: google.maps.TravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.METRIC
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
//]]>
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize();calcRoute()">
<div data-role=page id=nmContacts >
<div data-role=header data-theme="e" >
Back</font>
<h1 align="left"><font size="2px">Near My Contacts</font></h1>
</div>
<div data-role=content style="width:100%;height:100%;">
<div data-role=content id="map_canvas" style="width:95%; height:300px"></div>
<div id="directionsPanel" style="width:97%;height 100%"></div>
</div>
</body>
</html>
In the above I am having body onload it is not working at the first time after refreshing only it is working.
Here is the answer:
Before You are calling to this page You have to specify in href like the following
assume that you are having the following link to load:
sample
here `href="external" You have to specify otherwise it wont work.....
Why does this work:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<div id="graph">
<? include('sites/test.php') ?>
</div>
</body>
But this does not:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<div id="graph">
</div>
<script>
$(document).ready(function() {
$('#graph').load('sites/test.php');
});
</script>
</body>
Here is test.php if required:
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="./data.js"></script>
<div id="text" style="width:500px;height:500px;position:relative;border:1px solid red;">
<div id="map_canvas" style="border:1px solid green;"></div>
</div>
<script type="text/javascript">
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(-36.42,145.704);
var myOptions = { zoom: 16, center: myLatlng, mapTypeId: google.maps.MapTypeId.SATELLITE }
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// Create polygon overlays from site data in file data.js included above
// Overlays are defined by a set of coordinates
// We will also be setting up an infowindow with the site name
// The infowindow will be designed to point to the 'center' of each site so we calculate the 'centroid' of each overlay in the code below as well
var overlay;
var number_of_overlays = 29;
for (var k = 0; k < number_of_overlays; k++) {
var pk = primaryKeys[k];
var verticesArray = new Array((eval("siteVertices_" + pk).length) / 2);
var m = 0;
var centroidLat = 0;
var centroidLng = 0;
for (var n = 0; n < eval("siteVertices_" + pk).length; n += 2)
{
verticesArray[m] = new google.maps.LatLng(eval("siteVertices_" + pk)[n], eval("siteVertices_" + pk)[n + 1]);
m = m + 1;
centroidLat += eval("siteVertices_" + pk)[n];
centroidLng += eval("siteVertices_" + pk)[n + 1];
}
var cent = new google.maps.LatLng(centroidLat/m, centroidLng/m);
var overlay = new google.maps.Polygon({
paths: verticesArray,
strokeColor: "#FF0000",
strokeOpacity: 0.5,
strokeWeight: 1,
fillColor: "#FF0000",
fillOpacity: 0.20,
position: cent,
map:map });
attachInfoWindow(overlay, k);
}
}
function attachInfoWindow(overlay, number) {
var infowindow = new google.maps.InfoWindow({ content: siteNames[number] });
google.maps.event.addListener(overlay, 'click', function() { infowindow.open(map, overlay); });
}
window.onload=initialize;
</script>
I really need to use jquery for a click event and can't understand why .load won't work.
MTIA!
EDIT - Apologies for the vagueness of "not working"! The initialize function does not seem to uhmmm... initialize. So the window.onload=initialize appears to work using include, but does not seem to work using .load.
I hope this is clearer.
window.onload=initialize;
that will execute on the browser triggering that event - as you load in via jquery that event has long passed. Simply change that line to:
initialize();
If you give your code another look, the .load is done after the documents loads.
Whereas the include is instantaneous.
This has many side-effects. I urge you to view the browser generated source for more details.
For one thing, you can't use <link/> tags in the body.
Another thing, if Google Maps API makes use of document.ready functionality, it won't work any more.
I'd say because the PHP script will look at its working path to include the path, whilst the JavaScript will look at the URL path.
Essentially the code wont show when I provide some sort of page container or any divs around the maps.
Header
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="<?php echo base_url(); ?>body_css.css" type="text/css" />
<!--///////////////////////////////////////////////////////////////////////////////////////// -->
<?php
$url = (!empty($_SERVER['HTTPS'])) ? "https://".$_SERVER['SERVER_NAME'].
$_SERVER['REQUEST_URI'] : "http://".$_SERVER['SERVER_NAME'].":8888".$_SERVER['REQUEST_URI'];
?>
<!--///////////////////////////////////////////////////////////////////////////////////////// -->
<?php if($url == base_url()): {?>
<title>Welcome to CodeIgniter</title>
<?php } endif; ?>
<!--///////////////////////////////////////////////////////////////////////////////////////// -->
<?php if($url == base_url()."index.php/Welcome/maps"): {?>
<title>Welcome to this site</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(30.436506, -84.302591);
var myOptions = {
zoom: 16,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
//////////////////////////////////////////////////////
var latlng2 = new google.maps.LatLng(30.444523, -84.298766);
var myOptions2 = {
zoom: 16,
center: latlng2,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map2 = new google.maps.Map(document.getElementById("map_canvas2"),
myOptions2);
//////////////////////////////////////////////////////
var latlng3 = new google.maps.LatLng(30.442334, -84.303793);
var myOptions3 = {
zoom: 16,
center: latlng3,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map3 = new google.maps.Map(document.getElementById("map_canvas3"),
myOptions3);
//////////////////////////////////////////////////////
var latlng4 = new google.maps.LatLng(30.440354, -84.301604);
var myOptions4 = {
zoom: 16,
center: latlng4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map4 = new google.maps.Map(document.getElementById("map_canvas4"),
myOptions4);
}
</script>
<?php } endif; ?>
</head>
<body>
<div id="heading">
<h1>Ultimate Campus Services</h1>
<p>
About Us |
Maps
</p>
<hr>
</div>
Main Page
<!--<div id="table_for_maps" >-->
<p>Stadium Student Parking</p>
<p># Spots Available</p>
<div id="map_canvas" style="width:20%; height:20%" ></div>
<p>Zoom</p>
<p>------------------------------<br/></p>
<p>Woodward Faculty Lot</p>
<p># Spots Available</p>
<div id="map_canvas2" style="width:20%; height:20%"></div>
Zoom
<p>------------------------------<br/></p>
<p>GYM LOT</p>
<p># Spots Available</p>
<div id="map_canvas3" style="width:20%; height:20%"></div>
Zoom
<p>------------------------------<br/></p>
<p>GYM LOT</p>
<p># Spots Available</p>
<div id="map_canvas4" style="width:20%; height:20%"></div>
Zoom
<!--</div>-->
Footer
</body>
</html>
I'd hazard a guess that all the map canvas divs have the right width, but 0 height. You need to set a height on a wrapper of the map divs (such as the commented out <div id="table_for_maps" >) or set a non-percent height on the map divs (such as 300px).
You should use a tool like Firebug (Safari and Chrome come with built-in equivalents) to inspect the CSS yourself, to get more information about the problem.
Fixed my issue with API v3. Initial value supplied by Google was:
<div id="map_canvas" style="width:100%; height:100%"></div>
Just change the values to a pixel size such as:
<div id="map_canvas" style="width:850px,;height:600px"></div>