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)
Related
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
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/
I have an app that uses Google Maps (JavaScript). When I load the map, it includes a variety of places already included. For example, if I have the map focused on Chicago, IL, the United Center appears. I can click it and a tool tip appears.
I am putting push pins on the map with my own search results. If a user clicks a pushpin, I show them a tooltip. How do I only show tooltips for the pushpins that I add? Essentially, I want to disable the default tooltip approach and only use tooltips with my results.
Thank you!
You can disable these by setting the visibility to off for that particular feature. You just need to set it in the styles property when you configure your map. Something like:
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 15,
center: new google.maps.LatLng(41.8337329,-87.7321555),
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [
{
featureType: "poi",
stylers: [
{ visibility: "off" }
]
}
]
});
You can see a working code sample on this fiddle.
There is a further reference which lists all the different types of features you can control on the Google Maps API under the google.maps.MapTypeStyleFeatureType object specification.
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'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