Using the Google Maps API on a web page, I'm able to use the keyboard's up/down and right/left arrow keys to pan the map. I want to allow the user to drag/pan the map via the mouse as normal, but want to disable panning from the keyboard arrow presses that is occurring after the map is clicked. How can I do this?
For background, I'm using the arrow keys on the web page for other functionality (to move up and down an HTML list), and don't want the map to move around when the user presses arrow keys.
You can set the keyboardShortcuts option in MapOptions to false to disable keyboard actions on the map
Simple sample JSBin
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
/* 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>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
keyboardShortcuts: false,
gestureHandling: "greedy",
zoom: 8
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap&key=YOUR_KEY"
async defer></script>
</body>
</html>
Related
Is there a way to disable google maps from going to 3d mode when zooming in?
I would like to keep it like this, just zoomed in:
here
But when I zoom in currently, it 3d renders the buildsings:
here
That is the 45-degree imagery in Satellite view. You can set tilt: 0 in the MapOptions when initializing the map to avoid the map using that imagery when zoomed in very close. Here's a simple sample JSBin
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
/* 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>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(37.422009,-122.084302),
tilt: 0,
mapTypeId: "satellite",
zoom: 19
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=initMap"
async defer></script>
</body>
</html>
When I created a simple google map I get map like this
but in https://www.google.com.ua/maps/ map is looking like this
How to get a new design of gmaps?
I guess I need a JSON styles, but can`t find official JSON styles from map.
code
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
/* 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>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer></script>
And here official demo (old design)
https://google-developers.appspot.com/maps/documentation/javascript/examples/full/map-simple
from jsfiddle
You can create your own custom style here https://mapstyle.withgoogle.com/ and export as a JSON file. The tool gives you the opportunity to declare styles to a granular level
Other options are https://snazzymaps.com/ or http://www.mapstylr.com/ to use any of the existing styles or create yours.
I'm using version 4.0 of the ArcGIS API for my maps.
whenever map is loaded, User has to scroll down to see the map. This is the first issue i am facing.
My map is somewhere in the middle of the page so the user has to scroll down to view it.
Then if a certain point was clicked on the map or if a certain area in dragged to zoom in, the pointers the map shows as selection are not the exact points the mouse is pointing at. it points to a location above the mouse pointer.
Here is a sample code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Add the Compass widget to a basic 2D map - 4.0</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.0/esri/css/main.css">
<script src="https://js.arcgis.com/4.0/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/widgets/Compass",
"dojo/domReady!"
],
function(
Map,
MapView,
Compass
) {
var map = new Map({
basemap: "national-geographic"
});
var view = new MapView({
container: "viewDiv",
scale: 500000,
center: [26.26, 39.17],
map: map
});
/********************************
* Create a compass widget object.
*********************************/
var compassWidget = new Compass({
view: view
});
// Add the Compass widget to the top left corner of the view
view.ui.add(compassWidget, "top-left");
});
</script>
</head>
<body>
<!-- add div for test-->
<div style="height:500px;"></div>
<div id="viewDiv"></div>
</body>
</html>
Note:- Same issue exist on arcgsi js api sample too...
https://developers.arcgis.com/javascript/latest/sample-code/sandbox/sandbox.html?sample=get-started-mapview
If you run this code you'll see if you scroll down and drag an area (by holding shift and dragging the mouse) it will drag an area above your selection.
Well, I noticed this is happening whenever user scrolls.
So I suggest either remove scroll bar or reduce the size of your top header container.
For more detail please refer below running code:-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Add the Compass widget to a basic 2D map - 4.0</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.0/esri/css/main.css">
<script src="https://js.arcgis.com/4.0/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/widgets/Compass",
"dojo/domReady!"
],
function(
Map,
MapView,
Compass
) {
var map = new Map({
basemap: "national-geographic"
});
var view = new MapView({
container: "viewDiv",
scale: 500000,
center: [26.26, 39.17],
map: map
});
/********************************
* Create a compass widget object.
*********************************/
var compassWidget = new Compass({
view: view
});
// Add the Compass widget to the top left corner of the view
view.ui.add(compassWidget, "top-left");
});
</script>
</head>
<body>
<!-- add div for test-->
<div style="height:100px;"></div>
<div id="viewDiv"></div>
</body>
</html>
Hoping this will help you :)
I had posted this in one of the ArcGIS forums and got to know this is a bug with 4.0 and will be fixed in 4.1.
I have been looking for a while for a simple way to make a KML/KMZ layer transparent/opaque using the Google Map API version 3. There are plenty of example out there, but there doesn’t seem be a simple example of making a KML layer opaque. I have provided an example below, can someone help me out with this???
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>Example 2</title>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
// ***Initialize the Map Function ***
function initialize() {
var latlng = new google.maps.LatLng(0,0);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var polyLayerOptions = {
supressInfoWindows: true,
Opacity: 0.15
};
var polyLayer = new google.maps.KmlLayer
('http://gmaps-samples.googlecode.com/svn/trunk/ggeoxml/cta.kml', polyLayerOptions);
polyLayer.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
There isn't an opacity flag in the KML options, but you can set the color of objects in your KML to be transparent. Google uses a 32 bit color in the form ABGR, where the first byte is the alpha channel or transparency and the next three bytes are regular colors (though not in the standard RGB order that everyone else uses!). For example, a color of #80FF0000 would be a 50% transparent Blue. There doesn't seem to be a way to modify the transparency on the fly in code like you can in Google Earth, you have to update the KML and repost it to your map.
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);
}
});