[Google Maps API v3] bus/transportation icon/info not working with ground overlay

Thu, 13 Oct 2011 15:39:30 -0700 

Hi!

I've managed (not a javascripter but do know actionscript) to create a
map with a ground overlay (3 actually!) + marker + infowindow. So,
those things are all appearing and working as I had hoped for.

Not working are the bus and trolley icons. So, am unable to click and
get info about bus/trolley in conjunction with the ground overlay.

Unfortunately, I can not post the URL. However, I looked around on a
number of examples and found that in no case could there be an overlay
and still click on the bus icons.

Here is an example that is part of google maps javascript API V3:

http://code.google.com/apis/maps/documentation/javascript/examples/groundoverlay-simple.html

You can see that with the overlay there you can not click on the bus
icons.

I am fearing that there is no way around this but also hopeful that I
am wrong.

Below is the code I am using (w/o identifying links). Any help with
this greatly appreciated. (I did do some looking through posts on
overlays but didn't find this issue addressed.)

Much thanks!
Rachel

---------------------
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map_canvas { height: 100% }
</style>
<script type="text/javascript"
    src="http://maps.googleapis.com/maps/api/js?sensor=false";>
</script>
<script type="text/javascript">
  function initialize() {
          //map latLng
    var latlng = new google.maps.LatLng(47.6277, -122.33065);

        //marker latLng
        var markerLatLng = new google.maps.LatLng(47.62752, -122.33089);

        //main map image coordinates
        var imageBounds1 = new google.maps.LatLngBounds(
                new google.maps.LatLng(47.62554,-122.33286),
                new google.maps.LatLng(47.62936,-122.32835));

        //1616 building map image coordinates
        var imageBounds2 = new google.maps.LatLngBounds(
                new google.maps.LatLng(47.63393,-122.32510),
                new google.maps.LatLng(47.63480,-122.32420));

        //pete gross house/hutch school building map image coordinates
        var imageBounds3 = new google.maps.LatLngBounds(
                new google.maps.LatLng(47.62352,-122.33370),
                new google.maps.LatLng(47.62394,-122.33290));


    var myOptions = {
      zoom: 17,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new
google.maps.Map(document.getElementById("map_canvas"), myOptions);

        //main map image
         var fhcrcoverlay1 = new google.maps.GroundOverlay(
          "map_mainCampus.png", //full path removed for example posting
          imageBounds1);

         //1616 building image
         var fhcrcoverlay2 = new google.maps.GroundOverlay(
          "map_1616.png", //full path removed for example posting
          imageBounds2);

         //Pete Gross/Hutch School image
         var fhcrcoverlay3 = new google.maps.GroundOverlay(
          "map_peteGross_hutchSchool.png", //full path removed for example
posting
          imageBounds3);

         //--------------- marker and info window stuff
         var contentString = '<div id="content">'+
    '<div id="siteNotice">'+
    '</div>'+
    '<h1 id="firstHeading" class="firstHeading">Fred Hutchinson Cancer
Research Center</h1>'+
    '<div id="bodyContent">'+
    '<p><img src="FHCRC_vesselSculpture.png" width="105" height="150"
alt="Vessel Sculpture" align="left" hspace="10"></p>'+
    '<p>1100 Fairview Avenue North</BR>' +
    'Seattle, WA 98109-4433</BR>'+
    '(206) 667-5000</p>'+
        '<p>&nbsp;</p>'+
        '<p><a href="http://maps.google.com/maps/ms?
msid=212457292778404937524.0004aea5cd161df69022f&msa=0&ll=47.627136,-122.330967&spn=0.002983,0.003846"
target="_blank"><b>DIRECTIONS</b></a></p>'+
        '<p>&nbsp;</p>'+
    '<p><img src="Logo_BLUE_BLACK.png" width="195" height="49"
alt="FHCRC Logo"></p>'+
    '</div>'+
    '</div>';

var infowindow = new google.maps.InfoWindow({
    content: contentString
});

var marker = new google.maps.Marker({
    position: markerLatLng,
    map: map,
    title:"Fred Hutchinson Cancer Research Center",
        icon:"fhcrc_marker.png"
});

google.maps.event.addListener(marker, 'click', function() {
  infowindow.open(map,marker);
});

         //-------------


         // To add the overlay images to the map, call setMap();
  fhcrcoverlay1.setMap(map);
  fhcrcoverlay2.setMap(map);
  fhcrcoverlay3.setMap(map);
  }

</script>
</head>
<body onLoad="initialize()">
  <div id="map_canvas" style="width:100%; height:100%"></div>

</body>
</html>

-- 
You received this message because you are subscribed to the Google Groups 
"Google Maps JavaScript API v3" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to 
[email protected].
For more options, visit this group at 
http://groups.google.com/group/google-maps-js-api-v3?hl=en.

Reply via email to