How do I change the Google Maps zoom control style? [duplicate] - javascript

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

Related

Google Map full screen option disabled?

I am using google map for my site but I can not see the full screen feauture on the map. How can I activate and why I can't see it?
I have add following option to map:
var map = new google.maps.Map(document.getElementById('googleMap'), {
zoom: 7,
center: new google.maps.LatLng(this.coordinates[0][1], this.coordinates[0][0]),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControl: true,
scaleControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP
}
});
Here is my map:
By default, the fullscreen control is not included on the desktop version of the Google Maps API. Add the fullscreenControl: true property to the object used to initialize the map. Your code should look like this:
var map = new google.maps.Map(document.getElementById('googleMap'), {
zoom: 7,
center: new google.maps.LatLng(this.coordinates[0][1], this.coordinates[0][0]),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControl: true,
scaleControl: true,
fullscreenControl: true
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP
}
});
Checkout the documentation at https://developers.google.com/maps/documentation/javascript/controls
In the google maps documentation;
"The Fullscreen control offers the option to open the map in fullscreen mode. This control is enabled by default on desktop and mobile devices. Note: iOS doesn't support the fullscreen feature. The fullscreen control is therefore not visible on iOS devices."
This comment is a bit late, but maybe it helps someone.
The article link is; Google Maps Platform
The section is; Controls Overview

Google Maps pan control does not display

I have a google maps with this options :
mapProp = {
center: new google.maps.LatLng(39.92553, 32.86628),
zoom: 6,
panControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), mapProp);
I want to this control :
I want to this control but not showing my map.
Or I want to journey with button on map.
Thank You.
Most likely your are using a version of Google Maps newer than 3.22.
After that version as stated in the release notes, the Pan Control is no longer available. To continue to use it you must request an earlier version.
The Pan control on the map is no longer available. To pan the view,
users click and drag, or swipe, the map. (Note that the Pan control in
Street View remains available.)
At the time of this answer we are at version 3.37and 3.22 is already retired.

Hide Google Maps controls on small screens (mobiles, etc...)

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/

Google maps street view panorama options

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)

Zooming to center on a map in Google Maps API V3

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

Categories