I'm building a web application using Google Street View andh HTML / Javascript.
I'd like to enable / disable the arrows controls that are on the images.
I can't show examples to do it ...
Suggestions / examples?
I've solved in this way ...
<html>
<head>
<meta charset="utf-8">
<title>test Street View</title>
<style>
html, body {
min-height: 100%;
min-width: 100%;
margin: 0;
padding: 0;
}
table {
width: 95vw;
height: 95vh;
}
td {
width: 50%;
height: 50%;
}
</style>
</head>
<body>
<div id="maps-images">
<center>
<table border=1>
<!-- first row -->
<tr id="row1">
<td id="g_map">
<div id="google_map" style="width:100%;height:100%"></div>
</td>
<td id="google-street-view">
<div id="google-street-view_images" style="width:100%;height:100%"></div>
</td>
</tr>
</table>
</center>
</div>
<script>
var panorama;
function initialize() {
//### The original pegman position ...
var pegman_position = {lat: 42.628386111111126, lng: 13.291408333333237};
var marker;
//### Add Google Map ...
var google_map = new google.maps.Map(document.getElementById('google_map'), {
center: pegman_position,
zoom: 16
});
//### Add Google Street View ...
window.panorama = new google.maps.StreetViewPanorama(
document.getElementById('google-street-view_images'), {
position: pegman_position,
pov: {
heading: 34,
pitch: 10
}
});
google_map.setStreetView(window.panorama);
//### Modify Street View controls ...
var panoOptions = {
scrollwheel: false,
disableDefaultUI: true,
clickToGo: false
};
window.panorama.setOptions(panoOptions);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=<PUT_YOUR_APIKEY_HERE&callback=initialize">
</script>
</body>
</html>
In this section I've configured the options ...
//### Modify Street View controls ...
var panoOptions = {
scrollwheel: false,
disableDefaultUI: true,
clickToGo: false
};
window.panorama.setOptions(panoOptions);
Now I'm able to manage how to enable / disable controls on Street View images ...
Related
I've this simple HTML / Javascript code that use Google Maps and Google Street View ...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test Street View</title>
<style>
html, body {
min-height: 100%;
min-width: 100%;
margin: 0;
padding: 0;
}
table {
width: 95vw;
height: 95vh;
}
td {
width: 50%;
height: 50%;
}
</style>
</head>
<body>
<div id="maps-images">
<center>
<table border=1>
<!-- first row -->
<tr id="row1">
<td id="g_map">
<div id="google_map" style="width:100%;height:100%"></div>
</td>
<td id="google-street-view">
<div id="google-street-view_images" style="width:100%;height:100%"></div>
</td>
</tr>
</table>
</center>
</div>
<script>
var panorama;
function initialize() {
//### The original pegman position ...
var pegman_position = {lat: 42.628386111111126, lng: 13.291408333333237};
var marker;
//### Add Google Map ...
var google_map = new google.maps.Map(document.getElementById('google_map'), {
center: pegman_position,
zoom: 16
});
//### Add Google Street View ...
window.panorama = new google.maps.StreetViewPanorama(
document.getElementById('google-street-view_images'), {
position: pegman_position,
pov: {
heading: 34,
pitch: 10
}
});
google_map.setStreetView(window.panorama);
//### Modify Street View controls ...
var panoOptions = {
scrollwheel: true,
disableDefaultUI: false,
clickToGo: true
};
window.panorama.setOptions(panoOptions);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=<PUT_YOUR_API_KEY_HERE>&callback=initialize">
</script>
</body>
</html>
I'd like to intercept when the user click on Google Street View Panorama but I can't find a click event to manage this situation in the official documentation. Note I'm not interested in position_changed event ....
Any example / suggestion / workaround?
I've solved in this way as workaround ..
var google_street_view_images_div = document.getElementById("google-street-view_images"); //grab the element
google_street_view_images_div.onclick = function() {
alert("Click!");
}
I'm trying to add a marker to a MapBox-GL-JS map in a HTML / Javascript map.
I've tried to build a little sample: here you are my code
<html>
<head>
<meta charset="utf-8">
<title>Test MapBox</title>
<!-- *** References for MapBox GL JS ... -->
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.37.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.37.0/mapbox-gl.css' rel='stylesheet' />
<style>
html, body {
min-height: 100%;
min-width: 100%;
margin: 0;
padding: 0;
}
table {
width: 95vw;
height: 95vh;
}
td {
width: 50%;
height: 50%;
}
</style>
</head>
<body>
<div id="maps-images">
<center>
<table border=1>
<!-- second row -->
<tr id="row2">
<td id="osm">
<div id="osm_map" style="width:100%;height:100%"></div>
</td>
</tr>
</table>
</center>
</div>
<script>
mapboxgl.accessToken = '<PUT_YOUR_MAPBOX_KEY_HERE';
// *** Create and configure the map ...
var osm_map = new mapboxgl.Map({
container: 'osm_map', // container id
style: 'mapbox://styles/mapbox/bright-v9', //stylesheet location
center: [13.291408333333237,42.628386111111126], // starting position
zoom: 16 // starting zoom
});
// *** Add zoom and rotation controls to the map ...
osm_map.addControl(new mapboxgl.NavigationControl());
marker = new mapboxgl.Marker()
.setLngLat([13.291408333333237, 42.628386111111126])
.addTo(osm_map);
</script>
</body>
</html>
The code works fine but no marker is shown on my map....
Suggestions / examples?
Markers don't have any default styling. You need to create an HTML element and pass it. See the example here:
var el = document.createElement('div');
el.className = 'marker';
el.style.backgroundImage = 'url(https://placekitten.com/g/' + marker.properties.iconSize.join('/') + '/)';
el.style.width = marker.properties.iconSize[0] + 'px';
el.style.height = marker.properties.iconSize[1] + 'px';
el.addEventListener('click', function() {
window.alert(marker.properties.message);
});
// add marker to map
new mapboxgl.Marker(el, {offset: [-marker.properties.iconSize[0] / 2, -marker.properties.iconSize[1] / 2]})
.setLngLat(marker.geometry.coordinates)
.addTo(map);
});
I have a page where I am loading google maps. I use getCurrentPosition over http and even I receive a warning from google api. The problem is that it breaks also the javascript and that ruins everything. The code was working for quite some time but the last week things broke.
Below is the html and script. You can add it in html and run it and see (tried with stackoverflow but had some issues with the script)
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
</head>
<body>
<header class="desktop">
</header>
<div id="st-container" class="st-container">
<div class="st-pusher">
<div class="st-content">
<div class="st-content-inner">
<div class="logo-mobile">
</div>
<section class="map-sections">
<div style="position: absolute; z-index: 1000; width: 100%; margin-top: 30px;">
<div class="row">
<div class="large-12 columns">
<div class="filter clearfix">
<input type="text" id="search-field" placeholder="Search place">
<span>eller...</span>
Search near you
</div>
</div>
</div>
</div>
<div id="google_canvas"></div>
<script src="http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
<script type="text/javascript">
function showMap(userPos) {
if (!!navigator.geolocation) {
var map;
if (userPos == 'true') {
var mapOptions = {
zoom: 12,
enableHighAccuracy: true,
mapTypeControl: false,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
}
else {
var mapOptions = {
zoom: 5,
enableHighAccuracy: false,
mapTypeControl: false,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
}
map = new google.maps.Map(document.getElementById('google_canvas'), mapOptions);
navigator.geolocation.getCurrentPosition(function (position) {
var geolocate = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var sectionList = [
['Stockholm', 59.327, 18.067],
['Göteborg', 57.70889, 11.97348]
];
var mapPinUser = '/dist/img/map-pin-user.png';
var mapPinSection = '/dist/img/map-pin-section.png';
// User's position
var marker = new google.maps.Marker({
position: geolocate,
map: map,
icon: mapPinUser,
title: "ok"
});
for (var i = 0; i < sectionList.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(sectionList[i][1], sectionList[i][2]),
map: map,
icon: mapPinSection,
id: i,
animation: google.maps.Animation.DROP,
title: sectionList[i][0]
});
}
if (userPos == 'true') {
map.panTo(geolocate);
}
else {
map.setCenter({ lat: 61.58549, lng: 15.02930 });
}
});
} else {
document.getElementById('google_canvas').innerHTML = 'No Geolocation Support.';
}
}
showMap('false');
</script>
<style>
#google_canvas {
height: 65vh;
}
</style>
</section>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</body>
</html>
getCurrentLocation is only supported over https:// now on Chrome.
There has been a warning in place in the javascript console in Chrome for quite a while, and it was announced a while ago.
reference from your comment
Starting with Chrome 50, Chrome no longer supports obtaining the user’s location using the HTML5 Geolocation API from pages delivered by non-secure connections. This means that the page that’s making the Geolocation API call must be served from a secure context such as HTTPS.
I have an HTML page with a list of buttons representing locations. When any button is clicked, I want a Google Map to appear with that location. Should the map open on a new HTML page? (because the map should take up the full page), or is it possible to display the map on the same page?
EDIT - OK, I want to open it in another HTML file. I have an external JS file which has the following Map code:
function initialize(lat, lng) {
var mapOptions = {
center: {lat: parseFloat(lat), lng: parseFloat(lng)},
zoom: 8,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize(-34.397, 150.644));
My external HTML file is given below:
<html>
<head>
<style type="text/css">
html, body, #map-canvas { height: 100%; margin: 0; padding: 0;}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="script.js" ></script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
But its not working. The external JS file cannot locate "map-canvas", it seems. Can anyone tell me how to fix this? (script.js is the external JS file)
I worked around your question try this :
<!DOCTYPE html>
<html>
<head>
<style>
#map-canvas {
width: 500px;
height: 400px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript"></script>
</head>
<body>
<div>
Show Map1
</div>
<div>
Show Map2
</div>
<div>
<a href="#" class="btn cta map-trigger" data-lat="41.8911684" data-lng="12.707724100000019" targe> Show Map3 </a>
</div>
<script>
var render_map = function( lat, lng, title ) {
var mapCanvas = document.getElementById('map-canvas');
// options
var args = {
zoom : 16,
center : new google.maps.LatLng(lat, lng),
mapTypeId : google.maps.MapTypeId.ROADMAP
};
// create map
var map = new google.maps.Map( mapCanvas, args);
// create marker
var marker = new google.maps.Marker({
position: args.center,
map: map,
title: title
});
toggleMap();
}
var toggleMap = function(){
if ($('body').hasClass('-show-map')) {
mapHide();
} else {
mapShow();
};
}
$('.map-trigger').on('click', function(event) {
event.preventDefault();
var lat = $(this).data('lat');
var lng = $(this).data('lng');
render_map(lat, lng);
});
</script>
<div id="map-canvas"></div>
</body>
</html>
In this google map sample: http://code.google.com/apis/maps/documentation/javascript/examples/streetview-simple.html
If the user dropped the little guy far away in the middle of the ocean for example, it disappears.
But in the main google map website http://maps.google.com/ If you made it show the street view, and the user dragged the guy away it get back automatically to the previous point.
What is missed in the first example to make it behave the same as the google map website?
here is the code of the sample:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example: Street View Layer</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/standard.css" rel="stylesheet" type="text/css" />
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
var fenway = new google.maps.LatLng(42.345573,-71.098326);
var mapOptions = {
center: fenway,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(
document.getElementById("map_canvas"), mapOptions);
var panoramaOptions = {
position: fenway,
pov: {
heading: 34,
pitch: 10,
zoom: 1
}
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"),panoramaOptions);
map.setStreetView(panorama);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 400px; height: 300px"></div>
<div id="pano" style="position:absolute; left:410px; top: 8px; width: 400px; height: 300px;"></div>
</body>
</html>
To do this, add an event listener to position_changed and use it to store the last (valid) location that pegman was dropped.
google.maps.event.addListener(panorama, 'position_changed', function() {
// Store position
});
And then add an event listener to visibility_changed (which is triggered when pegman is dropped in the ocean) to set him back to the last known location:
google.maps.event.addListener(panorama, 'visible_changed', function() {
if (panorama.getVisible() == false && last_location) {
panorama.setPosition(last_location);
}
});