Hello, I have Google Maps on my page with the search bar
on it style. In the Script it did not come with the ability for me
to zoom in and out unless its written in some other format
I do not understand PAGE

I tried Adding this:

Disabling the default UI
View this example full screen.
JAVASCRIPTJAVASCRIPT + HTML
function initialize() {
  var mapOptions = {
    zoom: 4,
    center: new google.maps.LatLng(-37.09024, -95.712891),
    disableDefaultUI: true
  var map = new google.maps.Map(document.getElementById('map-canvas'),
                                mapOptions);
google.maps.event.addDomListener(window, 'load', initialize);
To this:
//GOOGLE MAPS                                                                                                                                      // This example adds a search box to a map, using the Google Place Autocomplete
// feature. People can enter geographical searches. The search box will return a
// pick list containing a mix of places and predicted search terms.
function initialize() {
  var markers = [];
  var map = new google.maps.Map(document.getElementById('map-canvas'), {
    mapTypeId: google.maps.MapTypeId.ROADMAP
  var defaultBounds = new google.maps.LatLngBounds(
      new google.maps.LatLng(37.09024, -95.712891),
      new google.maps.LatLng(37.09024, -95.712891));
  map.fitBounds(defaultBounds);
  // Create the search box and link it to the UI element.
  var input = /** @type {HTMLInputElement} */(
      document.getElementById('pac-input'));
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
  var searchBox = new google.maps.places.SearchBox(
    /** @type {HTMLInputElement} */(input));
  // Listen for the event fired when the user selects an item from the
  // pick list. Retrieve the matching places for that item.
  google.maps.event.addListener(searchBox, 'places_changed', function() {
    var places = searchBox.getPlaces();
    if (places.length == 0) {
      return;
    for (var i = 0, marker; marker = markers[i]; i++) {
      marker.setMap(null);
    // For each place, get the icon, place name, and location.
    markers = [];
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0, place; place = places[i]; i++) {
      var image = {
        url: place.icon,
        size: new google.maps.Size(71, 71),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(17, 34),
        scaledSize: new google.maps.Size(25, 25)
      // Create a marker for each place.
      var marker = new google.maps.Marker({
        map: map,
        icon: image,
        title: place.name,
        position: place.geometry.location
      markers.push(marker);
      bounds.extend(place.geometry.location);
    map.fitBounds(bounds);
  // Bias the SearchBox results towards places that are within the bounds of the
  // current map's viewport.
  google.maps.event.addListener(map, 'bounds_changed', function() {
    var bounds = map.getBounds();
    searchBox.setBounds(bounds);
google.maps.event.addDomListener(window, 'load', initialize);         
              
If you ask how to specify initial zoom level for you map then take a look at this portion of your code:
var map = new google.maps.Map(document.getElementById('map-canvas'), {
    mapTypeId: google.maps.MapTypeId.ROADMAP
Inside curly braces you can provide map options. Add zoom to them:
var map = new google.maps.Map(document.getElementById('map-canvas'), {
    mapTypeId: google.maps.MapTypeId.ROADMAP, //note the comma between options
    zoom: 4
              
@PaulOB Hi, Do you know how I may add a zoom in and out of a google maps script?

this is the script I am using:
//GOOGLE MAPS                                                                                                                                      // This example adds a search box to a map, using the Google Place Autocomplete
// feature. People can enter geographical searches. The search box will return a
// pick list containing a mix of places and predicted search terms.
function initialize() {
  var markers = [];
  var map = new google.maps.Map(document.getElementById('map-canvas'), {
    mapTypeId: google.maps.MapTypeId.ROADMAP
  var defaultBounds = new google.maps.LatLngBounds(
      new google.maps.LatLng(37.09024, -95.712891),
      new google.maps.LatLng(37.09024, -95.712891));
  map.fitBounds(defaultBounds);
  // Create the search box and link it to the UI element.
  var input = /** @type {HTMLInputElement} */(
      document.getElementById('pac-input'));
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
  var searchBox = new google.maps.places.SearchBox(
    /** @type {HTMLInputElement} */(input));
  // Listen for the event fired when the user selects an item from the
  // pick list. Retrieve the matching places for that item.
  google.maps.event.addListener(searchBox, 'places_changed', function() {
    var places = searchBox.getPlaces();
    if (places.length == 0) {
      return;
    for (var i = 0, marker; marker = markers[i]; i++) {
      marker.setMap(null);
    // For each place, get the icon, place name, and location.
    markers = [];
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0, place; place = places[i]; i++) {
      var image = {
        url: place.icon,
        size: new google.maps.Size(71, 71),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(17, 34),
        scaledSize: new google.maps.Size(25, 25)
      // Create a marker for each place.
      var marker = new google.maps.Marker({
        map: map,
        icon: image,
        title: place.name,
        position: place.geometry.location
      markers.push(marker);
      bounds.extend(place.geometry.location);
    map.fitBounds(bounds);
  // Bias the SearchBox results towards places that are within the bounds of the
  // current map's viewport.
  google.maps.event.addListener(map, 'bounds_changed', function() {
    var bounds = map.getBounds();
    searchBox.setBounds(bounds);
google.maps.event.addDomListener(window, 'load', initialize);
              
Zoom out is the just within mapping without change to the text size.The mouse botton move the right corner.zoom faster hold down the control key as you zoom in and the zoom out in your mouse.
function mapRoute(lat, lng, info) {

var pt = new google.maps.LatLng(lat, lng);

map.setCenter(pt);

map.setZoom(your desired zoom);

Edited by cpradio to remove the fake signature