谷歌地图与自定义信息窗集成多个标记

Question

I have used coding for multiple markers and I need to customize the info window which is now displaying the default one. i need to custom the window with the background image and with with link

      <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 marker, i;
var icon='images/';
for (i = 0; i < locations.length; i++) {  
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    icon: icon + 'pin.png',
    map: map
  });

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
    }
    })(marker, i));
   }
 </script>

Answer 1

You can place anything you like HTML wise into the info window that you create with this call.

infowindow.setContent(locations[i][0]);

So you can do this for example

var info = '<div class="mybackground">' +
'<div>Hello World</div>
'<div><a href="url">Link</a></div>
'<div>';
infowindow.setContent(info);