Seattle Web Design 
How to make Custom Logo for your WP theme?
You can do it in a very 3-step coding.
1- Go to functions.php and add the following code
function themename_custom_logo_setup() {
$defaults = array(
'height' => 100,
'width' => 400,
'flex-height' => true,
'flex-width' => true,
'header-text' => array( 'site-title', 'site-description' ),
);
add_theme_support( 'custom-logo', $defaults );
}
add_action( 'after_setup_theme', 'themename_custom_logo_setup' );
2- Go to your WP dashboard --> Theme --> Customize --> Add your logo
3- Add the following code to your header.php where the logo should be displayed.
if ( function_exists( 'the_custom_logo' ) ) {
the_custom_logo();
}
Protect html email by PHP
If you need to have your email address on your php page, you need to protect it. Here is an option you have:
1- Create an include php file like "email-hide.php" and saved it in your include folder.
2- Copy the following php code in it and save your file.
<?php
function hide_email($email)
{ $character_set = '+-.0123456789@ABCDEFGHIJKLMNOPQRSTUVWXYZ_abcdefghijklmnopqrstuvwxyz';
$key = str_shuffle($character_set); $cipher_text = ''; $id = 'e'.rand(1,999999999);
for ($i=0;$i<strlen($email);$i+=1) $cipher_text.= $key[strpos($character_set,$email[$i])];
$script = 'var a="'.$key.'";var b=a.split("").sort().join("");var c="'.$cipher_text.'";var d="";';
$script.= 'for(var e=0;e<c.length;e++)d+=b.charAt(a.indexOf(c.charAt(e)));';
$script.= 'document.getElementById("'.$id.'").innerHTML="<a href=\\"mailto:"+d+"\\">"+d+"</a>"';
$script = "eval(\"".str_replace(array("\\",'"'),array("\\\\",'\"'), $script)."\")";
$script = '<script type="text/javascript">/*<![CDATA[*/’.$script.’/*]]>*/</script>';
return '<span id="'.$id.'">[javascript protected email address]</span>'.$script;
}
?>
3- On your website header, include your hide-email.php file
<!–Hiding email address PHP function–>
<?php include "include\hide-email.php"; ?>
4- Go to the page you like to embed your email address and caste this piece of code.
<?php echo hide_email('name@domain.com'); ?>
* Do not forget to change "name@domain.com" to your desire email address.
Yee-Haw
Login automatically from your file to protected folder
If you have a folder which is password protected by .htaccess & .htpasswd, to login automatically from
your file and access data inside the folder, use the following format:
<a href="http://username:password@yourDomain.com
/protectedFolderName/yourFileInsideFolder.html">
Yee Haw!
PHP Go Back Button
My solution for you is using PHP and Server capabilty to keep track of your PHP pages.
Use followong code in your markup and see the magic
<?php
url = htmlspecialchars($_SERVER[‘HTTP_REFERER’]);
echo "<a href='$url'>back</a>";
?>
——————————————————
Creating mailto: link
Today I wanted to create a specific link in my responsive (mobile) html design template. When user clicks the link, it should open up the mail client with my desire email addresses, subject, and some text in the body. It was a good idea to CC that email to one or two other email addresses. I searched a lot and here is the final structure I came up with:
<a href="mailto:myFirstEmail@example.com? subject=mySubject&body=myLine1%0D%0AmyLine2&cc=test1#example.com;
test2@example.com&bcc=test3@example.com "> Click Here </a>
Do not forget to leave key words like mailto, subject, body, cc, and bcc all in lowercase, otherwise they do not work appropriately.
If you line to have line break in the body, you can easily use %0D%0A
Above format works perfectly on almost all web browsers and mail clients. The only issue is it does not work in mobile Apps appropriately. Any idea ?
* DO NOT USE "#" Inside your mailto link
Find Absolute Path of Your File
I was setting .htaccess file for one of my projects and I noticed I needed to know the absolute path of my file.
Here is what I found really handy and I would like to share it with you.
All you need to do is opening an editor and copy and paste the bellow code in it. Save you file as "pathfinder.php" and
upload this file to your folder. Now all you need is a double click on "pathfinder.php".
<?php
$dir = dirname(__FILE__);
echo "<p> Full path to your directory is" . $dir ."</p>";
?>
Error Detected – We are unable to decrypt the certificate id
I logged on to my PayPal account and then created my button. I selected and grabbed all codes and pasted it to my WordPress website. Everything was looking good until I clicked on the button. Boom.. Error Detected – We are unable to decrypt the certificate id
I searched a lot and made lots of changes in my code and eventually found the problem. The encrypted messy codes is ending with "—–>". When you paste the code to your wordpress editor, it makes a big empty gap between the code and "—–>". To fix the issue just remove the gap and join "—->" to the encypted messy code. Yess.. you are done.
BTW, If you need to open up your Paypal page in a new window, just do target="_blank". It works for me!
Timing in JavaScript
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
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
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();
}