Google map - infowindow pop-up on random marker every 3 seconds

Question

Here is the problem.

I need to make a Google map with multiple markers.
Every marker has an infowindow with different content. When you open the website after 3 seconds infowindow pops up on a random marker.
Then it closes and after 3 seconds infowindow pop-up form another random marker and so on.
Also the infowindow needs to show automatically not with click on the marker

What do I need to be able to do this?

Maybe this is of help :-) http://stackoverflow.com/questions/5868903/marker-content-infowindow-google-maps?rq=1 — , Jul 10 '14 at 07:55

K K · Accepted Answer · 2014-07-10T10:16:48.500

It was easy. First, you need to setup a map with multiple markers, store all those markers in an array and then using setInterval trigger click event on them.

HTML:

<div>
    <div id="map" style="width: 500px; height: 400px;"></div>
    <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
</div>

JS:

//Define markers attribute
var locations = [
    [
        "New Mermaid",
    36.9079, -76.199,
    1,
        "Georgia Mason",
        "",
        "Norfolk Botanical Gardens, 6700 Azalea Garden Rd.",
        "coming soon"],
    [
        "1950 Fish Dish",
    36.87224, -76.29518,
    2,
        "Terry Cox-Joseph",
        "Rowena's",
        "758 W. 22nd Street in front of Rowena's",
        "found"],
    [
        "A Rising Community",
    36.95298, -76.25158,
    3,
        "Steven F. Morris",
        "Judy Boone Realty",
        "Norfolk City Library - Pretlow Branch, 9640 Granby St.",
        "found"],
    [
        "A School Of Fish",
    36.88909, -76.26055,
    4,
        "Steven F. Morris",
        "Sandfiddler Pawn Shop",
        "5429 Tidewater Dr.",
        "found"],
    [
        "Aubrica the Mermaid (nee: Aubry Alexis)",
    36.8618, -76.203,
    5,
        "Myke Irving/ Georgia Mason",
        "USAVE Auto Rental",
        "Virginia Auto Rental on Virginia Beach Blvd",
        "found"]
]

//Set up map.
var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    // center: new google.maps.LatLng(-33.92, 151.25),
    center: new google.maps.LatLng(36.8857, -76.2599),
    mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
var markers = [];
for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
    });
    markers.push(marker); // Store the markers in an array.
    google.maps.event.addListener(marker, 'click', (function (marker, i) {
        return function () {
            infowindow.setContent(locations[i][0], locations[i][6]);
            infowindow.open(map, marker);
        }
    })(marker, i));
}
var i = 0;
setInterval(function () {
    if (i == markers.length) i = 0;
    google.maps.event.trigger(markers[i], 'click'); // Trigger click on marker after 3s
    i++;
}, 3000);

Demo : http://jsfiddle.net/lotusgodkk/pGBZD/153/ //For sequential order

Demo: http://jsfiddle.net/lotusgodkk/pGBZD/154/ // For random order

Thank you very much, it is working great. I just want to ask you what should I put to make the pop-up on random marker, every time an infowindow to be shown on different marker, not in the same order? — unknownDev, Jul 10 '14 at 10:08
You can write a function to select random index from the array and pass it on to the marker click events. Check the updated link in answer — K K, Jul 10 '14 at 10:16

Google map - infowindow pop-up on random marker every 3 seconds

1 Answers1