I am currently working from my localhost. I am trying to display the google maps API within my contact us form in my website. But whenever I try to implement it, an "DeletedApiProjectMapError" is shown.
In addition, how can I have the firstname and lastname of the contact form pushed to the left side of the input fields and not being center justified? How do I correctly display the google maps API? I think I have used my authentication code correctly. I have strictly followed W3Schools tutorial on google maps API, but nothing is working.
.topnav a {
color: black;
text-decoration: none;
font-style: bold;
font-size: 20px;
font-family: Cabin;
padding-left: 20px;
padding-right: 20px;
}
.column {
float: left;
width: 25%;
}
/* Clear floats after rows */
.row:after {
content: "";
display: table;
clear: both;
padding: 8px;
}
/* Content */
.content {
background-color: white;
padding: 10px;
}
.topnav{
float: right;
padding-top: 20px;
}
.Who{
padding: 20px;
text-align: center;
font-style: bold;
font-size: 20px;
font-family: Cabin;
}
.Who p{
font-size: 16px;
font-family: Lora;
padding: 20px;
}
h1{
color: black;
font-family: Cabin;
text-align: center;
}
body, html {
height: 100%;
position: relative;
top: 0; right: 0; bottom: 0; left: 0;
margin: 0;
padding: 0;
}
.bg {
/* The image used */
position: relative;
top: 0; right: 0; bottom: 0; left: 0;
background-image: url("house.jpg");
opacity: 0.80;
filter: alpha(opacity=80); /* For IE8 and earlier */
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
* {
box-sizing: border-box;
}
/* Style inputs */
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
/* Style the container/contact section */
.con {
border-radius: 5px;
background-color: #f2f2f2;
padding: 10px;
}
/* Create two columns that float next to eachother */
.cols {
float: left;
width: 50%;
margin-top: 6px;
padding: 20px;
}
/* Clear floats after the columns */
.rws:after {
content: "";
display: table;
clear: both;
}<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 traditional//EN">
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=`device-width`, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
</script>
<link href='https://fonts.googleapis.com/css?family=Cabin:700' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css">
</head>
<body>
<div class = "bg">
<div class="topnav">
<a class="active" href="#Home">Home</a>
<a href="#Who">Who</a>
<a href="#Portfolio">Portfolio</a>
<a href="#Contact">Contact</a>
</div>
</div>
<div class = "Who">
<h1 id= "Who" >Who are we ?</h1>
<p>Cabin is a website theme I created to demonstrate my skills
as a front-end web developer.
This website uses stock photos free of property and commercial rights.
</p>
<h1 id="Portfolio">Portfolio</h1>
<div class="row">
<div class="column">
<div class="content">
<img src="picOne.jpg" alt="" style="width:100%">
<h3>My Work</h3>
<p>Lorem ipsum..</p>
</div>
</div>
<div class="column">
<div class="content">
<img src="picTwo.jpg" alt="" style="width:100%">
<h3>My Work</h3>
<p>Lorem ipsum..</p>
</div>
</div>
<div class="column">
<div class="content">
<img src="picThree.jpg" alt="" style="width:100%">
<h3>My Work</h3>
<p>Lorem ipsum..</p>
</div>
</div>
<div class="column">
<div class="content">
<img src="picFour.jpg" alt="" style="width:100%">
<h3>My Work</h3>
<p>Lorem ipsum..</p>
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="content">
<img src="picOne.jpg" alt="" style="width:100%">
<h3>My Work</h3>
<p>Lorem ipsum..</p>
</div>
</div>
<div class="column">
<div class="content">
<img src="picTwo.jpg" alt="" style="width:100%">
<h3>My Work</h3>
<p>Lorem ipsum..</p>
</div>
</div>
<div class="column">
<div class="content">
<img src="picThree.jpg" alt="" style="width:100%">
<h3>My Work</h3>
<p>Lorem ipsum..</p>
</div>
</div>
<div class="column">
<div class="content">
<img src="picFour.jpg" alt="" style="width:100%">
<h3>My Work</h3>
<p>Lorem ipsum..</p>
</div>
</div>
</div>
<div>
<h1 id="Contact">Contact Us</h1>
<div class="con">
<div style="text-align:center">
<h3>Contact Form</h3>
</div>
<div class="rws">
<div class="cols">
<div id="map" style="width:100%;height:500px"></div>
</div>
<div class="cols">
<form action="/action_page.php">
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your name..">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
<label for="country">Country</label>
<select id="country" name="country">
<option value="australia">Australia</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>
</select>
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Write something.." style="height:170px"></textarea>
<input type="submit" value="Submit">
</form>
</div>
</div>
</div>
</div>
<div class="footer"> <p id="ft">Website created by Andrew B <br> Date created: 03/04/2016</p></div>
</div>
</body>
<script>
function myMap() {
var myCenter = new google.maps.LatLng(51.508742,-0.120850);
var mapCanvas = document.getElementById("map");
var mapOptions = {center: myCenter, zoom: 12};
var map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new google.maps.Marker({position:myCenter});
marker.setMap(map);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBtU_Z1n3cfwKbDlRN_incLUZVPHof0DJA&callback=myMap"></script>
</html>
