I'm working with a full screen Google Map (v3) that is really just for display purposes rather than interaction (still want to make use of the API though so not just a static image) - so 100% screen width. I've disabled dragging and the scrollwheel and for the most part this is fine. However, I've found on Windows 8 tablets and smartphones that, although you can't interact with the map, you also can't touch the map and move the page down like you can on Android/iOS.
Here are the map options I'm using.
var mapOptions = {
zoom: 6,
maxZoom: 6,
minZoom: 6,
center: new google.maps.LatLng("-41.00477527259105", "172.891846078125"),
mapTypeControl: false,
streetViewControl: false,
disableDoubleClickZoom: true,
scrollwheel: false,
draggable: false,
panControl: false,
zoomControl: false
};
I was able to come up with a CSS solution to place a transparent layer over top of the map which "resolves" the problem but I'd rather there was a nice solution built into the API that someone could recommend.
Here is the CSS solution I'm currently using if it is of any assistance:
.googlemap-box > div:before {
background-color: transparent;
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 4;
}
Related
I am setting up my drawing manager, like this:
var drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.POLYGON,
drawingControl: false,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [google.maps.drawing.OverlayType.POLYGON],
},
polygonOptions: {
strokeColor: "#FF00F0",
fillColor: "#FF00F0",
fillOpacity: 0.3,
editable: true,
}
});
And i start it with this:
drawingManager.setMap(_map);
But I get cross-hairs for the cursor and I would like to change it to a pencil. I can see from inspecting the web page that there is a div assigning the cursor but there is no way i can see to access it via the Maps API
<div style="z-index: 2000000000; cursor: url("https://maps.gstatic.com/mapfiles/crosshair.cur"), crosshair; touch-action: none; position: absolute; left: -463px; top: -539px; width: 926.167px; height: 1078.03px;"></div>
Does anyone know How I could assign a different cursor when using the Google Maps API Drawing Manager?
In Google Map API, we have the Map Type Control in the top right corner, So we can choose between Map|Satellite.
My problem is when I click on "Satellite", a checkbox appears with input "labels", and when I click on "Map", a checkbox appears with input "terrain".
I want to disable checkbox control and fix Satellite with labels checked without showing the checkbox when clicking on, and the same thing with Map Type I want to have "terrain" unchecked without showing the checkbox on clicking.
To remove those checkboxes, and set the buttons to the options you want, create a custom mapTypeIds property for the map, removing 'terrain' and 'satellite' (so the only typeIds are 'roadmap' and 'hybrid'):
mapTypeControlOptions: {
mapTypeIds: ['roadmap', 'hybrid']
}
proof of concept fiddle (modified from this example in the documentation)
code snippet:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {
lat: -33,
lng: 151
},
mapTypeControlOptions: {
mapTypeIds: ['roadmap', 'hybrid']
}
});
}
html,
body,
#map {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk">
</script>
I'm initializing a map with no controls because I've implemented some custom zoom controls in my page.
However, I'd like to add the standard zoom controls back to the map under specific circumstances, namely when I detect the window has been resized to a certain width. Conversely I would like to destroy them again at larger widths.
Is it possible to add the zoom control on the fly and if so, how?
In the API version 3 use setOptions to set zoomControl to true/false (similar question Dynamically add/remove controls [Google Maps]).
Demo:
// create map
var myLatlng = new google.maps.LatLng(-33, 151);
var myOptions = {
center: myLatlng,
zoom: 5,
zoomControl: false,
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// functions for removing zoomControl
function toggleZoomControl(b) {
map.setOptions({
zoomControl: b
});
}
#map_canvas {
width: 50%;
height: 200px;
float: left;
}
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map_canvas"></div>
<input type="checkbox" onclick="toggleZoomControl(this.checked)" />zoomControl
I'm setting a map for mobile device and want to utilize the zoom slider.
g.map = new google.maps.Map(
document.getElementById("mapcanvas"),
{
disableDoubleClickZoom : false,
disableDefaultUI : true,
scaleControl : true,
panControl : false,
navigationControl : true,
mapTypeControl : false,
zoomControlOptions : {
position : google.maps.ControlPosition.RIGHT_BOTTOM,
style : google.maps.ZoomControlStyle.LARGE
},
mapTypeControlOptions: {
mapTypeIds : [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.HYBRID
],
style : google.maps.MapTypeControlStyle.HORIZONTAL_BAR
},
zoom : 16,
center : new google.maps.LatLng('37.8477', '-122.2627'),
mapTypeId : google.maps.MapTypeId.ROADMAP
}
When I look at this on desktop the control is the slider, but on a mobile device, it still displays the small + and - buttons and no slider.
Is this a bug? How can I force the slider for zooming?
No, this is not a bug. The default behaviour for the zoom tool is to display large on large screen devices, and small (just the + -) on smaller screens like phones.
If you would like to always see the larger zoom tool with the slider, you need to set google.maps.ZoomControlStyle.LARGE in mapOptions. Ex:
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(-33, 151),
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE
}
}
Here is my source:
https://developers.google.com/maps/documentation/javascript/controls#DefaultUI
You can set the undocumented controlSize map option property with an integer value (i.e., 20) for setting the size of the map controls.
Please see the #Dutchmanjonny's post for the latest: Huge Google Maps Controls (Possible Bug?)
According to the screenshot below, I have a grey border/padding around the Google map, did someone know how to remove it?
Thanks
Here is my code:
var map;
function initialize(canvas,lat,lng) {
var myOptions = {
zoom: 16,
center: new google.maps.LatLng(lat,lng),
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
panControl: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.LEFT_TOP
},
scaleControl: false,
streetViewControl: false,
scrollwheel: false
};
map = new google.maps.Map(document.getElementById(canvas),myOptions);
}
I have 3 page to embed the Google map, and I added the code below to call Google map
$(document).ready(function() {
initialize("causewayBayMapCanvas","22.281001", "114.186375");
});
UPDATE:
<div style="width:300px; height:200px; border: 1px solid #0051B9">
<div id="<?php echo $mapId;?>" class="map rounded"></div>
</div>
Looks like a zero size div problem. You didn't provide the code that sets the size of the map div. You need to make sure the size is defined when your initialize function is called. If you are using percentage heights and widths, see this (v2) tutorial from Mike Williams' that addresses percentage sizes for maps: The Basics - Part 20 Using a percentage height for the map div
I've had this problem before too.
The way I fixed was to resize the map by using this code after initializing the map:
google.maps.event.trigger(map, 'resize');
If you have the map showing up on multiple pages, you may need to do this whenever the user goes to the page.