如何在我的网站上正确显示谷歌地图 API？

【问题标题】：How can I correctly display a google maps API on my website?如何在我的网站上正确显示谷歌地图 API？
【发布时间】：2018-06-05 16:03:59
【问题描述】：

我目前正在本地主机上工作。我正在尝试在我的网站的联系我们表单中显示谷歌地图 API。但是每当我尝试实现它时，都会显示“DeletedApiProjectMapError”。

此外，我怎样才能将联系表单的名字和姓氏推到输入字段的左侧而不是居中对齐？如何正确显示谷歌地图 API？我想我已经正确使用了我的验证码。我严格按照 W3Schools 上关于 google maps API 的教程进行操作，但没有任何效果。

.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>

【问题讨论】：

    标签： html css google-maps


    【解决方案1】：

    如何将表格左侧带到地图上？

    只需将maps div 放在form div 旁边即可。

    关于 DeletedApiProjectMapError 和在 localhost 中加载地图

    您必须在 Google 控制台中启用 API。 More info in this SO answer

    更新内容：

    .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: 16px;
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;
}

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: 10px;
}

/* Clear floats after the columns */
.rws:after {
    content: "";
    display: table;
    clear: both;
}

form {
    margin: 0 auto;
}

form div + div {
    margin-top: 1em;
}

label {
    display: inline-block;
    width: 90px;
    text-align: right;
}
input, textarea,select {
    width: 100px;
}
input:focus, textarea:focus {
    border-color: #000;
}
    <!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">
          <div>
            <label for="fname">First Name</label>
            <input type="text" id="fname" name="firstname" placeholder="Your name..">
          </div>
          <div>
            <label for="lname">Last Name</label>
            <input type="text" id="lname" name="lastname" placeholder="Your last name..">
          </div>
          <div>
          <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>
          </div>
          <div>
            <label for="subject">Subject</label>
            <textarea id="subject" name="subject" placeholder="Write something.." style="height:170px"></textarea>
          </div>
          <div class="button">
            <input type="submit" value="Submit">
          </div>
        </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>

    【讨论】：

    • 我现在有 google api 工作，但我无法让其他问题工作。我想你可能误解了我想要做什么。查看输入表单上方的标签，我将那些标签（例如名字和姓氏等）推到了第二列的左侧。
    • 更新了答案@AndrewB。希望它能满足你的要求。为了设计表格，我只是提到了MDN Docs
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2013-04-02
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-11-14
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode