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');
Related
I basically have the following piece of code:
if(window.google)
return window.mapInit();
$.getScript( 'http://maps.google.com/maps/api/js?v=3&sensor=false&callback=mapInit' );
//* Google map callback
window.mapInit = function() {
if (!typeof(google ==='object'))
return false; // error: google maps API not loaded
var pos = gmap.pos.split(',');
console.log(pos);
var args = {
zoom : 13,
center : new google.maps.LatLng(pos[0],pos[1]),
panControl : true,
zoomControl : true,
scaleControl : true,
mapTypeId : google.maps.MapTypeId.ROADMAP,
scrollwheel : false,
draggable : true
}
google.maps.visualRefresh = true;
gmap.map = new google.maps.Map( document.getElementById( 'gmap' ), args );
}
The code works fine the first time - however, if I click on a link to open another map with some new coords, it throughs an error: TypeError: 'null' is not an object (evaluating 'a[ib]') referring to main.js line 28
does anybody have an idea what I'm doing wrong?
Its because that element is already occupied...maybe...if u want multiple maps on a page...you create a new div everytime. Hope this code helps..
var myDiv = document.createElement('div');
myDiv.id = 'gmapNew';
gmap.map = new google.maps.Map( document.getElementById( 'gmapNew' ), args );
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?)
I would like to have a blank google map, without any basemap showing roadmap, terrain, hybrid or satellite data: just a white background to display my layer only.
Is that possible?
hexblot was correct with his suggestion to look at custom map types documentation. Here is what I did to have a blank map (white background) without any control.
function initialize(){
var styles = [{
stylers:[{ color: "#ffffff" }]
}
];
var styledMap = new google.maps.StyledMapType(styles);
var centerlatlng = new google.maps.LatLng(0, 0);
var myOptions = {
zoom: 3,
center: centerlatlng,
disableDefaultUI : true,
mapTypeControlOptions: {
mapTypeIds: ['map_style']
},
mapTypeId: 'map_style'
};
var map = new google.maps.Map(document.getElementById("map"), myOptions);
map.mapTypes.set('map_style', styledMap);
}
you're most probably interested in custom map types, you can reference Google Maps documentation for that here :
https://developers.google.com/maps/documentation/javascript/maptypes?hl=en#CustomMapTypes
This is my javaScript code.
(function() {
window.onload = function() {
// Creating a reference to the mapDiv
var mapDiv = document.getElementById('map');
// Creating a latLng for the center of the map
var latlng = new google.maps.LatLng(37.09, -95.71);
// Creating an object literal containing the properties
// we want to pass to the map
var options = {
center: latlng,
zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Creating the map
var map = new google.maps.Map(mapDiv, options);
}
})();
When i add the disableDefaultUI: true to the options variable and test it on my Browsers(Opera,Firefox,Chrome Canary) it does not disable the UI. I am currently using Eclipse Indigo on My Mac OSX version 10.6.8. Is there a problem with my browsers cache or something? My code seems to be okay. I can't understand why it does not render on the browsers.
var options = {
zoom: 3,
center: new google.maps.LatLng(37.09, -95.71),
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true
};
I can't remember exactly why the disableDefaultUI property didn't do anything on maps I've worked on recently. The way I got round it was to control each ui element directly.
var options = {
// Required map properties here
// Set how Zoom is to look
zoomControl : true,
zoomControlOptions : {
style : google.maps.ZoomControlStyle.SMALL,
position : google.maps.ControlPosition.TOP_LEFT
}
}
While the example above modifies the Zoom controls to the compact plus and minus rather than slider, you can turn if off using:
zoomControl : false
All the other UI elements have these type of controls also. You can see them all here
I am using Google Maps API V3, I would like to know how I can change the position of the elements (shown in picture http://www.pikky.net/uploads/d6964cfad0bb97cc3ada7852df260a715234d69a.png) when the user is INSIDE Street View.
Thanks,
Mirko
You achieve this by defining your StreetViewPanoramaOptions to a StreetViewPanorama object that you will initialize to your map variable when declaring the map options. It's in the StreetViewPanoramaOptions that you can determine the positions of the controls for when you're in the street view. (Refer to this document for more info https://developers.google.com/maps/documentation/javascript/reference#StreetViewPanoramaOptions ). Here is a snippet on how to approach this. (Note: this should all be done in your initialize() function prior to initializing your map variable).
First we will declare a variable for StreetViewPanoramaOptions and change options as we desire:
var panoramaOptions = {
addressControlOptions : { position : google.maps.ControlPosition.BOTTOM_CENTER },
zoomControlOptions : { position : google.maps.ControlPosition.TOP_RIGHT},
enableCloseButton : true,
visible: false //set to false so streetview is not triggered on the initial map load
};
The next step is to declare a StreetViewPanorama object that is set to the container/div of the map with the StreetViewPanoramaOptions from above:
var panorama = new google.maps.StreetViewPanorama(document.getElementById("map_canvas"), panoramaOptions);
Lastly, we declare the map options and set the map variable with the map options like we would normally do. Except, in the map options we set the streetView option to the panorama variable:
var mapOptions = {
center: new google.maps.LatLng(42.345573,-71.098326),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetView : panorama //this is where we set the panorama object to the map
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
Refer to this source for how to position controls in the map div ( https://developers.google.com/maps/documentation/javascript/controls#ControlPositioning )