How do I get the infobox on the Google Maps API to open as soon as the map loads, so that the user does not have to click on the marker?

Posted on 2007-08-10
Last Modified: 2013-11-18
I'm using the google maps API to put a marker and an infobox on a map, and I want the info box to open as soon as the map loads so the user doesn't have to click on it. I can't seem to figure out the right syntax. This question is pretty urgent, so quick help is desired. Thanks!
Question by:bkaneweb
    LVL 17

    Accepted Solution

    I don't have too much experience with Google Maps but I looked around and I found this.  Add openInfoWindowHTML right on the GMarker will open it immediatly.  You can of course also put the openInfoWindowHtml on the point on the onclick function of the GMarker.

        var data = '<div style="width: 225px; padding-right: 10px">Example<br />123 Fake Street</div>';
        var point = new GMarker(new GLatLng(30.3965, -88.889993));
        GEvent.addListener(point, "click", function() {
        point.openInfoWindowHtml(data); // This is the line that causes the point to open on page load

    I will give credit where credit is due, I got this from another forum.  The post is at the bottom of this thread:

    Hope this helps,
    Joe P
    LVL 11

    Assisted Solution

    If you look at the source of you'll see their marker is expanded on load.
    Find a section marked <!-- ############ Map loader ############# -->
    Right under there is the code for the marker, including the event listener for clicking it:
          GEvent.addListener(marker, "click", function() {
    where WINDOW_HTML is the html code for the marker.
    The next line after that is what expands the marker right away (same code as in the event listener):

    So basically, replace 'marker' with your own variable name for your info box (if necessary) and WINDOW_HTML with your html code or reference to such.
    LVL 11

    Expert Comment

    Ooops. Didn't see your comment till after I had posted mine, BogoJoker.

    @bkaneweb: Nevermind my above comment, as BogoJoker was first with a pretty much identical suggestion.
    LVL 17

    Expert Comment

    BraveBrain that is perfectly alright.  I'm a little out of my element here (Google Maps) and your findings (along with the great link) reaffirm that our answers are both correct.  Besides, 3 minutes apart is hardly any time at all.  I have navigated to a question, spent 20 minutes researching an answer, spent 5 minutes typing up and answer, only to post my solution to the problem to realize the same solution was posted 20 minutes ago.

    Looks like we are on the same page and probably all learning something.  This is what experts exchange is all about, and I see you're not new to EE either.  I like your profile message by the way =)

    - Joe P
    LVL 11

    Expert Comment

    Thanks, Joe. I've kinda just left the profile like that since I signed up. lol. Had a few years break though, untill I recently figured I had time to go back once in a while ;)

    Thanks for split, grade and points, bkaneweb. And good luck further on with your project :)

    Author Comment

    Thanks for all of your help. It was actually a combination of both of your answers that helped me get this map set up. It was a bit more complicated because I was having the option to get directions to/from the address, but the examples and links were a very useful resource. Thanks again!!

    Featured Post

    Highfive Gives IT Their Time Back

    Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

    Join & Write a Comment

    Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
    Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
    In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

    734 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    23 Experts available now in Live!

    Get 1:1 Help Now