title: Google Maps information box
body: <p>How can I display an information box with a directions button like this?</p>
  
  <p><a href="https://i.stack.imgur.com/PmTVQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PmTVQ.png" alt="enter image description here"></a></p>
  
  <p>I am using the Google Maps API. I already searched on google but I found nothing about how to include this box.</p>
  
  <p>This is my current code:</p>
  
  <pre class="lang-js prettyprint-override"><code>try {
  
    var point = {
      lat: 37.3316756,
      lng: 122.030189,
  
    };
    var markerSize = {
      x: -230,
      y: 70
    };
  
  
    google.maps.Marker.prototype.setLabel = function(label) {
      this.label = new MarkerLabel({
        map: this.map,
        marker: this,
        text: label
      });
      this.label.bindTo('position', this, 'position');
    };
  
    var MarkerLabel = function(options) {
      this.setValues(options);
      this.span = document.createElement('span');
      this.span.className = 'map-marker-label';
    };
  
    MarkerLabel.prototype = $.extend(new google.maps.OverlayView(), {
      onAdd: function() {
        this.getPanes().overlayImage.appendChild(this.span);
        var self = this;
        this.listeners = [
          google.maps.event.addListener(this, 'position_changed', function() {
            self.draw();
          })
        ];
      },
      draw: function() {
        var text = String(this.get('text'));
        var position = this.getProjection().fromLatLngToDivPixel(this.get('position'));
        this.span.innerHTML = text;
        this.span.style.left = (position.x - (markerSize.x / 2)) - (text.length * 3) + 10 + 'px';
        this.span.style.top = (position.y - markerSize.y + 40) + 'px';
      }
    });
  
    function initialize() {
      var myLatLng = new google.maps.LatLng(point.lat, point.lng);
      var gmap = new google.maps.Map(document.getElementById('map'), {
        zoom: 16,
        center: myLatLng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
  
      });
      var myMarker = new google.maps.Marker({
        map: gmap,
        position: myLatLng,
        label: 'Apple Inc.',
      });
    }
  
    initialize();
  } catch (e) {
    alert(e);
  }
  </code></pre>
  
  <p>Thank you.</p>