Untitled

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <link data-require="bootstrap@3.0.0" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
    <script data-require="bootstrap@3.0.0" data-semver="3.0.0" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
    <script data-require="angular.js@1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
    <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"> </script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="myController">
      <!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" ng-click="getLocation()" data-target="#myModal">
  Click this button
</button>


<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Customer GeoLocation</h4>
      </div>
      <div class="modal-body">
        <!--use this div outside to use the map where ever you want -->
        
        <div id="map"></div>
      </div>
      <div class="modal-footer">
      </div>
    </div>
  </div>
</div>
  </body>

</html>

// Code goes here
var app = angular.module('myApp', []);

app.controller('myController', function($scope){
  
  var cities = "Atlanta, USA";
  var geocoder= new google.maps.Geocoder();
  
   $scope.markers = [];
   
   var createMarker = function (info){
        var marker = new google.maps.Marker({
            map: $scope.map,
            position: new google.maps.LatLng(info.lat(), info.lng())
        });
   }

   geocoder.geocode( { 'address': cities }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
        newAddress = results[0].geometry.location;
        $scope.map.setCenter(newAddress);
        createMarker(newAddress)
    }
   });

  $scope.mapOptions = {
        zoom: 4,
        //center: new google.maps.LatLng(41.923, 12.513),
        mapTypeId: google.maps.MapTypeId.TERRAIN
    }

    $scope.map = new google.maps.Map(document.getElementById('map'), $scope.mapOptions);
    
    
    //issue of google maps inside bootstap model issue
    $('#myModal').on('shown.bs.modal', function(){
    google.maps.event.trigger(map, 'resize');
   $scope.map.setCenter(new google.maps.LatLng(newAddress.lat(), newAddress.lng()));
  });
});

/* Styles go here */

#map {
    height:420px;
    /*width:600px;*/
}