I'm working on a project which displays a bunch of markers on Google Maps and allows the user to search and get relevant information about the locations. I haven't disabled Street View, as I'd like to give the user the possibility to see the building from the outside.
For certain locations, however, when going into Street View mode, Google Maps immediately shows the indoor of an adjacent business. What I'd like to have is the ability to completely disable indoor view on my application.
Is anyone aware of a certain setting in the Google Maps API that would do that or perhaps a clever hack to solve the issue? I haven't honestly found anything.
In the experimental version (currently v=3.21) there is now a StreetViewSource that can be provided in a StreetViewLocationRequest
StreetViewSource class
google.maps.StreetViewSource class
Identifiers to limit Street View searches to selected sources.
Constant
DEFAULT Uses the default sources of Street View, searches will not be limited to specific sources.
OUTDOOR Limits Street View searches to outdoor collections only.
example of request without source: google.maps.StreetViewSource.OUTDOOR (fiddle)
example of request with source: google.maps.StreetViewSource.OUTDOOR (fiddle)
code snippet (with source: OUTDOOR):
/*
* Click the map to set a new location for the Street View camera.
*/
var map;
var panorama;
function initMap() {
var myLatlng = new google.maps.LatLng(51.343364, 12.378962999999999);
var sv = new google.maps.StreetViewService();
panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'));
// Set up the map.
map = new google.maps.Map(document.getElementById('map'), {
center: myLatlng,
zoom: 16,
streetViewControl: false
});
// Set the initial Street View camera to the center of the map
sv.getPanorama({
location: myLatlng,
radius: 50,
source: google.maps.StreetViewSource.OUTDOOR
}, processSVData);
// Look for a nearby Street View panorama when the map is clicked.
// getPanoramaByLocation will return the nearest pano when the
// given radius is 50 meters or less.
map.addListener('click', function(event) {
sv.getPanorama({
location: event.latLng,
radius: 50
}, processSVData);
});
}
function processSVData(data, status) {
if (status === google.maps.StreetViewStatus.OK) {
var marker = new google.maps.Marker({
position: data.location.latLng,
map: map,
title: data.location.description
});
panorama.setPano(data.location.pano);
panorama.setPov({
heading: 270,
pitch: 0
});
panorama.setVisible(true);
marker.addListener('click', function() {
var markerPanoID = data.location.pano;
// Set the Pano to use the passed panoID.
panorama.setPano(markerPanoID);
panorama.setPov({
heading: 270,
pitch: 0
});
panorama.setVisible(true);
});
} else {
console.error('Street View data not found for this location.');
}
}
google.maps.event.addDomListener(window, 'load', initMap);
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map" style="width: 45%; height: 100%;float:left"></div>
<div id="pano" style="width: 45%; height: 100%;float:left"></div>
Related
I want to create boundaries of a zipcode using google map places api but unable to find the boundary coordinates.
I noticed when I search a zipcode on maps.google.com it shows a dotted boundary of that particular zipcode. How can I achieve this using google services?
You can do it with DDS (Data-driven styling) if zipcode is available in the country/countries you are after (check coverage).
Note this feature is still in Preview (Pre-GA) at this time.
Below is an example drawing the boundaries of a random postal code in Italy (10123 Torino, Italy).
To reproduce, you need to create a new map ID and map style in your Google Maps Platform console and select the appropriate feature layer(s). All information is here.
let map;
let featureLayer;
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: { lat: 45.064335, lng: 7.688176 },
zoom: 13,
mapId: "8ec1ff859561face", // You need to create your own map ID
});
featureLayer = map.getFeatureLayer("POSTAL_CODE");
// Define the styling options
const featureStyleOptions = {
strokeColor: "#00FF00",
strokeOpacity: 1,
strokeWeight: 1,
fillColor: '#519400',
fillOpacity: 1,
};
// Apply the style to a single boundary.
featureLayer.style = (options) => {
if (options.feature.placeId == "ChIJ_7qz12VtiEcRcKS3k4DmBRw") {
// Above Place ID is zipcode 10123 Torino, Italy
return featureStyleOptions;
}
};
}
#map {
height: 180px;
}
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&v=beta" defer></script>
I wanna know locations (Latitude and Longitude) of google street view images around a specific location. How do i do ? (google maps api, javascript, URL)
Check this link out for geo locationshould send you in the right direction. It works on the persons IP address, so if their IP is masked or re-routed, you will not get ACCURATE longitude and latitude, but the location of their ISP
From the documentation (emphasis mine):
Directly Accessing Street View Data
You may wish to programmatically determine the availability of Street View data, or return information about particular panoramas, without requiring direct manipulation of a map/panorama. You may do so using the StreetViewService object, which provides an interface to the data stored in Google's Street View service.
You may initiate two types of requests to the StreetViewService:
<snip>
Request with a StreetViewLocationRequest this searches for panorama data over a given area, given a passed LatLng.
code snippet (copied from this example in the documentation, click on the map to return the nearest StreetView panorama)
/*
* Click the map to set a new location for the Street View camera.
*/
var map;
var panorama;
function initMap() {
var berkeley = {
lat: 37.869085,
lng: -122.254775
};
var sv = new google.maps.StreetViewService();
panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'));
// Set up the map.
map = new google.maps.Map(document.getElementById('map'), {
center: berkeley,
zoom: 16,
streetViewControl: false
});
// Set the initial Street View camera to the center of the map
sv.getPanorama({
location: berkeley,
radius: 50
}, processSVData);
// Look for a nearby Street View panorama when the map is clicked.
// getPanoramaByLocation will return the nearest pano when the
// given radius is 50 meters or less.
map.addListener('click', function(event) {
sv.getPanorama({
location: event.latLng,
radius: 50
}, processSVData);
});
}
function processSVData(data, status) {
if (status === google.maps.StreetViewStatus.OK) {
var marker = new google.maps.Marker({
position: data.location.latLng,
map: map,
title: data.location.description
});
panorama.setPano(data.location.pano);
panorama.setPov({
heading: 270,
pitch: 0
});
panorama.setVisible(true);
marker.addListener('click', function() {
var markerPanoID = data.location.pano;
// Set the Pano to use the passed panoID.
panorama.setPano(markerPanoID);
panorama.setPov({
heading: 270,
pitch: 0
});
panorama.setVisible(true);
});
} else {
console.error('Street View data not found for this location.');
}
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
<div id="map" style="width: 45%; height: 100%;float:left"></div>
<div id="pano" style="width: 45%; height: 100%;float:left"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
I am trying to allow users to save their markers lat and lng to their google account. It works fine for the first marker, but then stops working for subsequent markers.
For example load the fiddle bellow then
1. click the left marker (saving is allowed)
2. click the marker on the right (saving is NOT allowed)
3. reload the fiddle(refresh the page)
4. this time click the RIGHT marker (saving is allowed)
5. click the marker on the left (saving is NOT allowed)
https://jsfiddle.net/74zfffj3/
How to I allow all markers to be saved to user google account, and not just the first marker clicked?
I can enable save on multiple markers/infowindows if I provide a placeId and a location for each marker.
var marker = new google.maps.Marker({
map: map,
// Define the place with a location, and a query string.
place: {
location: {lat: 44.4948543, lng: -81.3695635},
placeId: "ChIJydDgDrzPKYgR5ME3zdbglZ8",
},
// Attributions help users find your site again.
attribution: {
source: 'Google Maps JavaScript API',
webUrl: 'https://developers.google.com/maps/'
}
});
var marker2 = new google.maps.Marker({
map: map,
// Define the place with a location, and a query string.
place: {
location: {lat: 44.373129, lng: -81.438245},
placeId: "ChIJaW-levq1KYgR5VDN9cpgH1c",
},
// Attributions help users find your site again.
attribution: {
source: 'Google Maps JavaScript API',
webUrl: 'https://developers.google.com/maps/'
}
});
proof of concept fiddle
code snippet (doesn't seem to work with "signed_in=true"):
function initMap() {
// When you add a marker using a Place instead of a location, the Maps
// API will automatically add a 'Save to Google Maps' link to any info
// window associated with that marker.
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: {
lat: 44.429734680509064,
lng: -81.52421951293945
}
});
var marker = new google.maps.Marker({
map: map,
// Define the place with a location, and a query string.
place: {
location: {
lat: 44.4948543,
lng: -81.3695635
},
placeId: "ChIJydDgDrzPKYgR5ME3zdbglZ8",
},
// Attributions help users find your site again.
attribution: {
source: 'Google Maps JavaScript API',
webUrl: 'https://developers.google.com/maps/'
}
});
var marker2 = new google.maps.Marker({
map: map,
// Define the place with a location, and a query string.
place: {
location: {
lat: 44.373129,
lng: -81.438245
},
placeId: "ChIJaW-levq1KYgR5VDN9cpgH1c",
},
// Attributions help users find your site again.
attribution: {
source: 'Google Maps JavaScript API',
webUrl: 'https://developers.google.com/maps/'
}
});
// Construct a new InfoWindow.
var infoWindow1 = new google.maps.InfoWindow({
content: 'Google Sydney'
});
var infoWindow2 = new google.maps.InfoWindow({
content: 'Google Sydney'
});
// Opens the InfoWindow when marker is clicked.
marker.addListener('click', function() {
infoWindow1.setContent("Southampton, CA");
infoWindow1.open(map, marker);
});
marker2.addListener('click', function() {
infoWindow2.setContent("North Bruce, CA");
infoWindow2.open(map, marker2);
});
}
google.maps.event.addDomListener(window, 'load', initMap);
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js?signed_in=true"></script>
<div id="map"></div>
I am attempting to write some code to display google maps in satellite view inside of JQuery Mobile/HTML. So far to no success, seems all the example code is out of date or not functioning. What i'm looking for is displaying a google map satellite image, getting two X/Y coordinates from code (these will actually be coming from a MySQL database query), and placing a marker on the map at that location. The code I have is below. When I run the full website code I can navigate to the maps page and see the header and back button but the map is not displaying.
Note this is called when a button is pressed on the main page.
HTML:
<div data-role="page" id="map-page" data-url="map-page" data-add-back-btn="true">
<div data-role="header" data-theme="a">
<h1>Maps</h1>
</div>
<div role="main" class="ui-content" id="map-canvas">
<!-- map loads here... -->
</div>
</div>
JavaScript:
$( document ).on( "pageinit", "#map-page", function() {
var defaultLatLng = new google.maps.LatLng(33.061414, -83.226385); // Default to Lockerly Arb when no geolocation support
if ( navigator.geolocation )
{
function success(pos)
{
// Location found, show map with these coordinates
drawMap(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
}
function fail(error)
{
drawMap(defaultLatLng); // Failed to find location, show default map
}
// Find the users current position. Cache the location for 5 minutes, timeout after 6 seconds
navigator.geolocation.getCurrentPosition(success, fail, {maximumAge: 500000, enableHighAccuracy:true, timeout: 6000});
}
else
{
drawMap(defaultLatLng); //No geolocation support, show default map
}
function drawMap(latlng)
{
var myOptions =
{
zoom: 18,
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: "Lockerly Arboretum!"
});
}
});
CSS:
`//Google Maps CSS
#map-page, #map-canvas
{
width: 100%; height: 100%; padding: 0;
}`
I'm making a web application that uses google maps to help with solar deployment. In essence, I'm loading a google map in full screen and overlaying KML layers using this code:
window.solarLayer = new google.maps.KmlLayer({
url: 'somelink'
});
window.solarLayer.setMap(window.map);
Another feature of this application is that a user is able to click anywhere in the map, and using the latitude and logitude at the click point, it would return solar data to the user.
This all works fine by using a click event handler as such:
google.maps.event.addListener(map, 'click', function(event) {
var latitude = event.latLng.lat();
var longitude = event.latLng.lng();
console.log( latitude + ', ' + longitude );
});
However, the portion of the map that has the KML layer only registers clicks for the layer and does not access the click event I created...
Does anyone know how to disable click events for KML layers? or how to make my event listener supersede that of the KML layer?
I have tried getting the lat and long by using a click event on the KML layer as well as the map but that only yields a static lat long of where that layer is positioned, not where the user actually clicks.
Thanks for any help in advance!
Set the clickable option of the KmlLayer to false.
from the KmlLayerOptions documentation:
clickable| Type: boolean
If true, the layer receives mouse events. Default value is true.
code snippet:
var map;
function initialize() {
map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
window.solarLayer = new google.maps.KmlLayer({
url: 'http://googlemaps.github.io/js-v2-samples/ggeoxml/cta.kml',
clickable: false
});
window.solarLayer.setMap(window.map);
google.maps.event.addListener(map, 'click', function(event) {
var latitude = event.latLng.lat();
var longitude = event.latLng.lng();
document.getElementById('coords').innerHTML = event.latLng.toUrlValue(6);
console.log(latitude + ', ' + longitude);
});
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="coords"></div>
<div id="map_canvas"></div>