Archive for the ‘JavaScript’ Category

Timing in JavaScript

Wednesday, April 22nd, 2015

Here is an example you can learn how to play with timer in JavaScript.

<!doctype html>
<html>
    <head>
        <title>Timer</title>
        <meta charset='utf-8'>
        <style>
            #viewarea, #controls {
                text-align: center;
                width: 20em;
            }
            #viewarea {
                background-color: cyan;
            }
            #sprite {
                padding: 10pt;
                vertical-align: center;
                position: relative;
            }
        </style>
        <script>
            var sprite;
            var delta;
            function setup() {
                sprite = document.getElementById('sprite');
            
            }
        
            function moveRight() {
                if(delta < 8) {
                    delta += 1;
                } else {
                    delta = -8;
                }
                sprite.style.left = delta + 'em';
                console.log('delta: ' + delta + ', left: ' + sprite.style.left);
            }
        
            function timer() {
                moveRight();
                if(delta < 8) {
                    setTimeout(timer, 250);
                }
            }
            
        </script>
    </head>
    <body onload='setup();'>
        <h1>Timer</h1>
        <div id='viewarea'>
            <p id='sprite'>@</p>
        </div>
        <div id='controls'>
            <p>
                <button onclick='home();'>Home</button>
                <button onclick='moveRight();'>Move Right</button><br>
                <button onclick='start();'>Start Interval</button>
                <button onclick='stop();'>Stop Interval</button><br>
                <button onclick='timer();'>Use Timeout</button>
                <button onclick='moveFour();'>Move Four</button>
            </p>
        </div>
    </body>
</html>





Swapping 15 Puzzle – Sliding Tile Game

Wednesday, April 22nd, 2015

This is based on JavaScript, Prototype, JQuery solution. This projects covers moves counter, Changing picture, Hide/Show numbers, and Timer. Feel free to get the code from my website and play around it. I have used innerHTML in some lines.

HTML File:

<!doctype html>
<html>
    <!–
    AD 320, JavaScript Exam
    You should not modify puzzle.html.  Your JS code shall be evaluated against an
    unmodified version of this file.
    –>
    <head>
        <title>Tiling Puzzle</title>
        <meta charset='utf-8'>

        <!– stop the web browser from ever caching this page or its images –>
        <meta http-equiv="Cache-Control" content="no-cache" />
        <meta http-equiv="Pragma" content="no-cache" />
        <meta http-equiv="Expires" content="0" />

        <!– instructor-provided CSS stylesheet; do not modify –>
        <link href="puzzle.css" type="text/css" rel="stylesheet" />

        <!– link to Prototype library; do not modify –>
        <script src="http://ajax.googleapis.com/ajax/libs/prototype/1.7.2.0/prototype.js" type="text/javascript"></script>

        <!– your file –>
        <script src="puzzle.js" type="text/javascript"></script>
    </head>

    <body>
        <h1>AD 320 – Tiling Puzzle</h1>
        <h2>JavaScript Exam</h2>

        <p class="explanation">
            This is a tiling puzzle that is somewhat a cross between a jigsaw puzzle and the fifteen puzzle.
        </p>

        <div id="overall">
            <div id="puzzlearea">
                <!– the following are the fifteen puzzle pieces –>
                <div>1</div>  <div>2</div>  <div>3</div>  <div>4</div>
                <div>5</div>  <div>6</div>  <div>7</div>  <div>8</div>
                <div>9</div>  <div>10</div> <div>11</div> <div>12</div>
                <div>13</div> <div>14</div> <div>15</div>
            </div>

            <p class="instructions">
                Click on a piece to move it to the empty location.
            </p>

            <div id="controls">
                <button id="shufflebutton">Shuffle</button>
            </div>

        </div>
        
    </body>
</html>

 

CSS File:
 

/*
AD 320 – Tiling Puzzle, JavaScript exam

You should not modify this style sheet file.
*/

body {
    background-color: white;
    font-family: "Times New Roman";
    font-size: 14pt;
}

#controls, #overall, #puzzlearea {
    width: 400px;
}

#controls, .instructions {
    padding-top: 10px;
    text-align: center;
}

h1 {
    margin: 0px;
}

h2 {
    margin: 0px;
}

/* Used to center the puzzle. */
#overall {
    margin-left: auto;
    margin-right: auto;
}

/* The area that holds the 15 puzzle pieces. */
#puzzlearea {
    font-family: sans-serif;
    font-size: 32pt;
    height: 400px;
    margin-bottom: 10px;
    padding: 0px;
    position: relative;
}

/* This class should be applied to each of the 15 puzzle pieces. */
.puzzlepiece {
    background-repeat: no-repeat;
    border: 2px solid black;
    cursor: default;
    height: 96px;
    line-height: 96px;
    position: absolute;
    text-align: center;
    vertical-align: middle;
    width: 96px;
}

/* This indicates which piece will be moved. */
.puzzlepiece:hover {
    border-color: red;
    color: #009900;
    text-decoration: underline;
}

 

JavaScript File (JS):

/*
AD320 – Spring Quarter – North Seattle College
Exam#1: Tiling Puzzle, JavaScript  
Author: Kianoush Moradian
@version: 2015-8

This program runs 15 Puzzle Game perfectly based on JavaScript, Prototype
I have added
1-  Hiding numbers
2-  Changing back image
3-  Game statistics

*/

 

var mainDiv;    
var counter =0; // initializing counter


