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>
Related
Google API map not displaying when I load my code in a google chrome browser. I created my authentication key with in a new project on the Google Cloud Platform.
I've tried generating a new authentication key on the Google Cloud platform by creating a new project, but that did not seemed to work.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#map{
height:100%;
}
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="output">Complete JavaScript Course </div>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?
key=<<my key>>"></script>
<script src="app.js">
window.onload = init;
var m = document.getElementById('map');
function init() {
navigator.geolocation.getCurrentPosition(placeMap);
}
function placeMap(data) {
var options = {
center: {
lat: data.coords.latitude
, lng: data.coords.longitude
}
, zoom: 5
}
var map = new google.maps.Map(m, options);
console.dir(data);
}
</script>
</body>
</html>
As I've already stated, the google map api will not display a map of my actual location.
You have two issues with the posted code.
Your map div doesn't have a size, you need to define the size of html and body so the #map 100% height has something to reference:
<style>
#map{
height:100%;
}
</style>
should be:
<style>
html, body, #map {
height: 100%;
margin: 0;
padding: 0;
}
</style>
you have an unneeded src on your script tag:
<script src="app.js">
should be:
<script>
proof of concept fiddle
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 90%;
}
<div id="output">Complete JavaScript Course </div>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script>
window.onload = init;
var m = document.getElementById('map');
function init() {
navigator.geolocation.getCurrentPosition(placeMap);
}
function placeMap(data) {
var options = {
center: {
lat: data.coords.latitude,
lng: data.coords.longitude
},
zoom: 5
}
var map = new google.maps.Map(m, options);
console.dir(data);
}
</script>
You need to access the API using the callback after google maps have already been loaded. This is done by passing in a parameter to google maps initialization by passing in callback as a query parameter. You also need to activate your api to have Javascript functionality
<!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(position) {
map = new google.maps.Map(document.getElementById('map'), {
center: position,
zoom: 8
});
}
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition((position) => {
initMap({
lng: position.coords.longitude, lat: position.coords.latitude});
});
} else {
initMap({lat: -34.397, lng: 150.644});
}
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCD9OuD6hAbRm5JNSEpkCTE6HzhaOp5uCc&callback=getLocation"
async defer></script>
</body>
</html>
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>
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.