Question

您好，我想将我的Google Maps API地图以及所有标记和信息窗口嵌入到另一个网页中。

我尝试使用'iframe'标记，但是由于未显示地图，因此该标记似乎无效。我认为我没有正确使用'iframe'标签，因此，如果有错误，将不胜感激。

这是我的Google Maps API代码：

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 51.528308, lng: -0.3817709},
          zoom: 10
        });

         function initialize() {
             var myLatlng1 = new google.maps.LatLng(51.5073889, -0.1452094);

             var mapOptions = {
                 zoom: 13,
                 center: myLatlng1,
                 mapTypeId: google.maps.MapTypeId.ROADMAP
             };
             var map = new google.maps.Map(document.getElementById('map'),mapOptions);

     if (navigator.geolocation) {
         navigator.geolocation.getCurrentPosition(function (position) {
             initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
             map.setCenter(initialLocation);

             var circle = new google.maps.Circle({
            map: map,
            radius: 20000,    
            fillColor: '#202020'
        });
        circle.bindTo('center', marker, 'position');
         });

         var contentString = '<div id="content">'+
            '<div id="siteNotice">'+
            '</div>'+
            '<h1 id="firstHeading" class="firstHeading">Goals Soccer Center</h1>'+
            '<div id="bodyContent">'+
            '<p><b>Game Times</b>'+
            '<p>10:00-12:00</p>'+   
            '</div>'+
            '</div>';

        var infowindow = new google.maps.InfoWindow({
          content: contentString
        });

         var marker = new google.maps.Marker({
          position: {lat: 51.5607019, lng: -0.019938},
          map: map,
          title: 'Goals Soccer Center'
          });
          marker.addListener('click', function() {
          infowindow.open(map, marker);
          });

         var marker2 = new google.maps.Marker({
          position: {lat: 51.505347, lng: -0.107745},
          map: map,
          title: 'Goals Soccer Center'            
          }); 

         var marker3 = new google.maps.Marker({
          position: {lat: 51.5073889, lng: -0.1452094},
          map: map,
          title: 'Central London'
          });
      }
 }

 initialize();

      }
    </script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=APIKEY&callback=initMap"></script>

  </body>
</html>

这是我希望地图出现在的网站：

<?php
    session_start();
?>
<!DOCTYPE html>
<html>
<head>
<title>Homepage</title>
<link rel="stylesheet" href="css/website.css">
 </head>

 <body>
     <div id="picture">

        <div id="box">
         <center><h2>Log In</h2></center>
         <center><h3>Welcome
         <?php echo $_SESSION['username'] ?>
         </h3></center>
         <center><img src="imgs/icon.png"class="icon"/></center>   
         <iframe src="file:///C:/xampp1/htdocs/SampleLoginPage/html/googleapi.html" height="200" width="300"></iframe>
         <form class="myform" action="homepage.php" method="post">
             <input name="logout" type="submit" id="back_button" value="Log Out"/><br>
         </form>

         <?php
             if(isset($_POST['logout']))
             {
                session_destroy();
                header('location:index.php');
             }
         ?>
        </div>
     </div>
  </body>
 </html>

CSS代码也可能会有所帮助：

html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
#picture{
            width: 100%;
            height: 100%;
            max-height: 100%;
            margin: 0;
            padding: 0;
            background-image: url("https://layout.eurosport.com/i/v8/match/backgrounds/large/background_v8_s22.jpg");
            background-size:100% 100%;
            background-repeat: no-repeat;
            position: fixed;
        }


#box{
    width: 500px;
    margin: 0 auto;
    background: rgba(255,255,255, 0.7);
    padding: 10px;
    border-radius:10px;
    border: solid;      
}
 .icon{
    width: 150px;
    text-align: center;
    opacity: 1;     
} 

.myform{
    width: 450px;
    margin: 0 auto;     
}

.inputvalues{
    width: 430px;
    margin: 0 auto;
    padding: 5px;
}

#login_button{
    margin-top: 15px; 
    background-color: #2ecc71;
    border-color: #2ecc71;
    padding: 5px;
    width: 100%;
    color: white;
    text-align: center;
    font-size: 18px;
    font-weight: bold;      
}

#register_button{
    margin_bottom: 10px;
    margin-top: 15px; 
    background-color: #1abc9c;
    border-color: #1abc9c;
    padding: 5px;
    width: 100%;
    color: white;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
}

#signup_button{
    margin-top: 15px; 
    background-color: #2ecc71;
    border-color: #2ecc71;
    padding: 5px;
    width: 100%;
    color: white;
    text-align: center;
    font-size: 18px;
    font-weight: bold;      
}

#back_button{
    margin-bottom: 10px;
    margin-top: 15px; 
    background-color: #1abc9c;
    border-color: #1abc9c;
    padding: 5px;
    width: 100%;
    color: white;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
}

感谢您抽出宝贵的时间阅读本文档，对您的帮助非常感谢。如果我的问题不清楚，请随时询问。

将自定义的Google Maps API嵌入我的网站

0 个答案: