0

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);
2
  • Is something like this what you're looking to do? Click "Run with JS" and and then utilize the "Click Me!" buttons. You could trigger these clicks on load of course with your lat long.
    – d3c0y
    Mar 2, 2014 at 8:47
  • @d3c0y I want one of the info windows to be open on load. Your example just show markers.
    – 3D-kreativ
    Mar 2, 2014 at 8:52

3 Answers 3

5

In order to display InfoWindow when the map loads, make the call to

infowindow.open(map, marker);

outside of the marker listener.

Below is demonstrated createMarker function, where parameter displayInfoWindow defines whether to display InfoWindow when the map loads:

// Create marker
function createMarker(map,markerPos, markerTitle,infoWindowContent,displayInfoWindow) {
  var marker = new google.maps.Marker({
      position: markerPos,
      map: map,
      title: markerTitle,
  });

  var infowindow = new google.maps.InfoWindow({
      content: infoWindowContent
  });

  if(displayInfoWindow) {
     infowindow.open(map, marker);
  }
  google.maps.event.addListener(marker, 'click', function () {
     infowindow.open(map, marker); 
  });  
}

Example: http://jsbin.com/lusuquwu/1/

3

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)); 
    });
}
8
  • It's working! But if the position is close to the map border, the info window doesn't show all of the window, some of it is outside of the map. Usally the info windows are opened inside the map with some distance to the border of the map. Is there a way to handle this?
    – 3D-kreativ
    Mar 2, 2014 at 9:09
  • That's one of the problem with infowindows in such situations. Solution could be changing the center, offseting infowindow... Mar 2, 2014 at 9:13
  • Hmm can I call a custom function with this trigger thing, so that I also can change the zoom and som other things? That would be great!
    – 3D-kreativ
    Mar 2, 2014 at 9:13
  • No, but you can do that inside event listener which react on click event. See also MapsEventListener google docs Mar 2, 2014 at 9:15
  • OK, but is there a way to set the marker to the center of the map and change the zoom when triggering when open an infoWindow on pageload?
    – 3D-kreativ
    Mar 2, 2014 at 9:17
0

I combined info from this and another site to come up with the below solution as most solutions are for multi-marker maps.

Just a few lines is all you actually need.

// Start with your map
var map = new google.maps.Map(...);

// Now define the info window using HTML. You can insert images etc.
var info = new google.maps.InfoWindow({content: 'YOUR HTML HERE'});

// Now define the marker position on the map
var marker = new google.maps.Marker({map: map, position:{lat: 'YOUR LATITUDE',lng: 'YOUR LONGITUDE'}});

Now we have the variables, just hide the marker, show the info window and set the map zoom and center.

// Set the map zoom
map.setZoom('YOUR ZOOM LEVEL [1 - 20]');

// Set the map center
map.setCenter({lat: 'YOUR LATITUDE',lng: 'YOUR LONGITUDE'});

// Hide the marker that we created        
marker.setVisible(false);

// Open the info window with the HTML on the marker position
info.open(map, marker);

For the content, you can create layers and insert images and text as you need. Just make sure you include the full URL to images in your html.

I also recommend adding this to your CSS to hide the close button, which effectively makes this a permanent, info window.

.gm-style-iw + div {display: none;}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.