3D-kreativ 3D-kreativ - 6 days ago 8
Javascript Question

Open info window on load Google Map

I'm wondering if it's possible to open one of the infoWindow objects that are attached to each marker in the code below on page load and not just by clicking on them? As it is now, the user has to click on one of the markers to open an info window.

I tested to create a "stand alone" info window object and that opened fine onload, but it didn't close when I clicked on some of the other markers, because the onClick function was attached to the markers that only could close the info windows attached to that object. Correct med if I'm wrong?

Would this be possible and can I "call" an object by the number or what options do I have? Tips are preciated!

Or if there is possible, that I have tried to open an separate info window onload and be able to close that if I open one of the other info windows!?

var map = null;
var infowindow = new google.maps.InfoWindow();
var iconBase = 'images/mapNumbers/number';
//var zoomLevel = 11;
//var mapPositionLat = 55.678939;
//var mapPositionLng = 12.568359;

function initialize() {

var markerPos = new google.maps.LatLng(55.674196574861895, 12.583808898925781);

var myOptions = {
zoom: 11,
//center: new google.maps.LatLng(55.678939, 12.568359),
center: markerPos,
mapTypeId: google.maps.MapTypeId.ROADMAP
}

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

google.maps.event.addListener(map, 'click', function () {
infowindow.close();
});

google.maps.event.addListener(map, 'zoom_changed', function () {
infowindow.close();
});

google.maps.event.addDomListener(window, 'resize', function() {
map.setCenter(markerPos);
map.setZoom(zoomLevel);
//var center = map.getCenter();
});

// Add markers to the map
var point;
point = new google.maps.LatLng(55.667093,12.581255); createMarker(point, "<div class='infoWindow'>1</div>");
point = new google.maps.LatLng(55.660794,12.58972); createMarker(point, "<div class='infoWindow'>2</div>");
point = new google.maps.LatLng(55.660491,12.587087); createMarker(point, "<div class='infoWindow'>3</div>");
}

// Create markers
function createMarker(latlng, html, name, number) {
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: name,
icon: iconBase + number + '.png'
});

google.maps.event.addListener(marker, 'click', function () {
infowindow.setContent(html);
infowindow.open(map, marker);
//map.setCenter(marker.getPosition());
map.setCenter(55.678939, 12.568359);
});
}

google.maps.event.addDomListener(window, 'load', initialize);

Answer

It is possible. One possible solution is to save markers to an array and then trigger click event on of one of them using google.maps.event.trigger(). For example:

...
var zoomLevel = 11; // uncommented due to error message
var markers = [];

function initialize() {
...

    point = new google.maps.LatLng(55.660491,12.587087); createMarker(point, "<div class='infoWindow'>3</div>");

    google.maps.event.trigger(markers[1], 'click');
}

function createMarker(latlng, html, name, number) {
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        title: name,
        //icon: iconBase + number + '.png'
        icon: iconBase
    });

    // added to collect markers
    markers.push(marker);

    google.maps.event.addListener(marker, 'click', function () {
        console.log('click event listener');
        infowindow.setContent(html);
        infowindow.open(map, marker);
        //map.setCenter(marker.getPosition());

        // corrected due to error
        map.setCenter(new google.maps.LatLng(55.678939, 12.568359)); 
    });
}
Comments