How to set zoom default level in google maps

Question

Found this Free webiste online that i want to customize but i cant change the default zoom lvl, i dont know javascript. I would like to know what lines of code i need to add in order to change the zoom lvl. Thanks, :=), also i dont know if i have to include other code/info here, just tell me if you need more info.

    <!-- Footer -->
    <footer>
        <!-- Container -->
        <div class="container">
            <div class="row">

            </div>
        </div><!-- Container end -->
    </footer><!-- Footer end -->


    <!-- scroll up-->
    <div class="scrollup">
        <a href="#"><i class="fa fa-chevron-up"></i></a>
    </div><!-- End off scroll up->

    <!-- JavaScript -->
    <script src="http://code.jquery.com/jquery-1.12.1.min.js"></script>     
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <!-- Bootsnav js -->
    <script src="js/bootsnav.js"></script>

    <!-- JS Implementing Plugins -->
    <script src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script src="js/gmaps.min.js"></script>

    <script type="text/javascript">
        var map;
        $(document).ready(function () {
            map = new GMaps({
                el: '#ourmaps',
                lat: 15, 
                lng: 15,
                scrollwheel: true

            });

            //locations request
            map.getElevations({
                locations: [[15, 15]],
                callback: function (result, status) {
                    if (status == google.maps.ElevationStatus.OK) {
                        for (var i in result) {
                            map.addMarker({
                                lat: result[i].location.lat(),
                                lng: result[i].location.lng(),
                                infoWindow: {
                                    content: '<address class="tooltip_address"><b>aaaa</b><br />aaa<br />aaaa<br />aaaa <br /></address>'
                                }
                            });
                        }
                    }
                }
            });

        });
    </script>


    <!--main js-->
    <script type="text/javascript" src="js/main.js"></script>

Possible duplicate of [Custom zoom level on Google Maps](https://stackoverflow.com/questions/40044363/custom-zoom-level-on-google-maps) — Pransh Tiwari, Aug 03 '18 at 06:42

score 1 · Answer 1 · answered Aug 03 '18 at 06:15

1

Try this:

zoom: 8

From documentation. see This also

answered Aug 03 '18 at 06:15

Er. Amit Joshi

611
5
21

score 0 · Answer 2 · answered Aug 03 '18 at 06:26

you're using Gmaps.js so you will need to find documentation about this javascript, as the webpage says you need to use setZoom that allows an integer of your desired zoom, also you will need to use setCenter to center the map on your desired marker.

Here's the GMaps.js website: GMaps.js

Here's where you cand find all the parameters that allows: Documentation

You can also set the zoom when you create your Gmaps, so this is the main code you need to edit in your example:

map = new GMaps({
       el: '#ourmaps',
       lat: 15, 
       lng: 15,
       scrollwheel: true,
       zoom: 15 //Your desired zoom
            });

Also I find a note on a blog that if you use more than 1 marker you may be using::

map.setZoom((map.getBoundsZoomLevel(bounds))); //To rezoom the map
map.setCenter(bounds.getCenter()); //To center the map

Reference about using more than one marker

Hope my answer helps you!!

How to set zoom default level in google maps

2 Answers2