maps new form move markerv2

by witold

HTML

<script type="text/javascript" src="http://pollster.net/script.js"></script>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=AIzaSyBwlgQ1sX-Fk8agu-5nSEOKyq8GTfASYHM" type="text/javascript"></script>


    <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);

              google.maps.event.addListener(marker, 'click', function() { 
              if (this.getAnimation() != null) { this.setAnimation(null); } 
              else { this.setAnimation(google.maps.Animation.BOUNCE); } });

        
        
        //   //    // 
        
        
        

var myMarker = new google.maps.Marker({
    position: pos,
   ...

CSS

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#map_canvas {
  height: 100%;
}

@media print {
  html, body {
    height: auto;
  }

  #map_canvas {
    height: 650px;
  }
}

#current{
     padding-top: 25px;
}

/*  share box css */

#window{
    width:36%;
    border:solid 1px;
               position: center;
        margin: 0;
        padding: 0;
    left: 20%;  
bottom: 0;
}

#window{
           position: fixed;
bottom: 0;
  left: 32%;  
    margin: 0;
    padding: 0;
        width: 36%;
}    
    
#title_bar{
    font: 300 .9em "Helvetica Neue", Helvetica, "Arial Unicode MS", Arial, sans-serif;
    background-color: #4F4F4F;
    height: 25px;
    width: 100%;
}
#button{
    border:solid 1px;
    width: 25px;
    height: 23px;
    float:right;
    cursor:pointer;
    text-align: center;
}
#box, .bar{
    font: 300 1em "Helvetica Neue", Helvetica, "Arial Unicode MS", Arial, sans-serif;
    background-color: #333333
    text-align: left;
    position: center;
    margin: 0;
        padding: 0;
        height: 30px;
    left: 20%;  
    margin: 0;
    padding: 0;
        width: 100%;
}

    .bar {
    margin: 0;
    padding: 0;
        float: left;
        width: 20%; /* must never add up to more than 100% */
    }

    .rep {
        background-color: #333333;               
    }

    .lrep {
        background-color: #333333;
    }

    .tossup {
        background-color: #333333;
    }

    .ldem {
        background-color: #333333;
    }

    .dem {
        background-color: #333333;
    }

            #heading {
                position: center;
                background-color: #333333;
            }   
            #gap {
                position: center;
                background-color: #333333;
            }   
‹/*  share box css end */


/*  POI button css */

@import url(http://fonts.googleapis.com/css?family=Pontano+Sans|Oleo+Script);


h2 {
    margin: 2em;
    font-family: "Oleo Script";
    font-weight: normal;
    font-size: 30px;
  ...

JavaScript

// social buttons minimize
$("#button").click(function(){
    if($(this).html() == "+"){
        $(this).html("-");
    }
    else{
        $(this).html("+");
    }
    $("#box").slideToggle();
});


// add POI button  
$(document).ready(function() {
    
    $('.button2').click(function() {
        
        type = $(this).attr('data-type');
        
        $('.overlay-container').fadeIn(function() {
            
            window.setTimeout(function(){
                $('.window-container.'+type).addClass('window-container-visible');
            }, 100);
            
        });
    });
    
    $('.close').click(function() {
        $('.overlay-container').fadeOut().end().find('.window-container').removeClass('window-container-visible');
    });
    
});