Display infowindow by default and different markers in Google Maps

Question

My HTML:

<div id="map_canvas" style="width: 625px; height: 500px;"></div>

My JQuery:

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

    function initialize() {

        var centerMap = new google.maps.LatLng(40.68194, -73.94439);

        var myOptions = {
            zoom: 13,
            center: centerMap,
            scaleControl: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }

        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        setMarkers(map, sites);
        infowindow = new google.maps.InfoWindow({
                content: "loading...", maxWidth: 150
            });

        //var bikeLayer = new google.maps.BicyclingLayer();
        //bikeLayer.setMap(map);
    }   

    function setMarkers(map, markers) {

        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]
            });

            var contentString = "Some content";

            google.maps.event.addListener(marker, "click", function () {
                //alert(this.html);
                infowindow.setContent(this.html);
                infowindow.open(map, this);
            });
        }
    }

How can I achieve,

To show site[0] infobubble on page load by default.
To have different marker for each on the map.

score 2 · Accepted Answer · edited May 23 '17 at 12:15

2

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?

edited May 23 '17 at 12:15

Community

1
1

answered May 30 '13 at 19:40

varun

4,522
33
28

geocodezip · Answer 2 · 2013-05-30T23:48:59.780

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]
```

keep references to the markers:

// in the global scope
var 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);
    });

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

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

working example

Display infowindow by default and different markers in Google Maps

2 Answers2

Linked

Related