sanjay sanjay - 3 months ago 18
HTML Question

How to add Zoom controls in Google Map

I want to show zoom in(+) and zoom out option (-)at right side bottom corner in my google map. I tried this but I'm not getting the zoom option.

<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDQ2&callback=initMap">
</script>
<script type="text/javascript">
window.onload = function () {
var mapOptions = {
center: new google.maps.LatLng(17.44633567526379, 78.38290556613924),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow();
var latlngbounds = new google.maps.LatLngBounds();
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
google.maps.event.addListener(map, 'click', function (e) {
alert("Latitude: " + e.latLng.lat() + "\r\nLongitude: " + e.latLng.lng());
document.getElementById("txtLongitude").value = e.latLng.lng();
document.getElementById("txtLatitude").value = e.latLng.lat();
});
}
</script>
<div id="dvMap" style="width: 700px; height: 300px">
</div>

Answer

Add zoomControl: true in your MapOptions like this:

var mapOptions = {
                center: new google.maps.LatLng(17.44633567526379, 78.38290556613924),
                zoomControl: true,
                zoom: 14,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };