Convert v2 to v3 with tabbed info windows

[justawebbie]

Hi, I hope someone can help me out.  I have tried different approaches to changing this old V2 google map to the new version 3 but I keep having issues getting the tabs to work in the info windows.

Here is my old V2 code if anyone can show/explain to me the correct way to set this up i would so appreciate it.  Thanks in advance.

function load() {

   
    if (GBrowserIsCompatible()) {

      // A function to create the marker and set up the event window
      // Dont try to unroll this function. It has to be here for the function closure
      // Each instance of the function preserves the contends of a different instance
      // of the "marker" and "html" variables which will be needed later when the event triggers.   
      function createMarker(point,html) {
        var marker = new GMarker(point);
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });
        return marker;
      }

      // Display the map, with some controls and set the initial location
      var map = new GMap2(document.getElementById("map_canvas"));
      map.addControl(new GSmallMapControl());
      map.addControl(new GMapTypeControl());
      map.setCenter(new GLatLng(54.525961, 15.255119),2);

      // ==================================================
      // A function to create a tabbed marker and set up the event window
      // This version accepts a variable number of tabs, passed in the arrays htmls[] and labels[]
      function createTabbedMarker(point,htmls,labels) {
        var marker = new GMarker(point);
        GEvent.addListener(marker, "click", function() {
          // adjust the width so that the info window is large enough for this many tabs
          if (htmls.length > 3) {
            htmls[0] = '<div style="width:'+htmls.length*20+'px">' + htmls[0] + '</div>';
          }
          var tabs = [];
          for (var i=0; i<htmls.length; i++) {
            tabs.push(new GInfoWindowTab(labels[i],htmls[i]));
          }
          marker.openInfoWindowTabsHtml(tabs);
        });
        return marker;
      }
      // ==================================================

   
      // Set up markers with info windows
   

      var point = new GLatLng(40.143105, 47.576927);
      var marker = createMarker(point,'<div style="width:450px"><A HREF="/aurora/archives/fall-2009/peace-corps/map/profiles/index.xml#tobin"><img src="/aurora/archives/fall-2009/peace-corps/map/tobin_xsm.jpg" width="125" height="167" hspace="3" vspace="0" align="right" /></A><STRONG><FONT SIZE="+1">L&ouml;ki Gale Tobin</FONT></STRONG><br/><br/><STRONG>Served in:</STRONG><br/>Zakataqla, Azerbaijan<br /><STRONG>Years of service:</STRONG><br/>2008 - 2010<br /><STRONG>Project:</STRONG><br/>I am a member of the second group of youth development volunteers and in the sixth group of volunteers to be sent to Azerbaijan. I am stationed in the Zaqatala region, which many consider the most progressive region in Azerbaijan&#40;besides the capital Baku&#41;. I am currently facilitating several college&#45;aged English &quot;conversation&quot; clubs. These clubs are promoted as English&#45;speaking practice clubs, but allow me to challenge participants to critical thinking, community engagement and exposure to a diverse array of interests.  Currently, many of my conversation clubs have morphed into specific interest clubs, with one focused on cooking, another on TOEFL preparation, and a third on photography and graphic design&nbsp;&#40;my personal hobby&#41;. <a href="/aurora/archives/fall-2009/peace-corps/map/profiles/index.xml#tobin">More...</a><br /><STRONG>Affiliation with UAF:</STRONG><br/>Peace Corps Master&#39;s International student in the rural development program<br/><STRONG>Blog:</STRONG><br/><a href="http://farfromnome.blogspot.com">Far From Nome</a><br /><STRONG>Video:</STRONG><br /><a href="http://www.youtube.com/user/peacecorps#p/u/10/QU1Gtijm2iQ">A Peace Corps Volunteer Shares How She Will Bring Skills She&#39s Learning Home to Alaska </a></div>')
      map.addOverlay(marker);
     
      var point = new GLatLng(41.569738,35.907483);
      var marker = createMarker(point,'<div style="width:450px"><A HREF="/aurora/archives/fall-2009/peace-corps/map/profiles/index.xml#kari"><img src="/aurora/archives/fall-2009/peace-corps/map/bafra-class_sm.jpg" width="304" height="201" hspace="3" vspace="0" align="right" /></A><STRONG><FONT SIZE="+1">James Kari</FONT></STRONG><br/><br/><STRONG>Served in:</STRONG><br/>Bafra, Turkey<br /><STRONG>Years of service:</STRONG><br/>1966 - 1968<br /><STRONG>Group number:</STRONG><br/>Turkey 13, teacher of English as a foreign language<br /><STRONG>Affiliation with UAF:</STRONG><br/>Professor Emeritus of Linguistics</div>')
      map.addOverlay(marker);

      var point = new GLatLng(14.165871222812834, 38.900699615478516);
      var marker = createMarker(point,'<div style="width:450px"><A HREF="/aurora/archives/fall-2009/peace-corps/map/profiles/index.xml#stichick"><img src="/aurora/archives/fall-2009/peace-corps/map/stichick_sm.jpg" width="304" height="201" hspace="3" vspace="0" align="right" /></A><STRONG><FONT SIZE="+1">Michael E. Stichick</FONT></STRONG><br/><br/><STRONG>Served in:</STRONG><br/>Adowa, Ethiopia<br /><STRONG>Years of service:</STRONG><br/>1964 - 1966<br /><STRONG>Group number:</STRONG><br/>Group 3, teaching and community development<br /><STRONG>Affiliation with UAF:</STRONG><br/>NSF Summer Institute graduate student in the M.S. teaching program</div>')
      map.addOverlay(marker);
 }
   
    // display a warning if the browser was not compatible
    else {
      alert("Sorry, the Google Maps API is not compatible with this browser");
    }

    }
 