// This is the main function to initialize the game
window.onload = function(){
        
//    window.alert('Welcome to page ');

    mainDiv = $('puzzlearea');
    var myURL = "url('http://kianoushm.com/test/images/world.jpg')";
    setItUp(myURL);
    document.getElementById("shufflebutton").onclick = shuffleIt;
    
    //adding counter to the html page by using innerHTML
    var cr = document.createElement('div');
    cr.id = 'myCounter';
    $('overall').appendChild(cr);
    $('myCounter').style.height = "20px";
    $('myCounter').style.background = "rgba(176,196,222,0.6)";
    $('myCounter').style.marginTop = "10px";
    $('myCounter').style.padding = "5px";
    $('myCounter').style.border = "thin dotted black";
    $('myCounter').innerHTML= "Counter: "
    $('myCounter').innerHTML= "Counter: " + counter.toString();
    
    //adding timer to the html page by suing innerHTML
    var ti = document.createElement('div');
    ti.id = 'myTimer';
    $('overall').appendChild(ti);
    $('myTimer').style.height = "20px";
    $('myTimer').style.background = "rgba(176,196,222,0.6)";
    $('myTimer').style.marginTop = "5px";
    $('myTimer').style.padding = "5px";
    $('myTimer').style.border = "thin dotted black";
    $('myTimer').innerHTML= "Counter: "
    $('myTimer').innerHTML= " Timer:  <span id='minutes'>00</span>:<span id='seconds'>00</span>";
    
    

    //adding select options to our page
    var sl = document.createElement('select');
    sl.name = 'sl';
    sl.id = 'sl';
    $('controls').appendChild(sl);
    var option1 = document.createElement("option");
           option1.text="The World";
        option1.value="world";
        sl.appendChild(option1);
    var option2 = document.createElement("option");
           option2.text="Happy";
        option2.value="happy";
        sl.appendChild(option2);
    var option3 = document.createElement("option");
           option3.text="Love";
        option3.value="love";
        sl.appendChild(option3);
    var option4 = document.createElement("option");
           option4.text="creepy";
        option4.value="creepy";
        sl.appendChild(option4);
    var option5 = document.createElement("option");
           option5.text="diffuse";
        option5.value="diffuse";
        sl.appendChild(option5);
        
    sl.onchange = runSl;
        
    //Adding check box to our page
    var cb = document.createElement('input');
    cb.type='checkbox';
    cb.name='cbox';
    cb.value='cbox';
    cb.id='cbId';
    $('controls').appendChild(cb);
    
    var label = document.createElement('label')
    label.htmlFor = "cbId";
    label.appendChild(document.createTextNode('Show/Hide'));
    $('controls').appendChild(label);
    
    cb.onclick=runCb;
    
    
    }  // End of onload function 
    
    
    //This is my Timer
    var sec = 0,
      timeoutHandler;

    function pad(val) {
    return val > 9 ? val : "0" + val;
    }

    function pausePad() {
    clearTimeout( timeoutHandler );
    }

    function resumePad() {
    pausePad();
    runPad();
    }

    function resetPad() {
    sec = 0;
    resumePad();
    }

    function runPad() {
    timeoutHandler = setInterval(function() {
        document.getElementById("seconds").innerHTML = pad(++sec % 60);
        document.getElementById("minutes").innerHTML = pad(parseInt(sec / 60, 10));
    }, 1000);
    }
    runPad();
        
    function stopTimer () {
        
         $('myTimer').innerHTML= "  Timer:  <span id='minutes'>00</span>:<span id='seconds'>00</span>";
         resetPad();
    
        }
    
    
    //this function changes the background image
    function runSl() {
    pausePad();
    counter =0;  //reset
    $('myCounter').innerHTML= "Counter: " + counter.toString();
        
        var x = document.getElementById("sl").selectedIndex;
           if (document.getElementsByTagName("option")[x].value == 'world')
        setItUp("url('http://kianoushm.com/test/images/world.jpg')");
        if (document.getElementsByTagName("option")[x].value == 'happy')
        setItUp("url('http://kianoushm.com/test/images/happy.jpeg')");
        if (document.getElementsByTagName("option")[x].value == 'love')
        setItUp("url('http://kianoushm.com/test/images/love.jpg')");
        if (document.getElementsByTagName("option")[x].value == 'creepy')
        setItUp("url('http://kianoushm.com/test/images/creepy.jpg')");
        if (document.getElementsByTagName("option")[x].value == 'diffuse')
        setItUp("url('http://kianoushm.com/test/images/diffuse.jpg')");
    
    }    
    
    
    //This function gives styles to our dives
    function setItUp(myURL){
    
    for (i=0;i<15; i++)
    {    
        mainDiv.getElementsByTagName('div')[i].addClassName("puzzlepiece");
        mainDiv.getElementsByTagName('div')[i].style.background  = myURL;
        mainDiv.getElementsByTagName('div')[i].onclick = setup;
            
        }
        
            
    mainDiv.getElementsByTagName('div')[0].style.left= '0px';
    mainDiv.getElementsByTagName('div')[0].style.top='0px';    
    mainDiv.getElementsByTagName('div')[0].style.backgroundPosition='0px 0px';
                        
    mainDiv.getElementsByTagName('div')[1].style.left= '100px';
    mainDiv.getElementsByTagName('div')[1].style.top='0px';
    mainDiv.getElementsByTagName('div')[1].style.backgroundPosition='-100px 0px';

    mainDiv.getElementsByTagName('div')[2].style.left= '200px';
    mainDiv.getElementsByTagName('div')[2].style.top='0px';
    mainDiv.getElementsByTagName('div')[2].style.backgroundPosition='-200px 0px';
            
    mainDiv.getElementsByTagName('div')[3].style.left= '300px';
    mainDiv.getElementsByTagName('div')[3].style.top='0px';
    mainDiv.getElementsByTagName('div')[3].style.backgroundPosition='-300px 0px';
            
    mainDiv.getElementsByTagName('div')[4].style.left= '0px';
    mainDiv.getElementsByTagName('div')[4].style.top='100px';
    mainDiv.getElementsByTagName('div')[4].style.backgroundPosition='0px -100px';
            
    mainDiv.getElementsByTagName('div')[5].style.left= '100px';
    mainDiv.getElementsByTagName('div')[5].style.top='100px';
    mainDiv.getElementsByTagName('div')[5].style.backgroundPosition='-100px -100px';
            
    mainDiv.getElementsByTagName('div')[6].style.left= '200px';
    mainDiv.getElementsByTagName('div')[6].style.top='100px';
    mainDiv.getElementsByTagName('div')[6].style.backgroundPosition='-200px -100px';
            
    mainDiv.getElementsByTagName('div')[7].style.left= '300px';
    mainDiv.getElementsByTagName('div')[7].style.top='100px';
    mainDiv.getElementsByTagName('div')[7].style.backgroundPosition='-300px -100px';
                
    mainDiv.getElementsByTagName('div')[8].style.left= '0px';
    mainDiv.getElementsByTagName('div')[8].style.top='200px';
    mainDiv.getElementsByTagName('div')[8].style.backgroundPosition='0px -200px';
        
    mainDiv.getElementsByTagName('div')[9].style.left= '100px';
    mainDiv.getElementsByTagName('div')[9].style.top='200px';
    mainDiv.getElementsByTagName('div')[9].style.backgroundPosition='-100px -200px';
        
    mainDiv.getElementsByTagName('div')[10].style.left= '200px';
    mainDiv.getElementsByTagName('div')[10].style.top='200px';
    mainDiv.getElementsByTagName('div')[10].style.backgroundPosition='-200px -200px';
        
    mainDiv.getElementsByTagName('div')[11].style.left= '300px';
    mainDiv.getElementsByTagName('div')[11].style.top='200px';
    mainDiv.getElementsByTagName('div')[11].style.backgroundPosition='-300px -200px';
        
    mainDiv.getElementsByTagName('div')[12].style.left= '0px';
    mainDiv.getElementsByTagName('div')[12].style.top='300px';
    mainDiv.getElementsByTagName('div')[12].style.backgroundPosition='0px -300px';
        
    mainDiv.getElementsByTagName('div')[13].style.left= '100px';
    mainDiv.getElementsByTagName('div')[13].style.top='300px';
    mainDiv.getElementsByTagName('div')[13].style.backgroundPosition='-100px -300px';
        
    mainDiv.getElementsByTagName('div')[14].style.left= '200px';
    mainDiv.getElementsByTagName('div')[14].style.top='300px';
    mainDiv.getElementsByTagName('div')[14].style.backgroundPosition='-200px -300px';
        
    }    
    
    //generate random numbers 1~ 15
    function myRandom(){
        var arr = []
    while(arr.length < 15){
      var randomnumber=Math.ceil(Math.random()*15)
      var found=false;
      for(var i=0;i<arr.length;i++){
    if(arr[i]==randomnumber){found=true;break}
      }
      if(!found)arr[arr.length]=randomnumber;
    }
    return arr;
    }
    
    //This function hides and shows numbers 
    function runCb() {
        
    var type;
    if($('cbId').checked) 
        {        
        
    for (i=0;i<15; i++)
    mainDiv.getElementsByTagName('div')[i].style.color = "rgba(0,0,0,0)"; // using alpha transparency
    } else {
    for (i=0;i<15; i++)
    mainDiv.getElementsByTagName('div')[i].style.color = "rgba(0,0,0,1)";
    }
    }

    var eLeft = '300px';  //default empty position
    var eTop = '300px';
    var tempLeft, tempTop;  // temporary position
    

    //This function moves tiles
    function setup() {

    counter++;
    //window.alert("left: "+this.style.left+", top: "+this.style.top+"");
    $('myCounter').innerHTML= "Counter: " + counter.toString(); 


    tempLeft = this.style.left;
    tempTop = this.style.top;
    this.style.left = eLeft;
    this.style.top = eTop;
    eLeft = tempLeft;
    eTop = tempTop;

    }

    //I do not know why it does not work  :'(
    function blink(selector){
    $(selector).fadeOut('slow', function(){
    $(this).fadeIn('slow', function(){
        blink(this);
    });
    });
    }

    // when the shuffle button is pressed, this function is called
    function shuffleIt(){
    
    stopTimer();
    
    counter =0;  //reset
    $('myCounter').innerHTML= "Counter: " + counter.toString(); 
    
    eLeft = '300px';  //reset empty position
    eTop = '300px';
    
    var myArray = $('puzzlearea').getElementsByTagName('div');
    //myArray = shuffle(myArray);
    giveCoordinates(myArray);
    
    }
    
    //Set coordinates to tiles.
    function giveCoordinates(array){
    //This is how I make a random number 1 ~ 15
    
    var arr = []
      while(arr.length < 15){
      var randomnumber=Math.ceil(Math.random()*15)
      var found=false;
      for(var i=0;i<arr.length;i++){
    if(arr[i]==randomnumber){found=true;break}
      }
      if(!found)arr[arr.length]=randomnumber;
    }

    array[arr[14]-1].style.left= '0px';
    array[arr[14]-1].style.top='0px';    
    array[arr[13]-1].style.left= '100px';
    array[arr[13]-1].style.top='0px';
    array[arr[12]-1].style.left= '200px';
    array[arr[12]-1].style.top='0px';
    array[arr[11]-1].style.left= '300px';
    array[arr[11]-1].style.top='0px';
    array[arr[10]-1].style.left= '0px';
    array[arr[10]-1].style.top='100px';
    array[arr[9]-1].style.left= '100px';
    array[arr[9]-1].style.top='100px';
    array[arr[8]-1].style.left= '200px';
    array[arr[8]-1].style.top='100px';
    array[arr[7]-1].style.left= '300px';
    array[arr[7]-1].style.top='100px';
    array[arr[6]-1].style.left= '0px';
    array[arr[6]-1].style.top='200px';
    array[arr[5]-1].style.left= '100px';
    array[arr[5]-1].style.top='200px';
    array[arr[4]-1].style.left= '200px';
    array[arr[4]-1].style.top='200px';
    array[arr[3]-1].style.left= '300px';
    array[arr[3]-1].style.top='200px';
    array[arr[2]-1].style.left= '0px';
    array[arr[2]-1].style.top='300px';
    array[arr[1]-1].style.left= '100px';
    array[arr[1]-1].style.top='300px';
    array[arr[0]-1].style.left= '200px';
    array[arr[0]-1].style.top='300px';
    
    }
    
    
    
    





Google Map and Markers API

Wednesday, April 22nd, 2015

This tutorial shows you how to put Google Map on your website and set Markers on it. Also you will see how it animates markers. The fantastic point in this tutorial is, you can use dynamic html ( JavaScript ) to add elements to your web page (DOM).

HTML File:
<!doctype html>
<html>
  <head>
    <title>US Cities</title>
    <meta charset='utf-8'>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script src='us_cities.js'></script>
    <link rel='stylesheet' href='us_cities.css'>
  </head>
  <body>
    <h1>US Cities</h1>
    <div id='display'>
      <div id='map_area'></div>
      <form name='picker'>
        Select the city to be displayed above.
        <select name='city'>
          <option value='sea'>Seattle</option>
          <option value='sfo'>San Francisco</option>
          <option value='den'>Denver</option>
          <option value='atl'>Altanta</option>
          <option value='bos'>Boston</option>
        </select>
        <input type='button' name='show' value='Show' >
        <input type='button' name='clear' value='Clear'>
       
      </form>
    </div>
  </body>
</html>

 

CSS: 

body {
    background-color: #CCC;
}
h1 {
    text-align: center;
    margin-left: -500px;
}
form {
    margin-top: 10px;
    text-align: center;
}
#map_area {
    width: 750px;
    height: 425px;
    background-color: #CF3;
    border: 2px #000 double;
    margin-left: auto;
    margin-right: auto;
}

 

JavaScript (js) File

        var map;
        
        function initialize() {
            document.picker.show.onclick = setMarker;
            document.picker.clear.onclick = remover;
            
            
        var mapOptions = {
        zoom: 4,
        center: new google.maps.LatLng(38, -99)
        };
        map = new google.maps.Map(document.getElementById('map_area'),
        mapOptions);
                
                
        var option = document.createElement("option");
           option.text="Orlando";
        option.value="mco";
        document.picker.city.appendChild(option);
        
        var option1 = document.createElement("option");
           option1.text="Chicago";
        option1.value="cgx";
        document.picker.city.appendChild(option1);
        
        var option2 = document.createElement("option");
           option2.text="San Diego";
        option2.value="san";
        document.picker.city.appendChild(option2);
        
        var option3 = document.createElement("option");
           option3.text="New York City";
        option3.value="nyc";
        document.picker.city.appendChild(option3);
        
        var option4 = document.createElement("option");
           option4.text="Los Angeles";
        option4.value="la";
        document.picker.city.appendChild(option4);
        
        var btn = document.createElement("BUTTON");
        var t = document.createTextNode("Clear All");
        btn.appendChild(t);
        btn.value="clearall";
        document.picker.appendChild(btn);
        document.picker.clearall.onclick = removeall;
            
        }

        google.maps.event.addDomListener(window, 'load', initialize);

        function setMarker() {
        var lat, lng;
        var tooltip;
        
        if ( document.picker.city.value == 'sea') { 
        
            lat = 47.609722222222224;
            lng= -122.33305555555555;
            seamarker = new google.maps.Marker({
             map:map,
            draggable:true,
            animation: google.maps.Animation.DROP,
            title: 'Seattle',
                position: new google.maps.LatLng(lat, lng )
              
  });
  seamarker.sfoMap(map);
        }
        if ( document.picker.city.value == 'sfo') { 
        
            lat = 37.78333333333333;
            lng= -122.41666666666667;
            sfomarker = new google.maps.Marker({
             map:map,
            draggable:true,
            animation: google.maps.Animation.DROP,
            title: 'Seattle',
                position: new google.maps.LatLng(lat, lng ),
              
  });
  sfomarker.setMap(map);
        }
        if ( document.picker.city.value == 'den') { 
        
            lat = 39.761944444444445;
            lng= -104.88111111111111;
            denmarker = new google.maps.Marker({
             map:map,
            draggable:true,
            animation: google.maps.Animation.DROP,
            title: 'Denver',
                position: new google.maps.LatLng(lat, lng ),
              
  });
  denmarker.setMap(map);
        }
        
        if ( document.picker.city.value == 'atl') { 
        
            lat = 33.755;
            lng= -84.39;
            atlmarker = new google.maps.Marker({
             map:map,
            draggable:true,
            animation: google.maps.Animation.DROP,
            title: 'Atlanta',
                position: new google.maps.LatLng(lat, lng ),
              
  });
  atlmarker.setMap(map);
        }
        
        if ( document.picker.city.value == 'bos') { 
        
            lat = 42.35805555555556;
            lng= -71.06361111111111;
            bosmarker = new google.maps.Marker({
             map:map,
            draggable:true,
            animation: google.maps.Animation.DROP,
            title: 'Boston',
                position: new google.maps.LatLng(lat, lng ),
              
  });
  bosmarker.setMap(map);
        }
        
            if ( document.picker.city.value == 'mco') { 
        
            lat = 28.4158;
            lng = -81.2989;
            mcomarker = new google.maps.Marker({
             map:map,
            draggable:true,
            animation: google.maps.Animation.DROP,
            title: 'Orlando',
                position: new google.maps.LatLng(lat, lng ),
              
  });
  mcomarker.setMap(map);
        }
if ( document.picker.city.value == 'cgx') { 
        
            lat = 41.8369;
            lng = -87.6847;
            cgxmarker = new google.maps.Marker({
             map:map,
            draggable:true,
            animation: google.maps.Animation.DROP,
            title: 'Chicago',
                position: new google.maps.LatLng(lat, lng ),
              
  });
  cgxmarker.setMap(map);
        }
        
if ( document.picker.city.value == 'san') { 
        
            lat = 32.715;
            lng = -117.1625;
            sanmarker = new google.maps.Marker({
             map:map,
            draggable:true,
            animation: google.maps.Animation.DROP,
            title: 'San Diego',
                position: new google.maps.LatLng(lat, lng ),
              
  });
  sanmarker.setMap(map);
        }
if ( document.picker.city.value == 'nyc') { 
        
            lat = 40.7128;
            lng = -74.0058;
            nycmarker = new google.maps.Marker({
             map:map,
            draggable:true,
            animation: google.maps.Animation.DROP,
            title: 'New York City',
                position: new google.maps.LatLng(lat, lng ),
              
  });
  nycmarker.setMap(map);
        }

if ( document.picker.city.value == 'la') { 
        
            lat = 34.05;
            lng = -118.25;
            lamarker = new google.maps.Marker({
             map:map,
            draggable:true,
            animation: google.maps.Animation.DROP,
            title: 'Los Angeles',
                position: new google.maps.LatLng(lat, lng ),
              
  });
  lamarker.setMap(map);
        }
        
   
  google.maps.event.addListener(marker, 'click', toggleBounce);
        
        }
        
        
        
        
    function remover () {
        if ( document.picker.city.value == 'sea')
        {
        seamarker.setMap(null);
        }
        if ( document.picker.city.value == 'sfo')
        {
        sfomarker.setMap(null);
        }
        if ( document.picker.city.value == 'den')
        {
        denmarker.setMap(null);
        }
        if ( document.picker.city.value == 'atl')
        {
        atlmarker.setMap(null);    
        }
        if ( document.picker.city.value == 'bos')
        {
        bosmarker.setMap(null);    
        }
        if ( document.picker.city.value == 'mco')
        {
        mcomarker.setMap(null);    
        }
        if ( document.picker.city.value == 'cgx')
        {
        cgxmarker.setMap(null);    
        }
        if ( document.picker.city.value == 'san')
        {
        sanmarker.setMap(null);    
        }
        if ( document.picker.city.value == 'nyc')
        {
        nycmarker.setMap(null);
        }
        if ( document.picker.city.value == 'la')
        {
        lamarker.setMap(null);    
        }
             
        }
        
        function removeall(){
            
            location.reload();
            
            }

 

 

 





Simple Google Map Tutorial

Tuesday, April 21st, 2015

This is how you can initiate google map on your web page:

 

  <!DOCTYPE html>
  <html>
  <head>
  <title>Simple Map</title>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">
  <style>
  html, body, #map-canvas {
  height: 100%;
  margin: 0px;
  padding: 0px
  }
  </style>
  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
  <script>
   
  var map;
  function initialize() {
  var mapOptions = {
  zoom: 18,
  center: new google.maps.LatLng(47.7, -122.333)
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
  mapOptions);
  }
   
  google.maps.event.addDomListener(window, 'load', initialize);
   
  </script>
  </head>
  <body>
  <div id="map-canvas"></div>
  </body>
  </html>




Simple JavaScript Code

Monday, April 13th, 2015

This is how you can make a very simple form and play with it by using onclick attribute. 

 

<!DOCTYPE html>
  <html>
  <head>
  <title>Playing around with Forms</title>
  <meta charset="windows-1252">
  <script>
   
  // make a function
  function fred() {
  window.alert("hi " + document.oneb.name.value);
  document.oneb.name.value = "";
  }
   
  function cb() {
  var type;
  if(document.oneb.unmask.checked) {
  type = 'text';
  } else {
  type = 'password';
  }
  document.oneb.pwd.type = type;
  }
   
  </script>
  </head>
  <body onload="cb();">
  <h1 id='title' onclick='style.display="none";'>Playing around with Forms</h1>
  <form name="oneb">
  Name: <input type="text" name="name" value='bob'><br>
  Age: <input type='text' name='age' value='99'><br>
  Email: <input type='text' name='email' value='rh@gmail.com'><br>
  Password: <input type='password' name='pwd' value='xyzzy'>
  Unmask <input type='checkbox' name='unmask' onclick='cb();'><br/>
  <input type='submit'>
  <input type='button' value='Checking'
  onclick='fred()'>
  <input type='button' value='Come back'
  onclick='document.getElementById("title").style.display = "block";'>
  </form>
  </body>
  </html>