We Keep Coding

how to show large zoom scroll in google map api

I have to show large zoom slider option which was available in previous version of google map api (v3.21). I have already specified the version in the src of script but it won't work. Below is my code:
html, body {
height: 100%;
margin: 0;
}
<div id="googleMap" style="height: 100%;width: 1349px;"></div>
<script type="text/javascript">
var map;
function initialize() {
map = new google.maps.Map(document.getElementById('googleMap'), {
center: {lat: -34.397, lng: 150.644},
zoom: 2,
streetViewControl: false,
panControl: true,
panControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.RIGHT_TOP
},
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initialize&v=3.21&signed_in=true"></script>

The "old" pan and zoom control has been removed. If you still want that functionality, you need to create your own custom control to implement it.
Related questions (include examples of a custom pan/zoom control):
Google maps custom control always appears below the default controls (contains a custom pan control)
googlemaps api3, demogallery example “Custom Small Navigation Control” (contains a custom pan/zoom control)

The Zoom control is now just a "+" and "-" button - there is no longer
a slider. The default position of the Zoom control has changed from
TOP_LEFT to RIGHT_BOTTOM
to know more check
Zoom control
block in this link What's New in the v3.22 Map Controls

I've developed a zoom slider for IE11. It could also work for Chrome and Mozilla, updating the css properties.
https://github.com/bubango/zoom_slider_IE11

Not sure if you're still looking for a zoom slider, but I made one recently and maybe you or anyone else can use it.
Create a zoom constructor...
function ZoomControl(controlDiv, map, min, max, currentZoom) {
var controlUI = document.createElement('input');
controlUI.type = 'range';
controlUI.value = currentZoom;
controlUI.min = min;
controlUI.max = max;
controlUI.style.position = "fixed";
controlUI.style.top = "95%";
controlUI.style.left = "50%";
controlUI.style.transform = "translate(-50%, -50%)";
controlUI.style.width = "400px";
controlDiv.appendChild(controlUI);
controlUI.addEventListener('click', function() {
map.setZoom(parseFloat(controlUI.value));
});
google.maps.event.addListener(map, 'zoom_changed', function(){
controlUI.value = map.getZoom();
});
}
and use it when you create a map.
function initMap() {
//initial map options
var options = {
center: startLatLng,
zoom: 3,
minZoom: 3,
maxZoom: 15,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.TERRAIN,
disableDefaultUI: true
}
map = new google.maps.Map(id('map'), options);
var centerControlDiv = document.createElement('div');
var centerControl = new ZoomControl(centerControlDiv, map, options.minZoom, options.maxZoom, options.zoom);
centerControlDiv.index = 1;
map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(centerControlDiv);
}
Your result will have a slider that looks like the attached image.

How to deactivate maps zoom property

I'm having a problem about the zoom property in my map. The deal is: I'm developing a full one page looping and I need to insert the map but, when you get in the section of the map screen and need to scroll up or down, just doesn't happens, because you're moving the zoom instead the page.
My js is:
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-23, -46),
zoom: 4,
mapTypeId: google.maps.MapTypeId.HYBRID
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var meukml = new google.maps.KmlLayer({
url:'http://oceanos.nap.usp.br/remmarsp/tvlhico/contourfgradeSBB01.kmz'
});
meukml.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
I think that is necessary just to deactivate the zoom. How do I do this?

Try removing it in the map options !
var mapOptions = {
center: new google.maps.LatLng(-23, -46),
zoom: 4,
mapTypeId: google.maps.MapTypeId.HYBRID,
'controls': {
'zoom': false
},
'gestures': {
'zoom': false
}
}

Function to turn KML layer on/off

This is my first time posting here. I am new in working with Javascript or Google Maps API. I have a map with one KML layer, and I want to create a checkbox that will turn the layer on or off when clicked. I have seen a lot of examples on the web, but nothing seems to work in my application. Here is the code:
(function() {
window.onload = function() {
var options = {
center: new google.maps.LatLng(44.65, 22.64),
zoom: 10,
mapTypeId: google.maps.MapTypeId.TERRAIN,
mapTypeControl: true,
mapTypeControlOptions: {
mapTypeIds: [
google.maps.MapTypeId.HYBRID,
google.maps.MapTypeId.SATELLITE,
google.maps.MapTypeId.TERRAIN
]
},
streetViewControl: false
};
var map = new google.maps.Map(document.getElementById('map'), options);
var kmlUrl = 'http://googledrive.com/host/0B55_4P6vMjhITEU4Ym9iVG8yZUU/trasee.kml';
var kmlOptions = {
suppressInfoWindows: false,
preserveViewport: false,
};
var trasee = new google.maps.KmlLayer(kmlUrl, kmlOptions).setMap(map);
}
})();
I have no idea what function to create to toggle the visibility of the layer, altough I've created a checkbox in the HTML file:
<input type="checkbox" id="straturi" onClick="togglefunction()" />
Could you give me any advice?
Best regards,
Alexandru

The toggle function should be something like
var toggleKml=function(layer) {
if(layer.getMap()===null) {
layer.setMap(map)
} else {
layer.setMap(null)
}
};
And it needs to be defined in the same context as map and trasee, otherwise it won't see those objects. In your case, you would call it with trasee as parameter
toggleKml(trasee);

Google Maps Controls Hidden

I'm having problems with the Google Maps API V3. The map loads correctly but the zoomControl is partially hidden. The panControl is shown and works perfectly, although in the screenshot it's not turned on.
I've tried setting: zoomControl: true and disableDefaultUI: true as well to no avail.
My javascript is as follows:
function initializeMap(manuId, lat, lng, centerLat, centerLng,zoom){
var latlng = new google.maps.LatLng(centerLat, centerLng);
var myOptions = {
zoom: zoom,
center: latlng,
disableDefaultUI: true,
zoomControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false,
draggable : true
};
var mapDiv = document.getElementById("map_canvas");
if(!mapDiv){
var mapDiv = document.getElementById("map_canvas_"+manuId);
}
var map = new google.maps.Map(mapDiv,
myOptions);
var myLatlng = new google.maps.LatLng(lat,lng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map
});
getPolygon(manuId, map);
}
var map;
function showManuMap(manuId, container, manuLat, manuLon, locLat, locLon, zoom){
showManuMap(manuId, container, manuLat, manuLon, locLat, locLon, zoom, null);
}
function showManuMap(manuId, container, manuLat, manuLon, locLat, locLon, zoom, marker){
map = new google.maps.Map(jQuery("#" + container)[0], {
zoom: zoom,
center: new google.maps.LatLng(manuLat, manuLon),
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
zoomControl: true,
scrollwheel: false,
draggable : true
});
if (locLat && locLon) {
new google.maps.Marker({
position: new google.maps.LatLng(locLat, locLon),
map: map,
icon : "https://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png"
});
}
if (marker != null) {
new google.maps.Marker({
position: new google.maps.LatLng(manuLat, manuLon),
map: map,
icon: marker
});
} else {
new google.maps.Marker({
position: new google.maps.LatLng(manuLat, manuLon),
map: map
});
}
if (manuId) {
getPolygon(manuId, map);
}
}

Without more information it's a little hard to be sure, but I had this issue when I included Twitter bootstrap in my page. Specifically it was setting all img tags to have a max-width of 100%. I fixed the issue by doing " #my-map-canvas img { max-width: none }" where #my-map-canvas was the id of the canvas for my map.

Taken from Google's API page: https://developers.google.com/maps/documentation/javascript/controls#Adding_Controls_to_the_Map
Adding Controls to the Map
You may wish to tailor your interface by removing, adding, or modifying UI behavior or controls and ensure that future updates don't alter this behavior. If you wish to only add or modify existing behavior, you need to ensure that the control is explicitly added to your application.
Some controls appear on the map by default while others will not appear unless you specifically request them. Adding or removing controls from the map is specified in the following MapOptions object's fields, which you set to true to make them visible or set to false to hide them:
{
panControl: boolean,
zoomControl: boolean,
mapTypeControl: boolean,
scaleControl: boolean,
streetViewControl: boolean,
overviewMapControl: boolean
}

Modify the max zoom level of a Google Map Type

I need to set the maxZoom level of the google.maps.MapTypeId.HYBRID to 21. Actually, he's set to 14 (inspected with the firebug console).
Set the property of the google.maps object 'maxZoom' doesn't work in this case, and I already try to modify the google.maps.mapTypes object, but without success.
var options = {
center: new google.maps.LatLng(lat_centre,lng_centre),
zoom: 14,
maxZoom: 21,
mapTypeId: google.maps.MapTypeId.TERRAIN,
panControl: true,
zoomControl: true,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
overviewMapControl: false,
disableDoubleClickZoom: true,
styles: [
{featureType: "poi", stylers: [{visibility: "off"}]}
]
};
map = new google.maps.Map(document.getElementById("map_container"),options);
AND
google.maps.event.addListener(map, 'tilesloaded', function(event){
var mapTypeRegistry = map.mapTypes;
var currentMapTypeId = map.getMapTypeId();
var mapType = mapTypeRegistry.get(currentMapTypeId);
mapType.maxZoom = 21;
});
So, is there a way to increase the zoom level of the mapType HYBRID ?
Thanks.

If you changed mapType object's property ( maxZoom, minZoom, etc... ), the changed effect will take a place ONLY AFTER the map's type will be changed to that mapType. For example , if current mapType is TERRAIN, and you changed TERRAIN's maxZoom, maxZoom will work only after changing mapType to another type (e.g. ROADMAP,HYBRID,etc..) and back to TERRAIN.
Instead of setting mapType's maxZoom option,use core map's maxZoom option. Add listener for "maptypeid_changed" event, and when event occurs, change maxZoom option of map:
google.maps.event.addListener(map, 'maptypeid_changed', function(event){
if( map.getMapTypeId() === google.maps.MapTypeId.TERRAIN ){
map.setOptions({maxZoom:/*For example*/5});
}else
if( map.getMapTypeId() === google.maps.MapTypeId.ROADMAP ){
map.setOptions({maxZoom:/*For example*/8});
}//Etc...
else{
map.setOptions({maxZoom:/*For example*/21});
}
});