title: Google Map API V3 - Click on Marker show more info content as overlay (like in Google Maps)
body: <p>We use Google Map Api V3 to load google map in HTML container. We have a location search form. On submit, we will get the available locations and set markers in map. Once markers are loaded, on click on each marker we need to show Title, address details and design like what we have in google map. (In google maps  - When clicking on red marker, we can see the more info overlay box with additional details like Stars, Directions, Search nearby, Save to Map, More..)</p>
  
  <p>Do we have built in api function to load the overlay box like above. Or we don't have the function to load the details like what we have in google map currently.</p>
  
  <p>When i searched in google and map docs, i can see options to show overlay window and write content inside the box. But i didn't see options to load the content as required.</p>
  
  <p>I have pasted the code below for reference.</p>
  
  <pre><code>       var map = null;
         gmap_ready = function (){
      var myLatlng = new google.maps.LatLng(43.834527,-103.564457);
      var myOptions = {
        zoom: 3,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  </code></pre>
  
  <p>}</p>
  
  <pre><code>   function fnLoadMarkers(){
  var locations  = [
      ['S Dakota', 43.834527,-103.564457, 1],
      ['Texas', 31.428663,-99.418947, 2],
      ['California', 36.668419,-120.249025, 3],
      ['Newyork', 43.197167,-76.743166, 4],
      ['Missouri', 38.410558,-92.73926, 5]
  ];
  setMarkers(map,locations);
     }
   function setMarkers(map, locations) {
  var image = 'images/marker.gif';
  
  for (var i = 0; i &lt; locations.length; i++) {
      var currLocation = locations[i];
      var latLng = new google.maps.LatLng(currLocation[1], currLocation[2]);
      var marker = new google.maps.Marker({
          position: latLng,
          map: map,
          icon: image,
          title: currLocation[0],
          zIndex: currLocation[3]
      });
      google.maps.event.addListener(marker, 'click', function() {
          var latitude = this.position.lat();
          var longitude = this.position.lng();
          window.open("http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q="+latitude+","+longitude+"&amp;sll="+latitude+","+longitude+"&amp;sspn=0.172749,0.4422&amp;ie=UTF8&amp;ll="+latitude+","+longitude+"&amp;spn=0.162818,0.4422&amp;z=11&amp;iwloc=A");
      });
    }
  </code></pre>
  
  <p>}</p>
  
  <p>If there is any hint on how to achieve these results, it will be helpful. Also, please guide, whether it is possible through Google API V3.</p>
  
  <p>Thanks in Advance,</p>
  
  <p>Regards</p>
  
  <p>Srinivasan.C</p>