Using HTML div as info window in google maps

Question

I want to use an HTML div as an information window in Google Maps

Here is the fiddle

Relevant Source

 $(document).ready(function(){    
     var params = {'lat':$('#map_canvas').data('lat'),'long':$('#map_canvas').data('long')};
     google.maps.event.addDomListener(window, 'load', initialize(params));
  });      

 function initialize(coordinates) {
   var mapOptions = {
        center: new google.maps.LatLng(coordinates.lat,coordinates.long),
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
   };
   var map  = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
   var infoWindow = new google.maps.InfoWindow({
        content: $('#infowindow1').html(),
        position:new google.maps.LatLng(coordinates.lat,coordinates.long),
   });
   var marker = new google.maps.Marker({
       position: new google.maps.LatLng(coordinates.lat,coordinates.long),
       map: map,
   });      
   infoWindow.open(map); 
   marker.setMap(map);
}

I want to use the styled div as an information window instead of putting it up as a separate fixed div.

Any suggestions?

possible duplicate of [Google Maps: How to create a custom InfoWindow?](http://stackoverflow.com/questions/3860277/google-maps-how-to-create-a-custom-infowindow) — Praveen, Aug 19 '14 at 06:28
Deleted the answer. You must be more specific. It is not clear what you want. You want to replace the infowindow with the div, but want to see the infowindow anyway? — davidkonrad, Aug 19 '14 at 10:58

Using HTML div as info window in google maps

0 Answers0