Display Infowindow By Default And Different Markers In Google Maps

My HTML:

My JQuery: var infowindow = null; $(document).ready(function () { initialize(); });

Solution 1:

To show site[0] infobubble on page load by default.

infowindow.open(map, site[0]);

To have different marker for each on the map. Assuming you mean different markers images, you could either set them while creating markers or simply call site[i].setIcon('newImage.png'), later

ref:Google Maps API v3: How do I dynamically change the marker icon?

Solution 2:

1. to use custom icons, for a simple icon, just add an icon URL to your sites array, use it in your marker definition.

   icon: sites[5]
   

2. keep references to the markers:

   // in the global scopevar gmarkers = [];
   
   
   
   for (var i = 0; i < markers.length; i++) {
       var sites = markers[i];
       var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
       var marker = new google.maps.Marker({
           position: siteLatLng,
           map: map,
           title: sites[0],
           zIndex: sites[3],
           html: sites[4],
           icon: sites[5]
       });
       gmarkers.push(marker);
       var contentString = "Some content";
   
       google.maps.event.addListener(marker, "click", function () {
           //alert(this.html);
           infowindow.setContent(this.html);
           infowindow.open(map, this);
       });
   

3. Then to click on the 1st marker (which will open the infowindow):

   google.maps.event.trigger(gmarkers[0], "click");

working example