I am trying to make an app which can take two locations and display the route for it in windows 8 metro..!! the problem I am facing is that loading of GOOGLE MAPS API is not working..!! either synchronously or Asynchronously , I am giving valid API key and going along with the documentation provided and still getting a blank page in Async loading and getting a google is undefined error in sync loading of API.. kindly help
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>geoHelloWorld</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>
<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>
<link href="/maps/documentation/javascript/examples/default.css"
rel="stylesheet" type="text/css">
<script type="text/javascript">
function initialize() {
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'),
myOptions);
}
function loadScript() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize';
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
</head>
<body>
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
I just wrote a tutorial about using the Google Maps API with Windows 8, http://www.creepyed.com/2012/11/how-to-use-the-google-maps-api-on-windows-8/. It has to do with how the script for Google Maps is called in the project and making sure you can get external content.
I was getting similar errors to you. I hope this helps!
Have a great day,
ed
I'm a bit of a newbie myself but I think you need:
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
instead of :
<body
<div id="map_canvas" style="width:100%; height:100%"></div>
Lea.
close your <body> tag!
#LeasMaps,
initialize() calls on callback=? by the google api but he must remove the ()!
script.src = 'https://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize';
Related
I have a KML file I'm using google sites to host. The link is working in my code, because I can see the map as an overlay. But when I put any style in the KML, the page seem to ignore it. I tried to change it to yellow, but I only get the default blue. The KML has polygons with inner and outer boundaries. The code is being views in my editor (Coda 2). The map shows, and it's in the right place, but it's not the right color. Is there a way for me to change the color? see code below:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Coverage Map</title>
<style>
html, body, #map-canvas {
height: 80%;
width: 80%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
function initialize() {
var chicago = new google.maps.LatLng(37.09024, -95.712891);
var mapOptions = {
zoom: 5,
center: chicago,
mapTypeId: google.maps.MapTypeId.HYBRID
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var ctaLayer = new google.maps.KmlLayer({
url: 'https://sites.google.com/site/dmckmls/home/kml/Sprint.kml'
});
ctaLayer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
Any ideas?
I changed the name of the file. I read about that somewhere as well for the change. That's rather annoying on google's parts. Such a powerful tool and they can't update the file because they have to cache it for performance sake. Thanks everyone for the help.
I'd like to display a perspective view of a satellite map.
I used sample code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>45° imagery</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(36.964645, -122.01523),
zoom: 18,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
map.setTilt(45);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
If I change the coordinates of the map for this one: 47.566188, -0.610760, I get several 404 not found which may mean that the perspective view is not avalaible, while it's avalaible in the maps application.
Could you have a explanation of my problem, and eventually a way to solve it?
I have no idea why 45° imagery would be available on Google Maps and not in the API. I have tried with the v3 of the API (not v3.exp) and the same happens for these coords.
But if you want to avoid trying to load unavailable tiles and the 404 errors, you can do a very simple check:
if (map.getTilt()) {
map.setTilt(45);
}
JSFiddle demo
I try to make the tutorial work that geoserver has in its documentation:
http://docs.geoserver.org/stable/en/user/tutorials/georss/georss.html
Since Google maps v2 is deprecated and its keys with it I obtained a v3 API-key via the Google web console and put it in that like this:
<script src="http://maps.google.com/maps?file=api&v=3.x&key=[my key for v3 here]" type="text/javascript"></script>
It shows the map as expected but after a few seconds I get:
Google has disabled use of the Maps API for this application.
and the map is gone.
Could it be, that this tutorial is just severely outdated? So do I need to find a tutorial on using geoserver with Google Maps v3 ?
The way to display RSS layers in the Google Maps API v3 is to use KmlLayer
Example from the referenced documentation:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>GeoRSS Layers</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(49.496675,-102.65625);
var mapOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var georssLayer = new google.maps.KmlLayer({
url: 'http://api.flickr.com/services/feeds/geo/?g=322338#N20&lang=en-us&format=feed-georss'
});
georssLayer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
i know that in google map v3 it was already answered here:
Removing all controls from a google map
my question is on V2.
how to remove the controls from google map v2 (Map, Satellite, Terrain)
such as only the map will be shown as defined in setMapType.
Just make sure that the "setUIToDefault" method is not called.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Google Maps JavaScript API Example: Simple Map</title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=AIzaSyD4iE2xVSpkLLOXoyqT-RuPwURN3ddScAI"
type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
//map.setUIToDefault();
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 500px; height: 300px"></div>
</body>
</html>
Is this documented somewhere that I need to specify a callback in order for the google.maps module to be defined? Or is this a bug.
The following code doesn't load the google maps module:
<!DOCTYPE html>
<html>
<head>
<title>
Google Maps JavaScript API v3 Example: Asynchronous Map Simple
</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript">
function initialize() {
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'),
myOptions);
}
function loadScript() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://maps.googleapis.com/maps/api/js?v=3.6&key=myKey&sensor=false' //adding 'callback=something' gets the maps module to load
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
Edit -- response to answer
To do so, you can inject your own tag in response to a
window.onload event or a function call, but you need to additionally
instruct the Maps JavaScript API bootstrap to delay execution of your
application code until the Maps JavaScript API code is fully loaded.
You may do so using the callback parameter, which takes as an argument
the function to execute upon completing loading the API.
How does that imply that not having a callback will not load any of the api? It says that you can use the callback parameter to execute a function when the code if fully loaded but it doesn't say the code will never load without a callback parameter.
It is documented here: http://code.google.com/apis/maps/documentation/javascript/tutorial.html#asynch