[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1830
  • Last Modified:

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?

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!
0
bkaneweb
Asked:
bkaneweb
  • 3
  • 2
2 Solutions
 
BogoJokerCommented:
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));
    map.addOverlay(point);
    GEvent.addListener(point, "click", function() {
     point.openInfoWindowHtml(data);
    });
    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:
http://www.htmlhelpcentral.com/messageboard/showthread.php?t=13309

Hope this helps,
Joe P
0
 
BraveBrainCommented:
If you look at the source of http://www.google.com/apis/maps/gallery/mapsAPIProducts.html#utm_source=maps_home 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() {
        marker.openInfoWindowHtml(WINDOW_HTML);
      });
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):
      marker.openInfoWindowHtml(WINDOW_HTML);

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.
0
 
BraveBrainCommented:
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.
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
BogoJokerCommented:
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
0
 
BraveBrainCommented:
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 :)
0
 
bkanewebAuthor Commented:
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!!
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now