works2

by witold

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
    <script>
      var map;

      function initialize() {
        var mapOptions = {
          zoom: 10,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('map_canvas'),
            mapOptions);

        layer = new google.maps.FusionTablesLayer({
          query: {
            select: 'bizCity',
            from: '1yfyijoeC3GwDnnLutBI8IFOH8y2mfZ8LJGUDly4'
          }
        });

        layer.setMap(map);

        // Try HTML5 geolocation
        if(navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position) {
            var pos = new google.maps.LatLng(position.coords.latitude,
                                             position.coords.longitude);

            var infowindow = new google.maps.InfoWindow({
              map: map,
              position: pos,
              content: '<center><b><font size=5><img display="block" src="bikeicon.png" alt="map logo" /><p>Welcome.<p>Browse around, check out some attractions, and remember to add your own.</p></font></b></center>' 
            });

            var marker = new google.maps.Marker({ position:pos, map: map, animation: google.maps.Animation.BOUNCE }); 

            infowindow.open(map,marker);
            map.panBy(20,-100);

        
        // this stops tbe initial marker from bounding around.  For now, this listener is commented out.  
        //google.maps.event.addListener(marker, 'click', function() { 
        //      if (this.getAnimation() != null) { this.setAnimation(null); } 
        //    else { this.setAnimation(google.maps.Animation.BOUNCE); } });

        
        
        //   //    //    BEGINNING OF PROBLEM CODE.
        
   
   
        // click listenrer that places a marker
         google.maps.event.addListener(map, 'click', function(event) { 
                  placeMarker(event.latLng);
         ...

CSS

/* google maps styling */

#map_canvas {
  height: 100%;
}

  #map_canvas {
    height: 650px;
  }
}