First of all I am not a programmer / coder, I'm a total noob HTML / JavaScript wise. So if possible please keep any answers simple ;-)
I'm working on a sort of hobby-art project. The goal is to compare Streetview panos of different dates and to create a photo gallery of these. I want to have a Streetview pano that is as clear as possible, so no UI.
What I have now:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Street View controls</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initPano() {
// Note: constructed panorama objects have visible: true
// set by default.
var panorama = new google.maps.StreetViewPanorama(
document.getElementById('map'), {
position: {lat: 40.717215, lng: -74.0061689},
addressControlOptions: {
position: google.maps.ControlPosition.BOTTOM_CENTER
},
linksControl: false,
addressControl: false,
panControl: false,
enableCloseButton: false
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAA3Rw1Ei8m79RwB_oapYe4rK5LgAbE7cg&signed_in=true&callback=initPano">
</script>
</body>
</html>
This HTML produces a nice clear Streetview pano without any UI. But I now would like to pull up a SV pano from a specific date.
I found this:
https://github.com/amenadiel/google-maps-documentation/blob/master/docs/StreetViewPanoramaData.md
and
https://developers.google.com/maps/documentation/javascript/reference#StreetViewPanoramaData
I have no idea how / where to put this piece of code in my HTML.
- Can you show me where it needs to go?
- Perhaps you can create a HTML template where I only have to specify the latlongs / sv pano date?
You can not select a specific date.
The StreetViewPanoramaData object REPRESENTS the data of Street View that is matched with panorama ID.
It means:
copyright : Who copyright for this photo has.
imageDate : When this photo was taken.
links : What the next pano IDs are.
location : Where this is.
tiles: Tile data.
The StreetViewPanoramaData is used for creating custom street view typically.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
I am looking for a way to display a map with position through latitude and longitude.
I use the following code:
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<style type="text/css">
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script>
const lat = #json($latitud);
const lon = #json($longitud);
let map;
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: { lat: lat, lng: lon },
zoom: 8,
});
}
</script>
</head>
<body>
<div id="map"></div>
<!-- Async script executes immediately and must be after any DOM elements used in callback. -->
<script
src="https://maps.googleapis.com/maps/api/js?key=MICLAVE&callback=initMap&libraries=&v=weekly"
async
></script>
</body>
</html>
From the search box I get the latitude and longitude as follows:
Livewire.emit ('getLatitude', place.geometry ['location']. Lat ());
Livewire.emit ('getLength', place.geometry ['location']. Lng ());
Latitude and longitude I get it through Google SearchBox I save the values and pass them in the variables:
const lat = #json($latitud);
const lon = #json($longitud);
These values have already been verified and they are fine.
The problem is that it takes me to the place but in an enlarged way, for example if I want to show a neighborhood, it shows me the entire city.
I already looked everywhere and I can't find the reason.
I suggest changing zoom: 8 to a larger number, like zoom: 12 or bigger.
It sounds like your map is centered correctly, but showing too large of an area. The zoom parameter can help adjust that!
As per the comment above - one way in which you could ensure that you view as small a region as you need would be to add an invisible circle to the map at the same location specified as the map centerpoint and use the bounds of the circle to apply to the map.. ie map.fitBounds( circle.getBounds() )
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<style type="text/css">
#map {
height:100vh;
width:100%;
}
html,
body {
height: 100vh;
margin: 0;
padding: 0;
}
</style>
<script>
/*
const lat = #json($latitud);
const lon = #json($longitud);
*/
const lat = -34.606247;
const lon = -58.402056;
let map;
let radius=100; // adjust this to change apparent zoom level
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: { lat:lat, lng:lon },
zoom: 8,
});
let circle=new google.maps.Circle({
map:map,
center:map.getCenter(),
radius:radius,
visible:false
});
map.fitBounds( circle.getBounds() );
}
</script>
</head>
<body>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=apikey&callback=initMap" async></script>
</body>
</html>
Once the map has been zoomed-in you could remove the circle if you wish - circle.setMap(null); but will not make much difference either way.
A JSFiddle to illustrate this in action
I need to be able to detect when a user clicks in a Google Maps info window to enter Street View. This can happen after the user clicks a marker on a map such as one for a restaurant or whatever. They click on the marker on the map and then an info window comes up in which they can click to enter Street View.
Also, does that open Street View in a new object on top of the map or does it open the Street View within the map object? How is one supposed to handle this non-standard entry into Street View? I note that the user can get back to the map by clicking a right arrow at top left of the street view. I also note that after the user enters Street View this way, that the panorama.getVisible() property is false.
Have you tried the 'visible_changed' event? Here is a sample that works for me using the getVisible().
<!DOCTYPE html>
<html>
<head>
<title>Catch panorama change</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
html, body {height: 100%; margin: 0; padding: 0;}
#map {height: 100%;}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
var panorama;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 49.288, lng: -123.11},
zoom: 17
});
panorama = map.getStreetView();
panorama.addListener('visible_changed', function() {
if (panorama.getVisible()) {
console.log('Entering streetview');
} else {
console.log('Leaving streetview');
}
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.20&key=YOUR_API_KEY&callback=initMap" async defer></script>
</body>
</html>
Maybe your project is more complex and needs more adjustment. But otherwise in the new API (ver > 3.22) the infowindow does not include the streetview.
I am trying to reproduce the esri/dijit/Search tutorial that is new in the 3.13 release of the ArcGIS API for JavaScript with one of my own layers.
Esri Sample
<!DOCTYPE html>
<html><link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<title>ArcGIS API for JavaScript | Search widget with multiple sources</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css">
<style>
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#search {
display: block;
position: absolute;
z-index: 2;
top: 20px;
left: 74px;
}
</style>
<script src="http://js.arcgis.com/3.13/"></script>
<script>
require([
"esri/map", "esri/dijit/Search", "esri/layers/FeatureLayer", "esri/InfoTemplate", "esri/SpatialReference", "esri/geometry/Extent", "dojo/domReady!"
], function (Map, Search, FeatureLayer, InfoTemplate, SpatialReference, Extent) {
var map = new Map("map", {
basemap: "gray",
center: [-97, 38], // lon, lat
zoom: 5
});
var s = new Search({
enableButtonMode: true, //this enables the search widget to display as a single button
enableLabel: false,
enableInfoWindow: true,
showInfoWindowOnSelect: false,
map: map
}, "search");
var sources = [];
sources.push({
featureLayer: new FeatureLayer("http://maps.eastriding.gov.uk/arcgis/rest/services/GISIntranet/MapServer/0"),
searchFields: ["ADDRESS_WITHOUT_BREAKS"],
displayField: "ADDRESS_WITHOUT_BREAKS",
exactMatch: false,
name: "ADDRESS_WITHOUT_BREAKS",
outFields: ["*"],
placeholder: "ADDRESS_WITHOUT_BREAKS",
maxResults: 6,
maxSuggestions: 6,
enableSuggestions: true,
minCharacters: 0
});
//Set the sources above to the search widget
s.set("sources", sources);
s.startup();
});
</script>
</head>
<body>
<div id="search"></div>
<div id="map"></div>
</body>
</html>
I am having with the suggestions part if it. If I use the default source for this it will for fine. I will enter the first few character in the textbox and it will produce a number of suggestion that I can choose from. When I use my own source (as above) there is no suggestions that appear. I have check for errors and there are none. I have also checked the network in my Dev tools and the suggestions part is not firing off a query like the default source does.
I am wondering if I need something special setting up on my layer or should it just work
Thanks
From the API documentation
Working with suggestions is only available if working with a 10.3 geocoding service that has the suggest capability loaded or a 10.3 feature layer that supports pagination, i.e. supportsPagination = true.
Looking at your server you are running 10.2.2 so you need to move to 10.3 and make sure you allow pagination for your service in order to get this capability.
So I have this:
<iframe src="https://mapsengine.google.com/map/embed?mid=zkXLRR9SQKDQ.kfLF9HxBaALo&z=15" width="100%" height="100%"></iframe>
I managed to find the zoom code on here, however I couldn't find a way to remove the grey bar that appears at the top of the map with my google account stuff.
A screenshot can be found here.
Is there a way to remove this using a URL parameter?
I don't think it's possible to remove the bar. Instead you could use the Google Maps Javascript API. It's fairly easy to use and gives you much more control. Here's an example that loads your location with the right zoom level: plnkr.co.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html,
body,
#map-canvas {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js">
</script>
<script type="text/javascript">
function initialize() {
var latLng = new google.maps.LatLng(51.4893169, -2.1182648);
var mapOptions = {
center: latLng,
zoom: 15,
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var image = 'http://icons.iconarchive.com/icons/visualpharm/must-have/256/Check-icon.png';
var marker = new google.maps.Marker({
position: latLng,
map: map,
icon: image
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
Documentation for the API.
If you need a specific style for your map, you can use the Styled Maps Wizard.
Depending on where you put your map on your page, it might conflict with scrolling. If that is the case, then set the scrollwheel option to false. That allows you to scroll over the map without it highjacking the scroll event for it's zoom functionality. I've updated the plnkr to use scrollwheel: false.
I am following the the steps given in this link
https://developers.google.com/maps/documentation/javascript/tutorial
I am getting error after load can you tell me where I wrong ? I already generate key ?
fiddle
http://jsfiddle.net/p3kcztvb/1/
<!DOCTYPE html>
<html>
<head>
<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>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyATC35pv00Ga3hRxP4t5W7NtM9as48PGVQs">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"/>
</body>
</html>
Following error explain itself.
"provided key is not a valid Google API Key,"
Generate correct key
To create your API key:
Visit the APIs Console at https://code.google.com/apis/console and log in with your Google Account.
Click the Services link from the left-hand menu.
Activate the Google Maps JavaScript API v3 service.
Click the API Access link from the left-hand menu. Your API key is available from the API Access page, in the Simple API Access section. Maps API applications use the Key for browser apps.
here
Markup Code as follow:-
// Adds a marker with popup window information
var marker1Latlng = new google.maps.LatLng(35.65654,-106);
var contentString1 = 'I love New Mexico! More about the Land of Enchantment';
var infowindow = new google.maps.InfoWindow({
content: contentString1
});
var marker1 = new google.maps.Marker({
position: marker1Latlng,
map: map,
title: 'New Mexico'
});
google.maps.event.addListener(marker1, 'click', function() {
infowindow.open(map,marker1);
});
//End of Add Marker code
Hi Kanika in Fiddle it seems like the API key you are using is not a valid key. You might need to regenerate the API key for Google Maps API Engine from your Google Console.
Change this code lines - basically you don't need a api key in here
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyATC35pv00Ga3hRxP4t5W7NtM9as48PGVQs">
</script>
Replace with
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?v=3.exp">
</script>