Jump to content
Sign in to follow this  
dbhynds

Add listener not working

Recommended Posts

I'm trying to make a bubble pop up over a marker on a Google Map APIHere's the link of the page I'm working on:http://www.anderson.edu/alert/hospitals.html

    <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA_TcZ-f0O0u7RY2MqeKmZoBSdNmmf_GZX9MlSgEE6OFIufsXyERRvAKNW-JTjOeINh4ckZGsSG3mkEg" type="text/javascript"></script>    <script type="text/javascript">    //<![CDATA[var tinyIcon = new GIcon();tinyIcon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";tinyIcon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";tinyIcon.iconSize = new GSize(12, 20);tinyIcon.shadowSize = new GSize(22, 20);tinyIcon.iconAnchor = new GPoint(6, 20);tinyIcon.infoWindowAnchor = new GPoint(5, 1);markerOptions = { icon:tinyIcon };var geocoder = new GClientGeocoder();var au='<b>Anderson University</b><br />1100 E 5th St.<br />Anderson, IN 46012';var stjohns='<b><a href="http://www.stjohnshealthsystem.org/" target=new>Saint John's Health System</a></b><br />2015 Jackson St.<br />Anderson, IN 46012<br />(765) 649-2511';var community='<b><a href="http://www.communityanderson.com/" target=new>Community Hospital Anderson</a></b><br />1515 N. Madison Ave.<br />Anderson, IN 46011<br />(765) 298-4242';var auaddress = '1100 East Fifth St., Anderson, IN 46012';var stjohnsaddress = '2015 Jackson St., Anderson, IN 46012';var communityaddress = '1515 N. Madison Ave., Anderson, IN 46011';var ptstjohns = new GMarker(new GLatLng(40.096,-85.681), markerOptions); var ptcommunity = new GMarker(new GLatLng(40.1303,-85.692), markerOptions);     function load() {      if (GBrowserIsCompatible()) {        var map = new GMap2(document.getElementById("map"));        var center = new GLatLng(40.1124, -85.675);        map.setCenter(center, 13);        map.setMapType(G_HYBRID_MAP);        map.addControl(new GSmallMapControl());        map.addControl(new GMapTypeControl());        geocoder = new GClientGeocoder();   map.addOverlay(ptstjohns);   map.addOverlay(ptcommunity);GEvent.addListener(ptstjohns, "click",  function() { showstjohns(); });GEvent.addListener(ptcommunity, "click",  function() { showcommunity(); });// THIS IS WHERE I NEED HELP  geocoder.getLatLng(auaddress, function(point) {      if (!point) {        alert(address + " not found");      } else {        var ptau = new GMarker(point);         map.addOverlay(ptau);        GEvent.addListener(ptau, "click",  function() { showau(); });       }});// END NEED HELP      }    }function showau() { ptau.openInfoWindowHtml(au);};function showstjohns() { ptstjohns.openInfoWindowHtml(stjohns);};function showcommunity() { ptcommunity.openInfoWindowHtml(community);};    //]]>    </script>  <body onload="load()" onunload="GUnload()"><h1>Local Area Hospitals</h1>    <div id="map" style="width: 590px; height: 428px"></div><ul><li><a href="java script:void(0)" OnClick="showau()"><strong>Anderson University</strong></a> [<a href="http://maps.google.com/maps?f=d&hl=en&geocode=6142647476688581302,40.111180,-85.665899&saddr=&daddr=1100+East+Fifth+Street,+Anderson,+IN+46012+(Anderson+University)&mra=pe&mrcr=0&sll=40.111534,-85.664944&sspn=0.01733,0.026608&ie=UTF8&z=16" target="new">Get driving directions</a>]<br />1100 E 5th St.<br />Anderson, IN 46012</li><li><a href="java script:void(0)" OnClick="showstjohns()"><strong>Saint John's Health System</strong></a> [<a href="http://maps.google.com/maps?f=d&hl=en&geocode=7087725764188778215,40.096237,-85.680490&saddr=&daddr=2015+Jackson+St,+Anderson,+IN+46016+(St+John's+Health+System)&mra=pe&mrcr=0&sll=40.103816,-85.723945&sspn=0.116069,0.20874&ie=UTF8&z=16" target="new">Get driving directions</a>]<br />2015 Jackson St.<br />Anderson, IN 46012<br />(765) 649-2511<br /><a href="http://www.stjohnshealthsystem.org/" target=new>Website</a></li><li><a href="java script:void(0)" OnClick="showcommunity()"><strong>Community Hospital Anderson</strong></a> [<a href="http://maps.google.com/maps?f=d&hl=en&geocode=14601001884254169233,40.128660,-85.691621&saddr=&daddr=1515+N+Madison+Ave,+Anderson,+IN+46011+(Community+Hospital+Anderson)&mra=pe&mrcr=0&sll=39.874012,-85.907232&sspn=0.931682,1.669922&ie=UTF8&z=16" target="new">Get driving directions</a>]<br />1515 N. Madison Ave.<br />Anderson, IN 46011<br />(765) 298-4242<br /><a href="http://www.communityanderson.com/" target=new>Website</a></li></ul></div>

Here's the excerpt of the critical code that I'm having trouble with:

  geocoder.getLatLng(auaddress, function(point) {        if (!point) {          alert(address + " not found");        } else {          var ptau = new GMarker(point);           map.addOverlay(ptau);          GEvent.addListener(ptau, "click",  function() { showau(); });         }  });

I'm not the best at javascript yet, so dummy explainations with small words would be appreciated.

Share this post


Link to post
Share on other sites

In something I have I add the listener before adding the overlay, I'm not sure if that's an issue though. Install something like Firebug or Debugbar and look for any error messages.

Share this post


Link to post
Share on other sites

I installed Firebug, and here's the error I get:ptau is not defined[break on this error] function showau() { ptau.openInfoWindowHtml(au);};Like I said, I'm not the best at java. What does that mean is the problem? Any suggestions on how to fix it?

Share this post


Link to post
Share on other sites

ptau isn't a global variable, so when you try to use it here:function showau() { ptau.openInfoWindowHtml(au);};It's not defined. The other two functions below that one will have the same problem. When the showau function (or one of the others) runs, it needs access to the ptau that you created in the other function. There are a few ways you can handle that.You could make ptau a global variable, and then you can access it from any function. To do that, you declare it using "var" outside of any function. Inside a function you don't use "var", if you use var then you're saying you want to use a local version instead of the global version.

var the_value;function func1(){  the_value = 1;}function func2(){  alert(the_value);}

You could also pass the variable to the function. So your callback would look like this:GEvent.addListener(ptau, "click", function() { showau(ptau); }); And the function definition would look like this:function showau(pt) { pt.openInfoWindowHtml(au);};That will still work with the au variable because au is global.Or, since you're adding the listener on ptau itself, then you might be able to use this to reference ptau in the event handler. I'm not sure if that will work with the gmap library or not though, but I think it would.function showau() { this.openInfoWindowHtml(au);};

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...