JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdn.jsdelivr.net/instantsearch.js/1/instantsearch.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/instantsearch.js/1/instantsearch.min.css">
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCa0ALxq4q2PDyFh0iWG1rYz4D5zmgl2K8&amp;libraries=places"></script>
<div>
  <label>Algolia search (full text):
    <input id="searchBox" />
  </label>
</div>

<h2>
  Airports
</h2>

<div id="hits"></div>

<h2>
  Map display (google map)
</h2>

<div id="map"></div>

CSS

em {
  color: red;
  font-style: normal
}

#map {
  width: 600px;
  height: 600px;
}

JavaScript

var hitsPerPage = 3;

var airports = instantsearch({
  appId: 'map-istanbay',
  apiKey: 'AIzaSyDC9Odc45a_OkBY5eFPBxnR0oOXhtDceno',
  indexName: 'map-istanbay1',
});

var airportsHits = instantsearch.widgets.hits({
  container: document.querySelector('#hits'),
  hitsPerPage: hitsPerPage,
  templates: {
    item: '{{{_highlightResult.name.value}}}, city: {{{_highlightResult.city.value}}}, country: {{{_highlightResult.country.value}}}'
  }
});

var searchBox = instantsearch.widgets.searchBox({
  container: document.querySelector('#searchBox'),
  wrapInput: false
});

var customMapWidget = {
  _autocompleteContainer: document.querySelector('#places'),
  _mapContainer: document.querySelector('#map'),
  markers: [],
  _hitToMarker: function(hit) {
    var marker = new google.maps.Marker({
      position: {
        lat: hit._geoloc.lat,
        lng: hit._geoloc.lng
      },
      map: this._map,
      title: hit.name
    });

    var infowindow = new google.maps.InfoWindow({
      content: hit.name
    });

    marker.addListener('click', function() {
      infowindow.open(map, marker);
    });

    return marker;
  },
  init: function(params) {
    this._helper = params.helper;
    this._map = new google.maps.Map(this._mapContainer, {
      zoom: 1,
      center: new google.maps.LatLng(0, 0)
    });
  },
  render: function(params) {

    // Clear markers
    this.markers.forEach(function(marker) {
      marker.setMap(null)
    });

    this.markers = params.results.hits.slice(0, hitsPerPage).map(this._hitToMarker.bind(this));

    var bounds = new google.maps.LatLngBounds();

    this.markers.forEach(function(marker) {
      bounds.extend(marker.getPosition());
    });

    this._map.fitBounds(bounds);
  }
};

airports.addWidget(searchBox);
airports.addWidget(airportsHits);
airports.addWidget(customMapWidget);
airports.start();