JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD9utzeckd8pV-IwFik5jVgTtG84QhDjfI&amp;libraries=places"></script>
<div ng-app="mapControllerApp">

<ion-content ng-controller="mapController" style="margin-top: 25px">

<div class="container">

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


 <form name="searchForm" novalidate 
ng-submit="search()">
    <div class="input-group">
        <input name="place" type="text" class="form-control" 
        ng-model="searchPlace" required autofocus />
        <br>
        <span class="input-group-btn">
            <button class="btn btn-primary" 
            ng-disabled="searchForm.$invalid">Search</button>
        </span>
    </div>
    </form>

</div>

CSS

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

JavaScript

var app = angular.module('mapControllerApp', []);

app.service('Map', function($q) {

this.init = function() {
		console.log("init");
    var options = {
        center: new google.maps.LatLng(45.7154289, 4.9317724),
        zoom: 14,
        disableDefaultUI: true    
    }
    this.map = new google.maps.Map(
        document.getElementById("map"), options
    );
    this.places = new google.maps.places.PlacesService(this.map);


  var markers = [{
  "title": 'Capgemini',
  "lat": 45.7154289,
  "lng": 4.9317724,
  "description": 'Capgemini'

    }];
var defaultMarkerColor = 'ff0000';
      var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + defaultMarkerColor);
	console.log("marker -> "+markers[0].lat+" - "+markers[0].lng);
  // marker object for the marker
  //    position: google.maps.LatLng(markers[0].lat,markers[0].lng),
  var marker = new google.maps.Marker({
    position:{lat: markers[0].lat, lng: markers[0].lng},
    map: this.map,
    title: markers[0].title,    
    animation: google.maps.Animation.NONE,
    icon: pinImage
  });
}

this.search = function(str) {
    var d = $q.defer();
    this.places.textSearch({query: str}, function(results, status) {
        if (status == 'OK') {
            d.resolve(results[0]);
        }
        else d.reject(status);
    });
    return d.promise;
}
var defaultMarkerColor = 'ff0000';
      var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + defaultMarkerColor);
this.addMarker = function(res) {
    if(this.marker) this.marker.setMap(null);
    this.marker = new google.maps.Marker({
        map: this.map,
        position: res.geometry.location,
        animation: google.maps.Animation.DROP,
        icon: pinImage
    });
    this.map.setCenter(res.geometry.location);
}

});

app.controller('mapController', function($scope, Map) {
console.log("ctrl");
$scope.place =...