html - 如何在我的网站上正确显示 google maps API？-6ren

html - 如何在我的网站上正确显示 google maps API？

转载作者：行者123 更新时间：2023-11-28 17:04:11

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

此外，我怎样才能将联系人表单的名字和姓氏推送到输入字段的左侧而不是居中对齐？如何正确显示 google maps 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>

最佳答案

How to bring the form left to the maps ?

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

Regarding DeletedApiProjectMapError and Loading the map in 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>

关于html - 如何在我的网站上正确显示 google maps API？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50704500/

文章推荐： python - 如何使用 Msys2 pacman 高效地搜索包？

文章推荐： python - Python/Pandas 中的 R 向量语法

文章推荐： javascript - 在 Web 组件中设置封闭的 DOM 节点的样式

网站
我有这个网站，这个特定页面是安全的，但是当它回发时，它回发到一个不安全的页面。如何解决？我正在使用 ASP.NET 向导。我有这个页面 - checkout.aspx，页面包含这个控件 checko
redirect - 将 Azure 网站 URL 指向另一个 Azure 网站
我有 2 个 azure 网站 - 两个独立的项目我现在有 2 个网址: myazurewebsite.azurewebsites.net myazureblog.azurewebsites.net
redirect - 将 Azure 网站 URL 指向另一个 Azure 网站
我有 2 个 azure 网站 - 两个独立的项目我现在有 2 个网址: myazurewebsite.azurewebsites.net myazureblog.azurewebsites.net
java - 将 React 网站更改为同一域上的 java 网站，但仍显示 React 网站
环境: 旧网站: React 托管在 Heroku URL( http://sameurl.com ) 新网站: Java 托管在 Heroku URL ( http://sameurl.com )
asp.net - 将 ASP.NET 网站 + 数据库发布到 Windows Azure 网站
我已在 Windows Azure 上注册了一个测试帐户来对其进行测试。我构建了一个 Hello world ASP.NET Web 应用程序 + 数据库只是为了测试。我安装了 Visual Stu
performance - : {REST API, 网站} --> {数据库} 或 {网站} --> {REST API} --> {数据库} 哪个更好？
我有一个可以收集和显示各种测量值的产品(不会详细介绍)。正如人们所期望的那样，显示部分是一个数据库+建立在其之上的网站(使用 Symfony)。但是，我们可能还会创建一个 API 来向第三方公开数据
Android软键盘调整背景图片大小(网站)
这个问题在这里已经有了答案: Software keyboard resizes background image on Android (16 个答案) 关闭 8 年前。我有一个类似的问题:So
Maven Checkstyle 网站
这个问题似乎很常见，但我真的无法根据现有答案解决问题。我有一个简单的 maven 项目，没有任何复杂的部署配置等，并且想在点击“mvn site”时生成一个 Maven CheckStyle 报告。
Azure 网站 - 纵向扩展与横向扩展
有没有人看过有关何时进行横向扩展与纵向扩展的最佳选择的任何分析或信息。什么时候一个比另一个更有意义。目前，在标准模式和基本模式下，2 个小型实例的费用与 1 个中型实例的费用相同。拥有 2 个小型
Azure 网站。如何查找有关停止服务的日志
有没有办法找到 azure 网站何时停止？ (我通过门户网站停止了网站，但我不记得是什么时候......) 我正在寻找一些日志，但没有找到任何有用的内容。谢谢。最佳答案您拥有的最接近的是 azu
具有扩展和冗余功能的 Azure 网站
我目前在 Azure VM 的 IIS 中拥有一个网站。我已将该站点复制到 2 个可用区域中的 2 个虚拟机上。这可以保护网站免遭停机。我需要为高负载时刻实现一些可扩展性。这似乎就是创建音阶集的目
Azure CDN 网站
我有一个托管在 Azure 上的网站 ( http://mike-ward.azurewebsites.net/ )。我从 Azure 门户设置了一个指向(引用？)我的网站的 Azure CDN。根据
Azure 网站 - 识别主机插槽
我有一个 Azure 网站(不是 Web 角色)，有 2 个槽:生产和暂存。我只想为生产插槽启用 CDN，而不是为登台启用，问题是我找不到识别主机插槽的方法。 RoleEnvironment 不可用
javascript - 捕获浏览器内容的屏幕截图(网站)
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。我们不允许提出有关书籍、工具、软件库等建议的问题。您可以编辑问题，以便可以用事实和引用来回答它。 4年前关
Azure 网站 - 持久文件问题
我们正在考虑将一些网站从 Azure 云服务迁移到 Azure 网站(事情似乎就是这样进行的)。显然，我们被明确告知云服务不会保留文件系统状态，因为它们会在机器故障时重新部署。我假设网站是基于 Bl
连接到虚拟机的 Azure 网站
我有一个 Azure 网站，需要使用在 VM 上运行的 Elasticsearch 服务。虽然我需要能够锁定对 Elasticsearch 的访问，以便只有 Azure 网站可以访问它，但我似乎无法
Azure 网站 DNS
我有一个 azure 网站，位于 yis3.azurewebsites.net - 我已将其提升为“共享”网站，以便我可以使用自定义域。我拥有从 123-reg.co.uk 购买的域名 yorkshi
Azure 网站 - 如何写入文件
我正在使用 abcPDF 动态创建 PDF。我想保存这些 PDF，以便客户随时检索。最简单的方法(也是我现在在当前服务器上所做的方法)是将完成的 PDF 保存到文件系统。看来我一直坚持使用 blo
Azure 网站 - 监控数据
我们正在尝试了解 Windows Azure 管理 API 为 Azure 网站(而非 Webroles)返回的监控数据的复杂性例如，下图描述了为 CPUTime 检索的数据点。它似乎表明，在晚上
具有多个站点的 Azure 网站
看起来真的很愚蠢，因为我找不到它: 门户网站似乎不太直观，我如何为一个“网站”付费并在其中运行最多 500 个网站？我想当我通过单击左下角的加号添加“网站”时，我添加了整个虚拟机而不是子站点。如何仅添

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 如何在我的网站上正确显示 google maps API？