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:
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 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 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>
I have this html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<meta name="description" content="" />
<meta name="author" content="Salvatore Mazzarino" />
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
<!-- jquery mobile scripts -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile- 1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<!-- my own style sheet -->
<link rel="stylesheet" href="./assets/css/style.css" type="text/css" />
<!-- google maps api script -->
<script type="text/javascript" src="./includes/js_map.js"></script>
<script src="http://maps.google.com/maps/api/jssensor=false"></script>
</head>
<body>
<div data-role = "page" id = "map-page">
<div data-role = "header">
<h1>Your position</h1>
</div>
<div data-role = "content" id = "map-canvas">
<!-- here the map -->
</div>
</div>
</body>
</html>
and this js file :
$( "#map-page" ).live( "pageinit", function()
{
// Default to Via Messina,Catania,IT when no geolocation support
var defaultLatLng = new google.maps.LatLng(37.530073, 15.112151);
if ( navigator.geolocation )
{
function success(pos)
{
// Location found, show coordinates on map
drawMap(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
}
function fail()
{
drawMap(defaultLatLng); // Show default map
}
// Find users current position
navigator.geolocation.getCurrentPosition(success, fail, {enableHighAccuracy:true, timeout: 6000, maximumAge: 500000});
}
else
{
drawMap(defaultLatLng); // No geolocation support
}
function drawMap(latlng) {
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(
document.getElementById("map-canvas"), myOptions);
// Add an overlay to the map of current lat/lng
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: "Greetings!"
});
}
});
I'm trying to obtain my position.in the html page a mas should appears but nothing apper neither the default map. why? any idea?
Without seeing your live code, it's hard to see if any of the CSS might be causing display issues. However, there are at least two things that need to be fixed:
Your call to the Google Maps API needs to be moved above your own JS file (in the head of the document).
You have an error in your URL that references the Maps API JS file. Change it from:
http://maps.google.com/maps/api/jssensor=false
to:
http://maps.google.com/maps/api/js?sensor=false
I was able to get the map to load and show a marker in the middle of the map.
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;
}
}