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>
Related
How to change the alert box size?
I use the following coding.
In Firefox the alert box resize automatically but it not change in chrome?
Kindly give a solution.
window.alert("You answered all questions. Press OK to continue.");
You can't change the size/formatting/title (default settings) of the Javascript Alert Box. Instead you should check out JQuery Alert Box.
The Resizable JQuery Alert Box
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Resizable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
</style>
<script>
$(function() {
$( "#resizable" ).resizable();
});
</script>
</head>
<body>
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">Resizable</h3>
</div>
</body>
</html>
To clarify: When you use window.alert() you are using resources of your browser, not of your web page. It's the browser then who is responsible for creating the alert box, and thus you cannot influence its properties (like size etc.)
I placed a single space in a new line at the end of my string which increased the length to a standard Windows message box.
Alert ("Hello World\n ");
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();">
Can anyone tell me why this canvas won't show up? I just don't get it, it doesn't even display the tag. I'm on crunchbang 10 using chromium. All other canvases work, but this one doesn't.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<meta name="description" content="An HTML5 Test">
<meta name="author" content="William Starkovich">
<link rel="stylesheet" href="css/styles.css?v=1.0">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//get a reference to the canvas
var ctx = $('#canvas')[0].getContext("2d");
//draw a circle
ctx.beginPath();
ctx.arc(75, 75, 10, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
}
</script>
</head>
<body>
<canvas id="canvas" width="800px" height="100px">
<p>Your browser doesn't support canvas.</p>
</canvas>
</body>
</html>
The problem is a syntax error in your JavaScript code. You're missing a ); on the closing } of the main function
$(document).ready(function(){
//get a reference to the canvas
var ctx = $('#canvas')[0].getContext("2d");
//draw a circle
ctx.beginPath();
ctx.arc(75, 75, 10, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
});
There's an error in your JavaScript syntax:
}) // you are missing this parenthesis
</script>
Other than that the canvas absolutely shows up. Add:
<canvas id="canvas" width="800px" height="100px" style="border: 1px solid black">
To see a border around it.
Example:
http://jsfiddle.net/RmVs4/8/
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>