dbhynds Posted June 20, 2008 Share Posted June 20, 2008 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. Link to comment Share on other sites More sharing options...
justsomeguy Posted June 23, 2008 Share Posted June 23, 2008 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. Link to comment Share on other sites More sharing options...
dbhynds Posted June 26, 2008 Author Share Posted June 26, 2008 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? Link to comment Share on other sites More sharing options...
justsomeguy Posted June 26, 2008 Share Posted June 26, 2008 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);}; Link to comment Share on other sites More sharing options...
dbhynds Posted June 26, 2008 Author Share Posted June 26, 2008 Ahah! You, my friend, are genius. Thanks much. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.