I'm inserting a very basic Google map into my page and the zoom control and streetmap icon are not visible, however if I place my mouse over where they should be I can zoom the map and enter streetview.
So the controls are there just not visible.
<script type="text/javascript"
src="//maps.googleapis.com/maps/api/js?key=<apikey>&sensor=false®ion=IT">
</script>
var myOptions = {
zoom: 17,
center: latlng,
panControl: true,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE
},
scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
Any ideas what the problem could be?
That is definitely a CSS issue that you have with your code. Look for CSS that is applying to all images like:
img {
max-width: 100%;
}
I had this problem, the fix was to include this CSS ...
.gmnoprint img { max-width: none; }
The CSS selector .gmnoprint img gets to all images [img] on the Google Map [gm] controls that are non printing [noprint]. In my case max-width had been set globally to 100%. Unsetting this fixed the issue.
Best solution to reach only for google map
.gmnoprint img {
max-width: none;
}
I had a very similar issue and it turned out in my case NOT to be a CSS issue. In my case, the Content-Security-Policy header on our site was blocking certain images from being rendered. In this case it was blocking the street view images (loaded from a *.ggpht.com uri) and the button icons which use inline svg data specified using the data: scheme. To fix this, I added the following to the Content-Security-Policy header:
img-src data: 'self' https://*.googleapis.com https://*.google.com https://*.gstatic.com https://*.ggpht.com
Note that on the moment it's not even possible to show the full size zoom slider on touch devices (ipad etc). Here's the documentation:
http://code.google.com/apis/maps/documentation/javascript/controls.html
google.maps.ZoomControlStyle.SMALL displays a mini-zoom control, consisting of only + and - buttons. This style is appropriate for small maps. On touch devices, this control displays as + and - buttons that are responsive to touch events.
google.maps.ZoomControlStyle.LARGE displays the standard zoom slider control. On touch devices, this control displays as + and - buttons that are responsive to touch events.
I ran into a variant, with the offending css looking like:
img {
max-width: 100%;
max-height: 100%;
}
So, an additional line is needed:
#map_div img {
max-width: none !important;
max-height: none !important;
}
I'm thinking this might be a problem with the browser or the code within the page that you're embedding this map.
If I look at this simple hello world code, the maps controls show up fine. I geocoded this map to the same location as your sample, so its not anything to do with the location.
What happens when you use this sample?
<!DOCTYPE html>
<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="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=true®ion=it">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(45.38686, 8.91927);
var myOptions = {
zoom: 17,
center: latlng,
panControl: true,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE
},
scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</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>
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>
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>
I'm trying to build a mobile application using Google Maps Javascript API v3. Functionally, it's doing fine, but the performance is really sluggish on middleware Android devices (used Samsung Galaxy 3 for testing).
I also checked the performance on the official http://maps.google.com, had the same result, and using the first example code as well. Is there any mobile specific step, I might have missed (see the example code), or the Javascript API performance is limited to this level, and building a native application cannot be avoided in this case?
Thank you very much for the answers!
Here is the code of the linked page:
<!DOCTYPE html>
<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="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
</script>
<script type="text/javascript">
function initialize() {
var myOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
As per official documentation, your code is right. And maps is optimized.
I suggest:
Try to change the script URL to http://maps.googleapis.com/maps/api/js?sensor=false
Load scripts at end of page.
Example:
<!DOCTYPE html>
<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%; width: 100%; }
</style>
</head>
<body>
<div id="map_canvas"></div>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function initialize() {
var myOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</body>
</html>
Try the demo out at http://fiddle.jshell.net/tomasdev/8FhYz/show/light/ — I'm in doubt regarding your device. If official demos work slow, I don't think there is a quite good solution.
Google maps performance is VERY MUCH dependant on how well structured the whole page is.
The biggest performance hit usually comes from repaint/render cycles of the page - caused by the tiles loading / unloading.
Dependant on how the map is placed and how you use it, it's a benefit to position the map element using position:fixed, taking it out of the document flow. Position:absolute can also help, but not as much as 'fixed'.
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.