javascript - 如何在我的模板中设置谷歌地图？-6ren

javascript - 如何在我的模板中设置谷歌地图？

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

您好，我正在使用模板网页。在我的“联系人”页面上，有一个谷歌地图，它会加载到页面上。我如何更改它并将正确的地址放入代码中？

HTML:

 <!-- map -->
              <div class="onStep" data-animation="fadeIn" data-time="300" id="map-1"></div>
              <!-- map end -->

JS:

google.maps.event.addDomListener(window, 'load', init);

                    function init() {
                        // Basic options for a simple Google Map
                        // For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
                        var myLatlng = new google.maps.LatLng(-6.372251, 106.831649);

                      var mapOptions = {
                            // How zoomed in you want the map to start at (always required)
                            zoom: 15,
                            disableDefaultUI: true,
                            scrollwheel: false, 
center: myLatlng, // New York

                            // How you would like to style the map. 
                            // This is where you would paste any style found on Snazzy Maps.
                            styles: [{"featureType":"all","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"all","elementType":"geometry.fill","stylers":[{"weight":"2.00"},{"visibility":"on"}]},{"featureType":"all","elementType":"geometry.stroke","stylers":[{"color":"#fc0000"}]},{"featureType":"all","elementType":"labels.text","stylers":[{"visibility":"on"}]},{"featureType":"administrative.country","elementType":"geometry.fill","stylers":[{"visibility":"on"}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#f2f2f2"}]},{"featureType":"landscape","elementType":"geometry.fill","stylers":[{"color":"#ffffff"}]},{"featureType":"landscape.man_made","elementType":"geometry.fill","stylers":[{"color":"#ffffff"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"all","stylers":[{"saturation":-100},{"lightness":45}]},{"featureType":"road","elementType":"geometry.fill","stylers":[{"color":"#eeeeee"}]},{"featureType":"road","elementType":"labels.text.fill","stylers":[{"color":"#7b7b7b"}]},{"featureType":"road","elementType":"labels.text.stroke","stylers":[{"color":"#ffffff"}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#46bcec"},{"visibility":"on"}]},{"featureType":"water","elementType":"geometry.fill","stylers":[{"color":"#c8d7d4"}]},{"featureType":"water","elementType":"labels.text.fill","stylers":[{"color":"#070707"}]},{"featureType":"water","elementType":"labels.text.stroke","stylers":[{"color":"#ffffff"}]}]
                        };

                        // Get the HTML DOM element that will contain your map 
                        // We are using a div with id="map" seen below in the <body>
                        var mapElement = document.getElementById('map-1');

                        // Create the Google Map using out element and options defined above
                        var map = new google.maps.Map(mapElement, mapOptions);

                        var marker = new google.maps.Marker({
                            position: myLatlng,
                            map: map,
                            icon: 'img/map-marker.png',
                            title: 'Company'
                        });



                    }

最佳答案

这是我为我的测试元素制作的示例联系我们页面您可以尝试将其隐藏起来。它指向我公司的位置它具有最少的 HTML、CSS 和 JS，并且非常容易理解和实现。

<?php include_once('header.php'); ?>
<div class="nav">
  <div class="nav-header">
    <div class="nav-title">
      <a href="user_home.php">Cart Home</a>
    </div>
  </div>
  <div class="nav-links">
    <a href="function.php?type=logout">Logout</a>
  </div>
</div>
<div class="container">
  <form name="contactUsForm" id="contactUsForm" method="post" action="function.php?type=contactUsMessage">
  <center><h3 class="title">Contact Us</h3></center>
  <div class="flex-container">
    <div class="column1">
      <label for="name">Name</label>
      <input type="text" id="name" name="name" placeholder="Full Name" value="<?php if(isset($_POST['name'])) echo $_POST['name']; ?>" required="required">

      <label for="email">Email</label>
      <input type="email" id="email" name="email" placeholder="Email ID" value="<?php if(isset($_POST['email'])) echo $_POST['email']; ?>" required="required">

      <label for="message">Message</label>
      <textarea id="message" name="message" placeholder="Write something" value="<?php if(isset($_POST['message'])) echo $_POST['message']; ?>" required="required" style="height:200px">