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();">
Related
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]; ?>'),
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>
I have a interesting idea(debatable). Basically I would like to make a beat pad similar to https://www.youtube.com/watch?v=3vC5TsSyNjU out of jQuery and a keyboard.
It wasn’t hard assigning sounds to keys on the keyboard.
<script type="text/javascript" src="js/jquery.playSound.js"></script>
<script type="text/javascript" src="js/jquery.hotkeys.js"></script>
<script type="text/javascript">
$(document).ready(function(){
jQuery(document).bind(
'keydown',
'q',
function(ect){
$.playSound('tracks/basses/bass01.ogg');
});
jQuery(document).bind(
'keydown',
'w',
function(ect){
$.playSound('tracks/drums/clap04.ogg');
});
jQuery(document).bind(
'keydown',
'e',
function(ect){
$.playSound('tracks/beats/rave_hihat02.ogg');
});
jQuery(document).bind(
'keydown',
'r',
function(ect){
$.playSound('tracks/4.wav');
});
}); // End
</script>
How can I drag/drop sounds to a key on the keyboard?
Ok, i understand your question. Here is the way i would proceed:
function drawImage(e) {
e = e || window.event;
if (e.keyCode == 13) {
if (counter < images.length) {
counter ++;
if(playable) {
audio.src = sounds[counter-1];
audio.controls = false;
audio.load();
audio.play();
}
var img = new Image();
img.src = images[counter-1];
img.onload = function() {
ctx.drawImage(img, 0, 0, WIDTH, HEIGHT);
}
}
}
}
First of all you need to assign for each key pressed an audio file stored into an array. You can create the audios from html markup, but this way is more elegant. So i will stick with this way. Then for each key press associate an audio from the corresponding audio array. In my example i used canvas for associating an image to an audio file. This is however only for visual appearance. Note that for simplicity i only used the Enter key. For each key press you will hear another beep.
Another thing which you have to take into account is to use test cases because not every browser can play audio. You can test if the browser support audio like so:
var audio = document.createElement('audio');
var canPlay = !!(audio.canPlayType && audio.canPlayType('audio/mpeg;').replace(/no/, ''));
var playable = canPlay ? true : false;
If not you can use fallback to flash:
Adding sound on clicking a image in HTML 5
Example: http://jsfiddle.net/N9Q6S/1/
This is what I used
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>hello</title>
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.23.min.js"></script>
<script type="text/javascript" src="js/jquery.hotkeys.js"></script>
<link rel="stylesheet" href="" />
<style>
.key{
width: 50px;
height: 50px;
border: solid 1px #000;
}
.song{
width: 50px;
height: 50px;
border: solid 1px #f0f;
float: right;
}
</style>
<script src=""></script>
<script type="text/javascript">
$(document).ready(function(){
$( ".song" ).draggable();
$( ".key" ).droppable({
drop: function( event, ui ) {
$( this )
var title = ui.draggable.attr('title');
$(this).attr({
//text: 'Beijing Brush Seller',
title: title,
});
//alert("Dropped!");
}
});
$(this).bind(
'keydown',
'q',
function(ect){
var track = $('.key').attr("title");
//alert(track);
var snd = new Audio(track); // buffers automatically when created
snd.play();
});
$(this).bind(
'keydown',
'w',
function(ect){
var track = $('.key').attr("title");
//alert(track);
var snd = new Audio(track); // buffers automatically when created
snd.play();
});
$(this).bind(
'keydown',
'a',
function(ect){
var track = $('.key').attr("title");
//alert(track);
var snd = new Audio(track); // buffers automatically when created
snd.play();
});
}); // End
</script>
<style type="text/css">
</style>
</head>
<body>
<div class="key" title="">Key</div>
<div class="song" id="" title="tracks/basses/bass01.ogg">Song</div>
<div class="song" id="" title="tracks/bassloopes/rave_bass01.ogg">Song</div>
<div class="song" id="" title="tracks/basses/synth_acid02.ogg">Song</div>
</body>
</html>
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.....
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>