views:

73

answers:

0

Hi,

I'm moving an app for v2 to v3 of gmaps api and I'm stuck on the following problems :

How to fire an event (onmouseover) from a side bar to open the respective info window and set the icon to rise to the top by increasing it's zindex.

I have pasted my code so far - I have added 10 hash's above the two lines of code (found towards the bottom of the code sample) that 'should' create the popup on mouseover

if anyone can point me in the right direction I would be much obliged.

      <script>
    window.onload = function() {

        // Creating a map
        var options = {  
          zoom: 4,  
          center: new google.maps.LatLng(0, 0),  
          mapTypeId: google.maps.MapTypeId.ROADMAP  
        };  
        var map = new google.maps.Map(document.getElementById('map'), options);  


        var eDData = {'eDMarkers': [
                {
            'lat': 40.7132, 
            'lng': -73.9977,
            'markerType': 'markers',
      'markerNumber' : '1',
      'markerTitle' : 'Title 1',
      'markerImage' : '2dimsumgogo.jpg',
      'markerContent' : 'Content...'
          },      
             {
            'lat': 40.7153, 
            'lng': -73.9982,
            'markerType': 'markers',
      'markerNumber' : '2',
      'markerTitle' : 'Title 2',
      'markerImage' : 'chinatown_icecream.jpg',
      'markerContent' : 'Content...'
          },  

        ]};


        var infowindow;
        var bounds = new google.maps.LatLngBounds();


        for (var i = 0; i < eDData.eDMarkers.length; i++) {

          var eDMarkers = eDData.eDMarkers[i];
       var myLatLng = new google.maps.LatLng(eDMarkers.lat, eDMarkers.lng);

          var marker = new google.maps.Marker({
            position: myLatLng, 
            map: map,
            icon: '/assets/theme/grey/gfx/' + eDMarkers.markerType + '/' + eDMarkers.markerNumber + '.png',
      title: eDMarkers.markerTitle  
          });  

          (function(i, marker) {
      var eDcontent = eDData.eDMarkers[i];
                google.maps.event.addListener(marker, 'click', function() {                

              if (!infowindow) {
                infowindow = new google.maps.InfoWindow();
              }

        if(eDcontent.markerImage != '') {
         var image = '<img style="float:left" src="uploads/locations/'+eDcontent.markerImage+'" alt="" width="85px" height="85px">' 
         }

        var content = '<div>'+eDcontent.markerContent+'</div>'
            + image;

              infowindow.setContent(content);       

              infowindow.open(map, marker);

   ###########  populating the array ###############
        gmarkers.push(marker);  

            });
          })(i, marker);

     bounds.extend(myLatLng);

        }//end for
   ########  creating the function to trigger the evens on the created array #####
     function myclick(i) {  
      google.maps.event.trigger(gmarkers[i], 'click');
      }

        map.fitBounds(bounds);

      }
    })();
    </script>

    <div class="event-list clear left" onmouseover="myclick(1)">                        
     Side bar element 
    </div>