- Google Maps Tutorial
- Google Maps - Home
- Google Maps - Getting Started
- Google Maps - Types
- Google Maps - Zoom
- Google Maps - Localization
- Google Maps - UI Controls
- Google Maps - Markers
- Google Maps - Shapes
- Google Maps - Info Window
- Google Maps - Symbols
- Google Maps - Events
- Google Maps Resources
- Google Maps - Quick Guide
- Google Maps - Useful Resources
- Google Maps - Discussion
Google Maps - Zoom
Increase/Decrease the Zoom Value
You can increase or decrease the zoom value of a map by modifying the value of the zoom attribute in the the map options.
Syntax
We can increase or decrease the zoom value of the map using the zoom option. Given below is the syntax to change the zoom value of the current map.
var mapOptions = { zoom:required zoom value };
Example : Zoom 6
The following code will display the roadmap of the city Vishakhapatnam with a zoom value of 6.
<!DOCTYPE html> <html> <head> <script src = "https://maps.googleapis.com/maps/api/js"></script> <script> function loadMap() { var mapOptions = { center:new google.maps.LatLng(17.609993, 83.221436), zoom:6, mapTypeId:google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("sample"),mapOptions); } </script> </head> <body onload = "loadMap()"> <div id = "sample" style = "width:587px; height:400px;"></div> </body> </html>
It will produce the following output −
Example : Zoom 10
The following code will display the roadmap of the city Vishakhapatnam with a zoom value of 10.
<!DOCTYPE html> <html> <head> <script src = "https://maps.googleapis.com/maps/api/js"></script> <script> function loadMap() { var mapOptions = { center:new google.maps.LatLng(17.609993, 83.221436), zoom:10, mapTypeId:google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("sample"),mapOptions); } </script> </head> <body onload = "loadMap()"> <div id = "sample" style = "width:587px; height:400px;"></div> </body> </html>
It will produce the following output −
Advertisements