JSFiddle - React, Tailwind, and code Playground

by Duncan Cumming

HTML

<input id='location' data-location='berlin' />

<div id='map'></div>

CSS

#map {
  width: 400px;
  height: 200px;
}

JavaScript

$.getScript('https://maps.googleapis.com/maps/api/js?key=AIzaSyBQW0Z5fmFm8snLhXDOVuD8YuegwCMigqQ&signed_in=true&libraries=places,geometry', function() {

	map = new google.maps.Map(document.getElementById('map'), {
  	center: {
      lat: 20,
      lng: 0
    },
    zoom: 2,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  })

	var input = document.getElementById('location');
	var searchBox = new google.maps.places.SearchBox(input);
  
  searchBox.addListener('places_changed', function() {

		var places = searchBox.getPlaces();

    if (places.length == 0) {
      return;
    }

    var bounds = new google.maps.LatLngBounds();
    places.forEach(function(place) {
      map.setCenter(place.geometry.location);
      map.setZoom(9)
    });

  });
  
  if ($('#location').attr('data-location') !== '') {

    $('#location').val($('#location').attr('data-location'));

    google.maps.event.trigger(searchBox, 'places_changed');

  }

})