How to hide Map Type option (Map, Satellite...) if the screen si smaller than certain amount of pixels? This is how my Google Maps API V3 code looks like:
var mapOptions = {
center: new google.maps.LatLng(initLat, initLong),
zoom: level,
scaleControl: true,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.RIGHT_TOP
},
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP
},
mapTypeId: google.maps.MapTypeId.ROADMAP
}
As you can see mapTypeControl is set to true now, and I need it to be set to false if screen width is smaller than lets say 340px;. Also there is mapTypeControlOptions which should be hidden or something if the screen is smaller.
You could check the browser width just after create your mapOptions variable, and if it's smaller than 340px, you can modify it like a regular javascript object.
var width = window.innerWidth;
if(width < 340){
mapOptions.mapTypeControl = false;
delete mapOptions.mapTypeControlOptions;
}
The main problem here is the right way to take the browser width.
I would consider using $(window).width() jQuery method.
EDIT: I wouldn't recommend using jQuery for this purpose anymore.
Check this answer out for getting the browser width.
In the Google Maps Javascript API all controls are set to disappear by default if the map is smaller than 200x200px. This behaviour can be modified by explicitly setting the control to be visible - however it does not currently seem possible to modify the default size below which controls are hidden.
https://developers.google.com/maps/documentation/javascript/controls
As an option, you could use a static Google map for screen width less than 340px which simply links to Google Maps if the user requires full map interaction or controls: https://developers.google.com/maps/documentation/static-maps/
Related
I have a large map of the UK with multiple walking routes marked on. Currently the map is split into zones but walkers have asked to see the map as a whole so they can link routes together.
However, the routes then look very small. Is it possible to have a map with a clickable scale on one side that allows then to zoom into an area of the map. The map needs to be draggable and once zoomed in to still allow hotspotting. Is this possible?
You need to initialize the map with a init() function and pass necessary parameters that would enable controls like zoom and drag.
Add this code to your Google Map page.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: -33, lng: 151},
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.TERRAIN
]
}
});
}
For additional details, take a look at this official document.
I'm utilizing the Street View option with Google Maps but I can't figure out how to customize the controls if don't have the street view as the initial screen. Right now I have:
map = new google.maps.Map(mapDiv, {
zoom: 14,
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER
},
zoomControl:false,
disableDefaultUI: false
so this will enable the Pegman that you can drag to switch to the street view but I want to disable the close box and the zoom. I did find this API documentation but I'm not sure how to set the controls when I'm not manually creating the street view myself. Any help would be appreciated.
Directly after you create your map object, you can do:
map.get('streetView')
.setOptions({
addressControlOptions: {
position: google.maps.ControlPosition.BOTTOM_RIGHT,
},
zoomControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP
},
panControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP
},
})
Or, however else you'd like to setup your controls. https://developers.google.com/maps/documentation/javascript/reference#StreetViewPanoramaOptions
is a list of available options. You can also pass a new StreetViewPanorama upon creating your map object, but unless you have some serious customization to do, it's not necessary.
Get a copy of the map object. When the event is called, run the following: map.set('zoomControl', false)
map.set('enableCloseButton', false)
This question already has an answer here:
ZoomControlStyle - Large 'small' buttons
(1 answer)
Closed 8 years ago.
I'm using Google Maps API v3.17
Here's my code:
this._options = {
zoom: this._params.zoom,
center: new google.maps.LatLng(this._params.center.lat, this._params.center.lng),
// Disabled controls
mapTypeControl: false,
panControl: false,
scaleControl: false,
streetViewControl: false,
// Zoom control
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.RIGHT_BOTTOM
},
// Disable scrollwheel and double-click zooming
scrollwheel: false,
disableDoubleClickZoom: true // Because clicking through images results in a zoom
};
this._map = new google.maps.Map(this._el, this._options);
I'm getting an old-style Google Map, with little zoom icons (see image, left side).
What I'm looking for is the larger icons, per the API docs (see image, right side).
My code is identical to what they're saying to do... what am I missing?
Thanks!!
The terms SMALL and LARGE are misleading a bit, they are not related to the size, they mean used with a zoom-control: hide or show the slider.
There is no built-in option to set the "size".
What you see on the right side seems to be a signed-in map, which uses different controls.
Note: Signed-in maps aren't available in v3.17
I created a little website for the upcoming football world cup. The website contains a map (provided by mapbox), which is the most important element in my website, so it is the background of the website. The width is set to 100%. Now I would like to resize the map according to the device (tablet, phone), so that the map and the whole website looks similar on each device.
Here is a code snippet from my javascript:
var map = L.mapbox.map('map', 'hashtagwinti.i72di96c', {
zoomControl: false,
maxZoom: 10,
minZoom: 2,
} )
.setView([-8, -50], 4);
L.control.scale({position: 'bottomleft', metric: true, imperial:false}).addTo(map);
map.featureLayer.setGeoJSON(brazil).addTo(map);
Here is my css of my body and the map:
body {
margin:0;
padding:0;
width:auto% !important;
height: auto% !important;
}
#map {
position:absolute;
top:0;
bottom:0;
width:100%;
Now I'd like that on every device the map view is the same. At the moment the zoom level doesn't change (the map view isn't the same) if you go on the website from for example the an iPhone.
any ideas?
(if already looked for a solution on the mapbox API, but I didn't found a solution)
You can tell Mapbox which screen size you want to adjust for with a media query-type call in and to do something different for that size with an if/else statement.
For example, to set a zoom level for a phone screen size less than 420px it'd be something like this:
var mq = window.matchMedia( "(min-width: 420px)" );
if (mq.matches){
var map = new L.mapbox.map('map', 'hashtagwinti.i72di96c').setView([-8, -50], 4); //set map zoom level for desktop size
} else {
var map = new L.mapbox.map('map', 'hashtagwinti.i72di96c').setView([-8, -50], 3); //set map zoom level for mobile size
};
You can set other things too like map center, markers, etc.
I've found using map.invalidateSize(); the simplest solution to adjust the map size based on the size of the browser window or parent container.
Here is some more information about invalidateSize on MapBox's website: https://www.mapbox.com/help/why-map-cropped-hidden-shown/
I'm new to using google maps and am trying to find out how to restrict the zoom function so that it does not zoom anywhere except of the center of the map and not zoom to the mouse point. Basically it zooms to the center of the returned map no matter where your mouse pointer is on the map as opposed to zooming where the mouse pointer is located on the map. I don't even know if this is possible currently, some help would be appreciated.
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(51.285583, 1.091045);
var myOptions = {
zoom: 15,
center: latlng,
scrollwheel: true,
navigationControl: false,
mapTypeControl: false,
scaleControl: false,
draggable: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(51.285826, 1.089973),
map: map,
title: 'Run of The Mill',
clickable: true
});
}
</script>
There are several zoom types:
using zoom control - that zooms to the center of the map
using scroll wheel - that zooms to the mouse pointer as you complain
using double click - that first centers the place under the mouse pointer and then zooms
So if you want only the first zoom type, you can disable the other two by setting disableDoubleClickZoom and scrollwheel map options to false.
Moreover, you might handle dblclick map event (scroll wheel event is not so straightforward, but maybe you'll find a way how to handle the scroll wheel in javascript too) and in this handler just change the map scale using map.setZoom(). The map center will stay the same. Fairly easy.
Or handle this by re-centering the map on zoom change. This preserves the expected functionality on double click and scroll wheel.
google.maps.event.addListener(map,'zoom_changed',function () {
map.setCenter(new google.maps.LatLng(47.61388802057299,-122.31870898147581));
})
From what I can see in your code you are zooming on the latlng variable that you declared above. That is correct. You myOptions variable is then passed into your new maps declaration. So you should be centered on 51.285583, 1.091045, which is Caterbury Kent in the UK.
If that is where your mouse is pointing it is working, if this doesn't help I would suggest copying an example from the google examples and cutting out what you don't need for your first demo.
http://code.google.com/apis/maps/documentation/javascript/examples/index.html