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>
Related
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 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';
I want to make a web application that will get 2 location and their postalcode and show the result on google map. For example, I select 2 cities or a country and show the road map with a colored line according to my points.
Best place to look is the Google Maps API V3 Documentation - I recommend V3 as they don't support V2 anymore
Main documentation: http://code.google.com/apis/maps/documentation/javascript/
Samples: http://code.google.com/apis/maps/documentation/javascript/examples/index.html
Simple directions sample: http://code.google.com/apis/maps/documentation/javascript/examples/directions-simple.html
Basically you need to have the two co-ordinates, although you can use street addresses, and pass that to the API and it goes off to google gets the results and then plots it. Easy as pie!
Save this code as location.html
<!DOCTYPE html>
<html>
<head>
<title>Google Maps JavaScript API v3 Example: Map Geolocation</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<link href="map.css" rel="stylesheet" type="text/css">
<!--
Include the maps javascript with sensor=true because this code is using a
sensor (a GPS locator) to determine the user's location.
See: http://code.google.com/apis/maps/documentation/javascript/basics.html#SpecifyingSensor
-->
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var siberia = new google.maps.LatLng(37.625364,-122.423905);
function initialize() {
var myOptions = {
zoom:19,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var infowindow = new google.maps.InfoWindow({
map: map,
position: siberia,
content: 'Location found using HTML5.'
});
var marker = new google.maps.Marker({
position: siberia,
map: map,
title: "omt"
});
map.setCenter(siberia);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
Save this code as map.css
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map_canvas {
height: 100%;
}
#media print {
html, body {
height: auto;
}
#map_canvas {
height: 650px;
}
}
I'm using the v3 maps JS API google.maps.getPanoramaByLocation to create a link to streetview with lat/lng which looks like: http://maps.google.com/?cbll=52.099659,0.140299&cbp=12,0,,,&layer=c, but I was wondering if anyone knew how to get rid of the large left-hand sidebar that appears in street view by default? I've checked mapki but no dice.
Consider the following example. It uses the getPanoramaByLocation() method, and does not render a left sidebar:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps API v3 - Street View Demo</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
</head>
<body>
<div id="pano" style="width: 400px; height: 300px;"></div>
<script type="text/javascript">
var panorama = new google.maps.StreetViewPanorama(
document.getElementById('pano')
);
var sv = new google.maps.StreetViewService();
sv.getPanoramaByLocation(
new google.maps.LatLng(42.345573,-71.098326),
50,
function (data, status) {
if (status == google.maps.StreetViewStatus.OK) {
panorama.setPano(data.location.pano);
panorama.setPov({ heading: 270, pitch: 0, zoom: 1 });
panorama.setVisible(true);
}
}
);
</script>
</body>
</html>
Screenshot: