CODEWITHSUNDEEP
google-maps-api-3
scrineym
scrineym

Reputation: 759

Google maps-api v3 InfoWindow automatically open on page load

I am working on a project where I am using the Google Maps api-v3 , On the map there will be a few place markers containing information that I am storing in an InfoWindow.

I am wondering is there anyway that you can set an InfoWindow to automatically open on the page load (i.e automatically open without user interaction).

Searching online all I can seem to find is that it needs to be tied to an event listener but all the events the InfoWindow object seems to have are mouse events.

Does anyone know of a workaround of sorts ?

Upvotes: 23

Views: 56314

Answers (5)

Namdeo Aware
Namdeo Aware

Reputation: 11

function initMap() {
    var cairo = {lat:18.519331, lng: 73.849421};
    var map = new google.maps.Map(document.getElementById('map'), {
        scaleControl: true,
        center: cairo,
        zoom: 15,
    });

    var infowindow = new google.maps.InfoWindow;
    infowindow.setContent('<b>adddress</b>');

    var marker = new google.maps.Marker({map: map, position: cairo});
    infowindow.open(map, marker);
    infoWindow.open(map); 
}
<script async defer 
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCrCByzXY6y5KMSOi9AuqWVf4VYZPyJ5SE&language=hi&region=EG&callback=initMap">
</script>
<div id="map"></div>

Upvotes: 1

Sandeep Patil
Sandeep Patil

Reputation: 51

Here is my code that loads info window with map and also with mouse over. 

map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
    map: map,
    icon: "/images/map-marker.png",
    draggable: true,
    position: results[0].geometry.location

});
var infowindow = new google.maps.InfoWindow({
    content: "Use pin to point your exact locality"
});
google.maps.event.addListener(marker, 'mouseover', function () {
    infowindow.open(map, marker);
});
infowindow.open(map, marker);

Upvotes: 2

Jason Speer
Jason Speer

Reputation: 181

Just take the infowindow.open(map,marker); out of the google.maps.event.addListener. It should look like this:

      var marker = new google.maps.Marker({
      position: myLatlng1,
      map: map,
      title: 'Uluru (Ayers Rock)'

  });

  infowindow.open(map,marker);

  google.maps.event.addListener(marker, 'click', function() {
  });

Upvotes: 3

Roka
Roka

Reputation: 121

I am very late for this question but I wanted to share something.I also searched for its solution and even did not get working from the above solution. Then I tried myself and got my own solution (I am not expert and my idea may not be good but working fine for me). we generally do like

var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', (function(marker) {
return function() {
    infowindow.setContent('some content here');
      infowindow.open(map, marker);
    }
})(marker));

replace the above lines with:

var infowindow = new google.maps.InfoWindow();
infowindow.setContent('some content here');
infowindow.open(map, marker);

dont wait for the click event of marker simply set the content and open it (you must define the map and marker and infowindow points to your marker).

Upvotes: 12

Eric Bridger
Eric Bridger

Reputation: 3794

Not sure I fully understand your question but this works for me with a hard-coded LatLng:

var infoWindow = null;
function initialize() 
{
    infoWindow = new google.maps.InfoWindow();
    var windowLatLng = new google.maps.LatLng(43.25,-68.03);
    infoWindow.setOptions({
        content: "<div>This is the html content.</div>",
        position: windowLatLng,
    });
    infoWindow.open(map); 
} // end initialize

google.setOnLoadCallback(initialize);

Upvotes: 32

Related Questions