title: How to add a GoogleMap Search Box to my customized map?
body: <p>I'm developing my own map with google API and IGN API (french map) and I'd like to add a Google Map Search Box but can't find a way to succeed even after reading carefully the Google Map API.</p>
  
  <p>This is what I have:
  <a href="http://www.tiphainebuccino.com/site/Map/LaCarteAuxTresors_2.html" rel="nofollow noreferrer">http://www.tiphainebuccino.com/site/Map/LaCarteAuxTresors_2.html</a></p>
  
  <p>This is what I want to add (without losing my actual settings):
  <a href="https://developers.google.com/maps/documentation/javascript/examples/places-searchbox?hl=fr" rel="nofollow noreferrer">https://developers.google.com/maps/documentation/javascript/examples/places-searchbox?hl=fr</a></p>
  
  <p>I don't understand how to mix the two html codes. Someone could help me?
  I work in html+javascript.</p>
  
  <p>The relevant (non-working) code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;La Tarte Aux Crésors "Beta"&lt;/title&gt;
  &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no"&gt;
  &lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      "use strict";
  
      var ignKey = "ljozkgwvms60dtumhx67z6u3"
  
      function makeIGNMapType(layer, name, maxZoom) {
          return new google.maps.ImageMapType({
              getTileUrl: function(coord, zoom) {
                  return "http://gpp3-wxs.ign.fr/" + ignKey + "/geoportail/wmts?LAYER=" +
                      layer +
                      "&amp;EXCEPTIONS=text/xml&amp;FORMAT=image/jpeg&amp;SERVICE=WMTS&amp;VERSION=1.0.0" +
                      "&amp;REQUEST=GetTile&amp;STYLE=normal&amp;TILEMATRIXSET=PM&amp;TILEMATRIX=" +
                      zoom + "&amp;TILEROW=" + coord.y + "&amp;TILECOL=" + coord.x;
              },
              tileSize: new google.maps.Size(256,256),
              name: name,
              maxZoom: maxZoom
          });
      }
  
      function initialize() {
          var map_canvas = document.getElementById("map_canvas");
  
          var map = new google.maps.Map(map_canvas, {
              mapTypeId: 'IGN',
              scaleControl: true,
              streetViewControl: true,
              panControl: true,
              mapTypeControl:true,
              overviewMapControl: true,
              overviewMapControlOptions: {
  opened: true,
  position: google.maps.ControlPosition.BOTTOM_CENTER 
  },
  
  
              mapTypeControlOptions: {
              mapTypeIds: [
                      'IGN', 'IGNScanExpress',
                      google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.TERRAIN, google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.ROADMAP],
                  style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
              },
              center: new google.maps.LatLng(47, 3),
              zoom: 6,
              draggableCursor: "crosshair"
          });
  
          map.mapTypes.set('IGN', makeIGNMapType("GEOGRAPHICALGRIDSYSTEMS.MAPS", "IGN", 18));
          map.mapTypes.set('IGNScanExpress', makeIGNMapType("GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN-EXPRESS.CLASSIQUE", "IGN Scan Express", 16));
  
  
    // 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();
  
      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);
  &lt;/script&gt;
  
  &lt;style&gt;
  html, body, #map_canvas {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 0;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id="map_canvas"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>