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!");
}
Related
For the first time I'm trying to incorporate the Google Maps API into a website and it's not working at all. I can't tell if there's something wrong with the code and I'd like to rule that out before trying to create another API Key
I've moved the tag around and tried different styling approaches, but it just doesn't show anything.
<!DOCTYPE html>
<html>
<head>
<script>
function initMap() {
var location = { lat: -30.0327268, lng: -51.2095745 };
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 4,
center: location
});
}
</script>
<script async defer
src="https://maps.googleapis/maps/api/js?key=AIzaSyBDXh6FfycwxdCaHUbrCWkswSarA77kowY&callback=initMap">
</script>
<title>
</title>
<style>
* {
margin: 0;
padding: 0;
}
#map {
height: 500px;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
</html>
The URL in the script that you are using is incorrect.
You are using: https://maps.googleapis/maps/api/js?key=AIzaSyBDXh6FfycwxdCaHUbrCWkswSarA77kowY&callback=initMap
The correct URL: https://maps.googleapis.com/maps/api/js?key=AIzaSyBDXh6FfycwxdCaHUbrCWkswSarA77kowY&callback=initMap
Hope this helps!
The below line was not added correctly,
It should be in this form
Below is the updated code in which map is working fine..
<!DOCTYPE html>
<html>
<head>
<script>
function initMap() {
var location = { lat: -30.0327268, lng: -51.2095745 };
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 4,
center: location
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBDXh6FfycwxdCaHUbrCWkswSarA77kowY&callback=initMap"
async defer></script>
<title>
</title>
<style>
* {
margin: 0;
padding: 0;
}
#map {
height: 500px;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
</html>
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 ...
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);
});
This should be pretty basic but I cant really find the answer to it:
I try to implement a Google map, using the Google API for business and got a working client ID / key.
Using the standard examples from for the documentation (https://developers.google.com/maps/documentation/javascript/tutorial) its only possible to get a blank map.
This is the simple test code that show a blank map:
<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>
I need to get the correct map with all the info and places that its containing.
All the examples I find are for getting a blank map, or adding stuff to it.
Thanks,
/b
Your supplied JavaScript works for me. Have you included the required div in your webpage?
<div id="map-canvas"/>
Plus the div may need to be styled, as the map may be there but with 0px height and 0px width (hence making it impossible to see), the following CSS will make your div fullscreen:
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
So, overall, you should have this:
<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=API_KEY">
</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>
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);
}
});