Skip to content

Instantly share code, notes, and snippets.

@Ahnita

Ahnita/MapBuilder Script

Last active December 9, 2018 09:51
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save Ahnita/00a73404694de43c163e to your computer and use it in GitHub Desktop.
Save Ahnita/00a73404694de43c163e to your computer and use it in GitHub Desktop.
Download ZIP
Google API
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Ahn Bustamante - Web Developer</title>
<!-- Bootstrap core CSS -->
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans|Josefin+Slab|Playfair+Display+SC' rel='stylesheet' type='text/css'>
<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link href="css/normalize.css" rel="stylesheet">
<link href="css/index_style.css" rel="stylesheet">
<!-- jQuery is required for Bootstrap to work -->
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<!-- jQuery Media Script -->
<script src = "js/jquery.media.js" type="text/javascript"></script>
<!-- Latest compiled and minified Bootstrap Javascript-->
<script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<!-- Parallax -->
<script type="text/javascript" src="jquery.stellar.min.js"></script>
<!-- map -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MY AIP KEY"></script>
<!-- instafeed -->
<script type="text/javascript" src="path/to/instafeed.js"></script>
<script>!function(d,s,id){var js, fjs=d.getElementsByTagName(s)[0], p=/^http:/.test(d.location)?'http':'htttps';if(!d.getElementById(id)){js=d.createElement(s);js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','twitter-wjs');
</script>
<script src = "https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css"></script>
<script>
$(function() {
$('#skype').tooltip();
$('#linkedin').tooltip();
$('#twitter').tooltip();
$('#facebook').tooltip();
$('#soundcloud').tooltip();
$('#github').tooltip();
$('#submit').tooltip();
$('#emailahnita').tooltip();
$('#name').tooltip();
$('#phonenumber').tooltip();
});
</script>
<script src = "js/scripts.js"></script>
<script src = "js/kitties.js"></script>
<!-- Custom styles for this template go here -->
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '125232304166875',
xfbml : true,
version : 'v2.3'
});
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class = "header-wrapper">
<body data-spy = "scroll" data-target=".navbar">
<!-- navbar starts here -->
<nav class = "navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class = "projectname">
<a href ="#"><img src="img/logo_ahnita.png" class="img.responsive" alt="Ahn Bustamante">
</a>
</div> <!-- end of projectName -->
<nav class="container-fluid">
<nav class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle=".navbar-collapse">
<span class="sr only"> </span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class = "navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href= "#about">About</a></li>
<li><a href= "#projects">Projects</a></li>
<li><a href="#FAQ">FAQ</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div> <!-- end of navbar-collapse collapse -->
</nav> <!-- End of navbar-header -->
</nav> <!-- end f nav container -->
</nav> <!-- end of navbar -->
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div id="carousel-ahnita" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-ahnita" data-slide-to="0" class="active"></li>
<li data-target="#carousel-ahnita" data-slide-to="1"></li>
<li data-target="#carousel-ahnita" data-slide-to="2"></li>
<li data-target="#carousel-ahnita" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/HNCK3988.jpg" class="img.responsive" alt="Intro Quote">
<div class="carousel-caption">
<h1>Ahn Bustamante</h1>
<p>Aspiring Full Stack Web Developer</p>
</div>
</div>
<div class="item">
<img src="img/bubbles.jpg" class="img.responsive" alt="Responsive">
<div class="carousel-caption">
<h1>Simple</h1>
<p>Minimalism is not the lack of something.
<br>
It's the perfect amount of something.
</div>
</div>
<div class="item">
<img src="img/responsive.jpg" class="img.responsive" alt="best">
<div class="carousel-caption">
<h1>Responsive</h1>
<p> See it in different devices.
<br>
Use your phone, tablet or a computer.
<br>
Anywhere, anytime.
</div>
</div> <!-- end of item -->
<div class="item">
<img src="img/1576.jpg" class="img.responsive" alt="best">
<div class="carousel-caption">
<h1>Intuitive</h1>
<p> When you see it, you know what to do. </p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-ahnita" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-ahnita" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div> <!-- Jumbotron -->
</div> <!-- end of Header -->
<div class = "content">
<div class = "container" id="about">
<div class="header">
<div class = "col-md-4 col-xs-12">
<img src="img/1.png" width="250" height="250" alt = "Ahnita">
</div>
<div class = "col-md-8 col-xs-12">
<h2>"I sing a song of myself, as others have done before me, but none have sung a song quite like this because this one is mine, and there will never be any like me.
<br>
<br>
- Walt Whitman, Leaves of Grass"
</h2>
</div> <!-- end of col-md-8 col-xs-12 -->
</div> <!-- end of header -->
</div> <!-- end of About -->
<div class = "row">
<div class = "col-md-4">
<div class = "container" id = "skills">
<div class = "skill-column">
<h1><span class="glyphicon glyphicon-check" aria-hidden="true"></span>
<br>
My Skills</h1>
<ul class="list-unstyled" id = "skill_list">
<li>Change Management</li>
<li>Procurement Management (S2P) and Enterprise Implementation</li>
<li>Growth Hacking (Social Media)</li>
<li>HTML5</li>
<li>CSS</li>
<li>Ruby on Rails</li>
<li>Cartography</li>
<li>Cooking</li>
</ul>
</div> <!-- end of Skill Column -->
</div> <!-- end of container skill -->
</div> <!-- end of col-md-4 -->
<div class = "col-md-4">
<div class= "container" id="main_text">
<h1><span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
<br>
More about me</h1>
<p>Enthused about life and living, I'm interested in music, art, social media, exploring the outdoors and devouring food made right out of my kitchen. I enjoy working out and staying healthy. Enjoying the simple quirks of everyday.
<br>
<br>
Eager to bridge the gap, I use data and information gathered from investigation to provide solutions. I have been involved in procurement and technology implementation projects within Fortune 500 companies and has been a vital contributor in establishing the structure of an organization. I've worked for big brands such as Apple, Johnson and Johnson, Orica and Barclays Capital to name a few.
<br>
<br>
After months of reflection and finally getting the free time and resources, without much distraction, I'm finally doing what I wanted for a long time. To be an opportunity maker through web development.</p>
</div> <!-- End of main text -->
</div> <!-- End of col-md-4 -->
<div class = "col-md-4">
<div class= "container" id="Services">
<h1><span class="glyphicon glyphicon-tower" aria-hidden="true"></span>
<br>
Services</h1>
<p>Responsive Web Design, User Experience Design, User Interface Design
<br>
<br>
My Process: Empathize, Design, Build
<br>
<br>
Web Dev Unicorn: “Front End, Back-End, User Experience”
</div> <!-- End of services -->
</div> <!-- end of col-md-4 -->
</div> <!-- end of row -->
<div class = "row" id= "works">
<div class = "container" id="projects">
<h1>Projects/Work in Progress</h1>
<div class = "image" id="0">
</div>
<div class = "image" id ="1">
</div>
<div class="image" id = "2">
</div> <!-- End of Projects container -->
</div> <!-- End of row -->
<div class = "container" id= "FAQ">
<div class = "header">
<h1>Frequently Asked Questions</h1>
</div>
<div class = "row">
<h2 class = "learn-more">Learn More</h2>
<div class = "modal-button">
<button class="btn btn-danger" data-toggle="modal" data-target=".bs-example-modal-sm">View CV</button>
<!-- Small modal -->
<div class = "modal fade bs-example-modal-sm" tabindex="-1" role = "dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class = "modal-content">
<div class = "modal-header">
<h4 class="modal-title" id="myModalLabel">CV of Ahn Bustamante</h4>
<button type = "button" class = "closebutton" data-dismiss ="modal" aria-label="close"><span aria-hidden="true">X</span></button>
</div> <!-- end of modal-header -->
<div class = "modal-body">
<iframe id = "modalframe" src = "img/web developer cv.pdf"></iframe>
</div> <!-- end of modal-body -->
</div>
</div> <!-- end of modal dialog -->
</div> <!-- end of modal fade -->
</div>
</div>
<div class = "services-table">
<table>
<tr class="my-row">
<th>Services</th>
<th>Responsive Website</th>
<th>Interactive Website</th>
</tr>
<tr>
<td>Responsive?</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
<td>Interactive</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
<td>Design</td>
<td>Template</td>
<td>Original</td>
</tr>
<tr>
<td>Content Development</td>
<td>No</td>
<td>Yes</td>
</tr>
<tr>
<td>Maintenance</td>
<td>No</td>
<td>3 Months</td>
</tr>
</table>
</div> <!-- END OF services TABLE -->
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"><span class ="glyphicon glyphicon-plus"></span>
Do you offer responsive design solutions?
</a>
</h4>
</div> <!-- end of panel-heading -->
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
Yes! Responsive web design is a bullet proof practice that ensures your website is accessible to everyone - even if they don't own a traditional computer.
</div> <!-- end of panel-body -->
</div> <!-- end of collapseOne -->
</div> <!-- end of panel panel-default -->
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"><span class ="glyphicon glyphicon-plus"></span>
Why did you decide to become a web developer?
</a>
</h4>
</div> <!-- end of panel-heading -->
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
It emerged from a desire to help and make things better. I've spent about 8 years in Singapore helping out in implementation projects that it became a habit. The web is the largest resource of information and it made life easier looking for things to buy and to find locations. My return to the Philippines is like going inside a time capsule, I was back in the 90's. I realized a greater purpose in web development.
</div>
</div> <!-- end of collapseTwo -->
</div> <!-- end of panel panel default -->
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"><span class ="glyphicon glyphicon-plus"></span>
What is your design process?
</a>
</h4>
</div> <!-- end of panel heading -->
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
My design process is to first get the client's requirements, build the design and concept and present it. We go through a feedback loop to see if there's anything that needs to be revised. Once everything is finalized, I can start cracking my fingers to make your website. There will be a review to see if there's any revisions and improvement before launching.
</div>
</div> <!-- end of collapseThree -->
</div> <!-- end of panel panel default -->
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingFour">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFOUR" aria-expanded="false" aria-controls="collapseFOUR"><span class ="glyphicon glyphicon-plus"></span>
Do you provide support?
</a>
</h4>
</div>
<div id="collapseFOUR" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFOUR">
<div class="panel-body">
Certainly, for minor issues I can definitely help but if you require a redesign a month after launching, it will be considered as a new project.
</div>
</div> <!-- end of collapseFour -->
</div> <!-- end of panel panel-default -->
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingFive">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFIVE" aria-expanded="false" aria-controls="collapseFIVE"><span class ="glyphicon glyphicon-plus"></span>
How long will the project take?
</a>
</h4>
</div>
<div id="collapseFIVE" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFIVE">
<div class="panel-body">
It depends on the complexity of the project. If it's just a few pages, it may take 1 to 2 weeks. If it's a website that requires lots of pages linked to a database, it may take a month.
</div>
</div><!-- end of collapseFive -->
</div> <!-- end of panel-default -->
</div> <!-- End of FAQ container -->
<div class = "video">
<iframe src="https://player.vimeo.com/video/66667105?color=ffffff&portrait=0" width="100%" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<div id="instafeed"></div>
<div class = "row">
<div class = "container" id="contact">
<div class = "col-md-6 col-xs-12" id= "contact-text">
<div id="map-canvas" style="width: 100%; height: 100%"></div>
<div class = "header">
<h1>Contact</h1>
</div>
<h3><span class = "glyphicon glyphicon-envelope"></span> Email</h3>
<a href="mailto:ahn.bustamante@gmail.com?Subject=Hello%20Ahnita!" target = "_top" title="Sending me a love letter? Sure!" id="emailahnita">ahn@ahnbustamante.com</a>
<br>
<br>
<h3><span class = "glyphicon glyphicon-map-marker"></span> Location</h3>
Makati, Metro Manila Philippines
<br>
<h3><span class = "glyphicon glyphicon-phone"></span> Skype</h3>
<a href="skype:hola.ahnita?call" id="skype" title="Call Ahnita">hola.ahnita</a>
<br>
<br>
<h3><span class = "glyphicon glyphicon-globe"></span> Social Media</h3>
<a href = "https://ph.linkedin.com/in/ahnbustamante" title="Linkedin" id="linkedin"><img src="img/linkedin.png" class="sm-icon" alt="linkedin"></a>
<a href = "https://twitter.com/wahnderlush" title="Twitter" id="twitter"><img src="img/twitter icon.png" class="sm-icon" alt="twitter"></a>
<a href = "https://www.facebook.com/ahnita6" title="Facebook" id="facebook"><img src="img/facebook icon.png" class="sm-icon" alt="facebook"></a>
<a href = "https://soundcloud.com/ahnita" title="SoundCloud" id="soundcloud"><img src="img/soundcloud.png" class="sm-icon" alt="soundcloud"></a>
<a href = "https://gist.github.com/Ahnita" title= "GitHub" id="github"><img src="img/github.png" class="sm-icon" alt="github"></a>
</div> <!-- end of contact text -->
<form>
<div class = "col-md-6 col-xs-12">
<div class = "form-group">
<label for = "name">Name</label>
<br>
<input type="text" class="name" id="name" title = "The most beautiful name you've ever heard" placeholder = "Your Name"></input>
<br>
<br>
<label for = "text">Email Address</label>
<br>
<input type ="text" class="email" id="email" placeholder = "Your email"></input>
<br>
<label for = "Phone">Contact Number</label>
<br>
<input type ="text" class="phone" id="phonenumber" title= "please include your area code" maxlength = 12 placeholder = "Your number"></input>
<br>
<label for = "message-box">Message</label>
<textarea type = "text" placeholder = "Your message here" class = "message-box" id="message"style = "resize: none" cols="40" rows="5" maxlength = 150></textarea>
<p id="char-count"></p>
<button type = "submit" class="btn btn-danger" data-toggle="tooltip" data-placement="top" title = "Done? Great! Looking forward to talk to you soon!" id="submit">Submit</button>
</div>
</div>
</form>
</div> <!-- end of contact container -->
</div> <!-- end of row-->
</div> <!-- end of content container -->
<footer>
<div class = "footer">
<div class="fb-share" data-href="https://developers.facebook.com/docs/plugins/" data-layout="standard" data-action="like" data-show-faces="true" data-share="true">
<div class="fb-follow" data-href="https://www.facebook.com/zuck" data-colorscheme="light" data-layout="standard" data-show-faces="true"></div>
</div>
<div class = "twittershare">
<a href="https://twitter.com/wahnderlush" class="twitter-follow-button" data-show-count="false">Follow @wahnderlush</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
<br>
&copy;Ahn Bustamante 2015
</div>
</footer>
<script type="text/javascript">
var $root = $('html, body');
$('.navbar-nav a').click(function() {
var href = $.attr(this, 'href');
$root.animate({
scrollTop: $(href).offset().top
}, 500, function () {
window.location.hash = href;
});
return false;
});
</script>
<script type="text/javascript">
var feed = new Instafeed({
get: 'tagged',
tagName: 'awesome',
clientId: 'YOUR_CLIENT_ID'
});
feed.run();
</script>
</body>
</html>
Raw
index_styleV1.css
/* Nav Bar */
nav li ul {
float: right;
width: 100%;
position: fixed;
letter-spacing: 0.05em;
font-family: 'Josefin Sans', serif;
color: #FAFFFF;
z-index: 6;
display: inline-block;
padding: 20px 10px 20px;
}
.projectname a img {
float: none;
padding: 5px;
position: fixed;
z-index: 6;
}
li a {
transition: color 600ms;
font: 20px 'josefin sans', serif;
}
ul.nav a:hover {
color: #D42163 !important;
}
nav {
float: right;
z-index: 6;
}
/* Hero Elements including Carousel */
.jumbotron {
top: 10px;
left: 0px;
background-color: #000;
margin-bottom: 0;
}
.jumbotron h1 {
display: inline-block;
color: #FFFEF9;
font: 40px 'josefin sans', serif;
text-shadow: 2px 1px #000;
top: 10px;
vertical-align: middle;
}
.jumbotron p {
color: #FFFEF9;
font: 20px 'josefin sans', sans-serif;
top: 15px;
margin: center;
}
.container h1 {
font: 40px 'josefin sans', serif;
}
.container h2 {
font: 30px 'josefin slab', sans-serif;
}
.carousel-caption h3 p {
text-align: center;
position: relative !important;
display: inline;
vertical-align: middle;
width: 550px;
top: 210px;
left: 380px !important;
z-index: 600;
}
.carousel-ahnita {
height: 100%;
min-width: 100%;
position: relative;
overflow: hidden;
z-index: 2;
}
.carousel-inner {
display: block;
max-width: 100%;
height: auto !important;
}
.header-wrapper {
overflow: auto;
}
.item {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
/* Headers and text customizations*/
h1 .glyphicon {
color: #E31D70;
}
h1 h2 h3 {
margin-top: 5px;
}
h3:hover {
color: #E31D70;
}
h4 {
font-family: 12px 'josefin slab', sans-serif;
}
.contact h1 {
text-align: center;
margin: 50%;
position: absolute;
font: 20px, 'josefin sans', serif;
}
/* Body */
body {
background-color: #000;
}
div .container {
min-height: 10em;
display: inline-block;
vertical-align: middle;
padding: 20px 20px 20px 20px;
}
.container {
padding: 20px 20px 20px 20px;
margin: 0;
color: white;
width: 100%;
text-align: center;
margin-right: 50%;
top: 50%;
left: 50%;
}
.project {
padding: 50px 50px 50px 50px;
margin-top: 3000px;
}
/*About*/
.mobile-intro {
display: none;
}
.container .about {
margin-top: 100px;
display: block;
position: absolute;
float: left;
z-index: 99;
}
/* Projects */
.image {
box-sizing: border-box;
border: 2px solid pink;
width: 200px;
height:200px;
margin: 5px;
display: inline-block;
position: relative;
}
.info {
display: inline-block;
color: #fff;
font-family: Futura;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 0.5em;
line-height: 1.6;
position: absolute;
top: 15%;
left: 22%;
}
.proj-title {
font-weight: 100;
}
.row h2 {
text-align: center;
}
.img-responsive {
padding: 30px 30px 30px 30px;
}
/*FAQ*/
tr:nth-child(odd) {
background-color: #D42163;
color: white;
}
th {
padding: 10px;
}
.my-row td {
padding: 10px 10px 10px;
width: 15%;
}
table {
display: inline-block;
vertical-align: middle;
padding: 10px 10px 10px 10px;
}
.my-row {
table align: center;
}
.panel-body {
color: #000;
}
.learn-more {
text-align: left;
float: left;
padding: 15px;
}
.modal-button {
float: right;
padding: 5px;
}
.modal-body {
height: 500px;
}
.modal-content {
color: #000;
}
.close {
float: right;
padding: 5px;
}
#modalframe {
padding: 10px;
width: 100%;
height: 100%;
color: rgba (0,0,0,0.25);
}
.closebutton {
background-color: rgba(255, 255, 255, 0.25);
border: 2px solid #fff;
color: #fff;
position: absolute;
right: 5px;
top: 5px;
margin: 2px;
width: 30px;
padding: 5px;
height: 30px;
}
.modal-dialog .modal-content {
background-color: rgba(255, 255, 255, 0.25);
}
.modal-title {
color: #fff;
}
.video {
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding: 10px 10px 10px 10px;
}
#map-canvas {
height: 100%;
}
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
}
/*contact*/
#contact {
background-image: url("../img/course.png");
background-attachment: fixed;
background-size: cover;
height: 500px;
width: 100%;
padding: 20px 20px 20px 20px;
text-align: center;
}
input {
border-radius: 10px;
-moz-border-radius: 5px;
-webkit-border-radius:10px;
height: 28px;
border-color:
}
textarea {
border-radius: 10px;
-moz-border-radius: 5px;
-webkit-border-radius:10px;
width: 100%;
}
.form-group {
padding: 10px 10px 10px 10px;
}
.name {
width: 100%;
color: #000;
}
.message-box {
width: 100%;
color: #000;
}
.email {
width: 100%;
color: #000;
}
.phone {
width: 100%;
color: #000;
}
button {
width: 100%;er
}
/* Footer */
.footer {
display: inline-block;
padding: 20px 20px 20px 20px;
width: 100%;
color: white;
background-color: #000;
}
.twittershare {
float: right;
}
}
.twittershare {
float: right;
}
@media screen and (max-width: 768px) {
/*header*/
.navbar {
width: 100%;
}
.jumbotron{
display: none !important;
}
.header .intro {
display: none !important;
}
/*body*/
html {
background-color: #000;
}
a img {
z-index: 5;
top: 0;}
.container {
width: 100%;
}
.container .about {
background-color: #000;
margin-top: 200px
}
.container .contact h3 a {
font-size: 4.5vw;
text-align: center;
}
/*FAQ*/
.learn-more {
display: none;
}
.modal-button {
display: none;
}
/*Contact*/
.submit {
height: 15px;
}
.container .contact {
padding-bottom: 100px;
}
/*footer*/
.footer {
position: fixed;
bottom: 0;
left: 0;
}
.fb-share {
display: none !important;
}
}
Raw
MapBuilder Script
google.maps.event.addDomListener(window, 'load', init);
var map;
function init() {
var mapOptions = {
center: new google.maps.LatLng(MY COORDINATES),
zoom: 15,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.DEFAULT,
},
disableDoubleClickZoom: true,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
},
scaleControl: true,
scrollwheel: true,
panControl: true,
streetViewControl: true,
draggable : true,
overviewMapControl: true,
overviewMapControlOptions: {
opened: false,
},
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [{"featureType": "water","elementType": "geometry","stylers": [{ "color": "#193341" }]},{"featureType": "landscape","elementType": "geometry","stylers": [{ "color": "#2c5a71" }]},{"featureType": "road","elementType": "geometry","stylers": [{ "color": "#29768a" },{ "lightness": -37 }]},{"featureType": "poi","elementType": "geometry","stylers": [{ "color": "#406d80" }]},{"featureType": "transit","elementType": "geometry","stylers": [{ "color": "#406d80" }]},{"elementType": "labels.text.stroke","stylers": [{ "visibility": "on" },{ "color": "#3e606f" },{ "weight": 2 },{ "gamma": 0.84 }]},{"elementType": "labels.text.fill","stylers": [{ "color": "#ffffff" }]},{"featureType": "administrative","elementType": "geometry","stylers": [{ "weight": 0.6 },{ "color": "#1a3541" }]},{"elementType": "labels.icon","stylers": [{ "visibility": "off" }]},{"featureType": "poi.park","elementType": "geometry","stylers": [{ "color": "#2c5a71" }]}],
}
var mapElement = document.getElementById('map-canvas');
var map = new google.maps.Map(mapElement, mapOptions);
var locations = [
['Ahn Bustamante', 'undefined', 'undefined', 'ahn@ahnbustamante.com', 'ahnbustamante.com', 14.5615324, 121.01169119999997, 'https://mapbuildr.com/assets/img/markers/default.png']
];
for (i = 0; i < locations.length; i++) {
if (locations[i][1] =='undefined'){ description ='';} else { description = locations[i][1];}
if (locations[i][2] =='undefined'){ telephone ='';} else { telephone = locations[i][2];}
if (locations[i][3] =='undefined'){ email ='';} else { email = locations[i][3];}
if (locations[i][4] =='undefined'){ web ='';} else { web = locations[i][4];}
if (locations[i][7] =='undefined'){ markericon ='';} else { markericon = locations[i][7];}
marker = new google.maps.Marker({
icon: markericon,
position: new google.maps.LatLng(locations[i][5], locations[i][6]),
map: map,
title: locations[i][0],
desc: description,
tel: telephone,
email: email,
web: web
});
if (web.substring(0, 7) != "http://") {
link = "http://" + web;
} else {
link = web;
}
}
}
Raw
script.js
$(document).ready(function() {
$('textarea').css('background-color', 'white');
$("#submit").on("click", function(){
console.log("clicked");
});
$('.message-box').on("keyup", function(){
console.log("keyup happened");
var charCount = $(".message-box").val().length;
console.log(charCount);
$("#char-count").html(charCount);
if (charCount > 50) {
$("#char-count").css("color", "red");
}else {
$("#char-count").css("color", "black");
}
if (charCount >= 149) {
alert("Please do not exceed 150 characters");
}
});
for (var i=0; i<rows.length; ++i) {
if (i%2===0) {
$("tr:odd").addClass("odd");
};
};
function initialize () {
var mapOptions = {
center: new google.maps.LatLng(14.561238,121.011642),
zoom: 16,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.DEFAULT}
};
var marker = new google.maps.Marker ({
position: map.getCenter(),
map: map,
title: 'Click to zoom'
});
google.maps.event.addListener(marker, 'click', function(){
map.setZoom(15);
map.setCenter(marker.getPosition());
});
};
google.maps.event.addDomListener(window, 'load', initialize);
var map = new google.maps.Map (document.getElementById ("map-canvas"), mapOptions);
}
}
function loadScript() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp' +
'&signed_in=true&callback=initialize';
document.body.appendChild(script);
}
window.onload = loadScript;
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment