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?)
Related
I have a ImageMapType which overlays the Google Map (v3 API). This is the default view for my web application and the user can decide to hide the overlay pressing a button.
Can I avoid to load the Google Map tiles untill the overlay is shown?
I have seen in documentation that there's a parameter called mapTypeId which can be set to specific values, but it seems it's not possible something like: mapTypeId: NULL
Thanks,
Riccardo
I found this documentation page that was enlightening: https://developers.google.com/maps/documentation/javascript/examples/maptype-image
First of all I forgave to assign to my ImageMapType options the max and min zoom levels, here's the resulting configuration:
var myMap = new google.maps.ImageMapType({
getTileUrl : function(coord, zoom) { /* ... */},
tileSize : new google.maps.Size(256, 256),
isPng : true,
opacity : 1,
name: 'torino1864',
minZoom : MAP_MIN_ZOOM,
maxZoom : MAP_MAX_ZOOM
});
Then I needed to instantiate the map object (as usual):
map = new google.maps.Map(document.getElementById('map_canvas_placesList1864'), {
center : MAP_INITIAL_CENTER,
zoom : 11,
minZoom : MAP_MIN_ZOOM,
maxZoom : MAP_MAX_ZOOM,
backgroundColor : '#000000',
draggable : true,
panControl : false,
streetViewControl : false,
zoomControl : true,
mapTypeControl : false
});
And then (the part I was missing) the custom map must be registered as a mapType and that new mapType must be set:
map.mapTypes.set('torino1864', mapTiler);
map.setMapTypeId('torino1864');
I simplified it a bit:
var mapTiler = new google.maps.ImageMapType({
getTileUrl : function(coord, zoom) { return "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==";},
tileSize : new google.maps.Size(256, 256),
name: 'blankTiles',
minZoom : 0,
maxZoom : 20
});
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 10,
});
map.mapTypes.set('blankTiles', mapTiler);
map.setMapTypeId('blankTiles');
My custom map control is showing up behind the map on mobile devices.
When you move the map around with you finger you can see the control behind the map, when you stop moving the map it disappears behind the map. Everything works fine on desktop browsers.
Does anyone know if there is a setting or css that I can add to force it to be in view on mobile devices?
var mapOptions = {
center: new google.maps.LatLng(39.964885,-104.613528),
zoom: 5,
maxZoom: 24,
mapTypeControl: false,
mapTypeId: opts.mapType,
streetViewControl: false,
panControl: false
};
// Initialize map, infowindow and create default marker icon
map = new google.maps.Map( elem, mapOptions );
var controlDiv = document.createElement('div');
var controls = $("<div></div>")
.attr("id","mbb-map-control-wrapper")
.css({
"margin-top": 5
})
.appendTo(controlDiv);
var showMore = $("<span>Show More</span>")
.attr("id","mbb-showmore-btn")
.appendTo(controls);
$(showMore).click(function(){
$(elem).trigger("map_show_more");
});
var searchHere = $("<span>Search Here</span>")
.attr("id","mbb-searchhere-btn")
.css({
"margin-left": 10
})
.appendTo(controls);
$(searchHere).click(function(){
$(elem).trigger("map_search_here");
});
$("<div></div>").addClass("mbb-clear").appendTo(controls);
map.controls[google.maps.ControlPosition.TOP_CENTER].push(controlDiv);
I am using google maps in my sencha touch application. And I am using current location as true. But some time I am getting my current location different some time.
Below is the code I have used to show map.
this.map = new Ext.Map({
mapOptions : {
zoom: 12,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT
}
},
useCurrentLocation: true,
});
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.
i've declare my map
ChalkMobile.mapContent = new Ext.Map({
fullscreen: 'true',
useCurrentLocation: 'true',
mapOptions : {
zoom: 18,
},
});
but it's not showing in fullscreen. there's a large grey area and the map covers only less than 1/8 of the screen. any idea how to fix this?
thanks. =D
Have you tried the following?
layout: {
type: 'fit'
},