JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://gmap3.net/js/gmap3-3.4-min.js"></script> 
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />
<input type="text" id="address"/>
<div id="test"></div>

CSS

#test {
    width: 400px;
    height: 400px;
    border 2px dashed #ccc;
}

JavaScript

$('#test').gmap3(
  {action: 'init',
    options:{
      center:[25, 90],
      zoom:13,
      mapTypeId: google.maps.MapTypeId.SATELLITE,
      mapTypeControl: true,
      mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
      },
      navigationControl: true,
      scrollwheel: true,
      streetViewControl: true
    }
  }
);

$('#address').autocomplete({
  //This bit uses the geocoder to fetch address values
  source: function(request, response) {
    $("#test").gmap3({
      action:'getAddress',
      address: request.term,
      callback:function(results){
        if (!results) return;
        response($.map(results, function(item) {
          return {
            label:  item.formatted_address,
            value: item.formatted_address,
            latLng: item.geometry.location
          }
        }));
      }
    });
  },
  //This bit is executed upon selection of an address
  select: function(event, ui) {
    $("#test").gmap3(
      {action:'clear', name:'marker'},
      {action:'addMarker',
        latLng:ui.item.latLng,
        map:{center:true}
      }
    );
  }
});