Home/ Questions/Q 8895495
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T23:47:44+00:00

I was just wondering how I could make my custom Google map’s informational popup

  • 0

I was just wondering how I could make my custom Google map’s informational popup appear on load, as opposed to on click? That way it’s up when the page loads?

I’ve got code that generates the map and a custom pointer, as well as a popup window with the address information (dummy text now). But I want this window to appear onload, rather than onclick?

thanks for any help– my code is below! 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">
    function initialize() {
        var latlng = new google.maps.LatLng(55.9724676,-3.1876244);
        var settings = {
            zoom: 15,
            center: latlng,
            mapTypeControl: true,
            mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
            navigationControl: true,
            navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
            mapTypeId: google.maps.MapTypeId.ROADMAP};
        var map = new google.maps.Map(document.getElementById("map_canvas"), settings);

var contentString = '<div id="content">'+
    '<div id="siteNotice">'+
    '</div>'+
    '<h1 id="firstHeading" class="firstHeading">Høgenhaug</h1>'+
    '<div id="bodyContent">'+
    '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>'+
    '</div>'+
    '</div>';

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


var companyLogo = new google.maps.MarkerImage('mapmarker-sm.png',
    new google.maps.Size(128,128),
    new google.maps.Point(0,0),
    new google.maps.Point(50,50)
);
var companyShadow = new google.maps.MarkerImage('images/logo_shadow.png',
    new google.maps.Size(128,128),
    new google.maps.Point(0,0),
    new google.maps.Point(65, 50)
);
var companyPos = new google.maps.LatLng(55.9724676,-3.1876244);
var companyMarker = new google.maps.Marker({
    position: companyPos,
    map: map,
    icon: companyLogo,
    shadow: companyShadow,
    title:"Company Title"
});

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

};

</script>

</head>

<body onload="initialize()">
  <div id="map_canvas" style="width: 100%; height:500px"></div>
</body>


</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can use 'idle' event:

    google.maps.event.addListenerOnce(map, 'idle', function() {
   infowindow.open(map,companyMarker);
});

    That event will be triggered,when all chunks of the map will be loaded completely.

    • 0