Creating new infowindow in google map

Question

How to create new info window that is customized by us and not an default window that are provided by the google. I need to create and customize a new one for my website. (not google.maps.InfoWindow)

Answer 1

If you don't want to use the Google's default InfoWindow, then take a look at InfoBubble .

infobubble.js is a separate file, very simple and easy to edit their styles.

FYI: This has a wide support, so you can even ask question here tagged as infobubble , if you face any problem.

Better don't reinvent the wheel, it will consume a lot of your time. But you can try it if you want to learn.

Answer 2

You can use InfoBox. It basically extends the infoWindow class allowing for more customization and styling.

Visit this link for infoBOx .

In case of InfoWindows you can do this:

   var infoWindow = new google.maps.InfoWindow({
        content: '<div id="content">'+Content+
        '</div>'
      });

You can style it as you like.

Answer 3

Please read this article it will more helpful.

You just implement this using the InfoBox class provided by google that you can find here . It basically extends the infoWindow class allowing for more customization and styling.

Futher more details read this links and links

Answer 4

I used the below script for creating and customizing the new infowindow in google map

    <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
    <script type="text/javascript">
     var locations = [
      ['chennai', 13.0810, 80.2740, 4],
      ['madurai', 9.9300, 78.1200, 5],
      ['coimbatore', 11.0183, 76.9725, 3],
      ['Trichy', 10.8100, 76.9725, 2],
      ['vellore', 12.9202, 79.1333, 1]
    ];

   var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: new google.maps.LatLng(13.0810, 80.2740),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

   var infowindow = new google.maps.InfoWindow();
var info = '<div class="mybackground" style="width:346px; height:183px; background-image:url(images/popup.png);"> For more Details <a href="smaatapps.com/citycaching/"><img src="images/i.png" width="46" height="45">'  + '</div>';

     var marker, i;
var icon='images/';
    for (i = 0; i < locations.length; i++) {  

  var marker = new google.maps.Marker({
        map: map,
        draggable: false,
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        icon: 'images/pin.png',
        visible: true
    });


    var boxText = document.createElement("div");
    boxText.style.cssText = "background-image:url(images/popup.png); width:346px; height:183px;";
    boxText.innerHTML = "<p style='padding-left:40px; position:relative;top:20px;color:white; v-align:center;'><table style='color:white;padding-top:60px'><tr><td><img src='images/i.png' width='46' height='45'></td><td><a href='http://smaatapps.com/citycaching/overview.php'>For More Information</a></td></tr></table></p>";


      var myOptions = {
         content: boxText
        ,disableAutoPan: false
        ,maxWidth: 0
        ,pixelOffset: new google.maps.Size(-10, 0)
        ,zIndex: null
        ,boxStyle: { 
          background: "url('popup.png') no-repeat"
          ,width: "346px"
         }
        ,closeBoxMargin: "22px 29px 2px 2px"
        ,closeBoxURL: "images/close.png"
        ,infoBoxClearance: new google.maps.Size(1, 1)
        ,isHidden: false
        ,pane: "floatPane"
        ,enableEventPropagation: false
    };




  var ib = new InfoBox(myOptions);
   google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      ib.setContent('<div class="mybackground" style="width:346px; height:183px; background-image:url(images/popup.png);"><p style="padding-top:40px;color:white; padding-left:40px;">' + locations[i][0] + '</p><p style="padding-left:40px; position:relative;top:20px;color:white; v-align:center;"><a href="http://smaatapps.com/citycaching/overview.php?id=' + locations[i][3] + '"><table style="color:white;"><tr><td><img src="images/i.png" width="46" height="45"></td><td>For More Information</td></tr></table></p>'  +   '</div>');
     ib.open(map, marker);
    }
  })(marker, i));





     }
    </script>