title: How location details on pin click outside of Google Map
body: <p>I have a google map several details about a location. What i want to do is when a user clicks on a location pin, i want to show the details below the map where it says City Details. </p>
  
  <p>Current it shows the infobox on the map.</p>
  
  <p>JS</p>
  
  <pre><code>angular.module('mapsApp', [])
  .controller('MapCtrl', function ($scope) {
  
      var mapOptions = {
          zoom: 4,
          center: new google.maps.LatLng(40.0000, -98.0000),
          mapTypeId: google.maps.MapTypeId.TERRAIN
      }
  
      $scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);
  
      $scope.markers = [];
  
      var infoWindow = new google.maps.InfoWindow();
  
      var createMarker = function (info){
  
          var marker = new google.maps.Marker({
              map: $scope.map,
              position: new google.maps.LatLng(info.lat, info.long),
              title: info.city
          });
          marker.content = '&lt;div class="infoWindowContent"&gt;' + info.desc + '&lt;/div&gt;';
  
          google.maps.event.addListener(marker, 'click', function(){
              infoWindow.setContent('&lt;h2&gt;' + marker.title + '&lt;/h2&gt;' + marker.content);
              infoWindow.open($scope.map, marker);
          });
  
          $scope.markers.push(marker);
  
      }  
  
      for (i = 0; i &lt; cities.length; i++){
          createMarker(cities[i]);
      }
  
      $scope.openInfoWindow = function(e, selectedMarker){
          e.preventDefault();
          google.maps.event.trigger(selectedMarker, 'click');
      }
  
  });
  </code></pre>
  
  <p>Fiddle
  <a href="http://jsfiddle.net/livewirerules/n4gyywdc/3/" rel="nofollow noreferrer">http://jsfiddle.net/livewirerules/n4gyywdc/3/</a></p>
  
  <p>Any help will be appreciated</p>