[Pil]

What you're trying to do is not possible this way because the v3 Maps
API doesn't provide info window tabs.

You have a couple of possibilities:

1. Use a third party lib with much overhead, much hassle and slow
loading as side effect.

2. Pay me 100 € to get the short, handsome, and cross-browser-
compatible code of this example

http://www.wolfpil.de/v3/tabbed-infowindow.html

3. Develop tabbed infowindows by yourself.

[Sherrie Roberts]

Thank you for your offer but I think I finally was able to achieve it on
my own. If something happens and I fail on it I will keep you in mind.

[Pil]

If it was this

http://uafcornerstone.net/peace-corp-MAP/map-tab.html

then you infringe my copyright.

[Sherrie Roberts]

I found the code I used in a tutorial and there was no mention of
purchasing to use it. I guess I go back to the drawing board. I will
see if I can get the infobubble to work for me it is free. I found it to
in the same tutorial area I found this code. I am sorry please give me
some time to get the other working properly.

I am just trying to learn to do this on my own.

take care, justawebbie

--
Thank you,
Sherrie Roberts

[Sherrie Roberts]

Here is the source I found it at https://groups.google.com/forum/#!topic/google-maps-js-api-v3/mb6YXj6Q65A in the thread it never mentions payment nor does it implement it is not there to help people out, in fact it states:

Guus Jansen

4/22/11

Re: [Google Maps API v3] Re: How do i create an infowindow with 2 or 3 tabs?

On http://reizigers.jade1.nl/Tabbed_Infowindows.html you can find an example of a tabbed-infowindow implementation, without using any infobubble library.

Maybe the source of this example is helpfull to solve your problem.

I then used the link provided to the page:  http://reizigers.jade1.nl/Tabbed_Infowindows.html and there is never mentions payment or copyright but it does mention in the source code:

//***********functions**Marker- tabbed Infowindow and detailmap creation***
//**   by Guus Jansen, partly copied from others  *****	

I will find a new way to do this but you inferring I infringed upon your copyright is all wrong when in fact in
the source code it makes mention it was copied from others as well. I left all the source code as is to give
credit where it is due for others to use and see. I am sorry to have caused you such an issue with this but
I thought it was out there to help others not entice them to use it so you could threaten copyright and cause distress to them.
I will have it changed as soon as I can.


Take care,
Justawebbie

On 1/25/13 8:18 AM, Pil wrote: