一个简单的谷歌地图 - wordpress 自定义插件 - 地图没有显示答案

【问题标题】：A Simple google map - wordpress custom plugin - Map No show一个简单的谷歌地图 - wordpress 自定义插件 - 地图没有显示
【发布时间】：2020-09-02 19:33:58
【问题描述】：

2 files map plugin -github

我放弃了，请帮助...这里的菜鸟。

使用从谷歌样式地图向导站点事物生成的代码创建自定义样式谷歌地图按照说明和各种教程、jsfiddles 和各种方法，我很困惑。

我将代码放入 GitHub，以便您查看我正在处理的内容。在我的网站上，scripts.js 位于文件夹内，（第一次在 GitHub 上/JS 和 PHP 新手，不知道如何将 js 文件移动到 GitHub 上的文件夹中，哈哈）

已确认所有脚本都已加载到头部 - 是的正在加载我的页面 CSS 正在加载 #put-map {height:300px;宽度：300 像素；} 但实际地图不是 API 正在本地主机上工作（经过测试的带有 apu 和自定义样式映射的静态 html 页面）浏览器中没有错误只是不显示实际地图。是不是事件侦听器 - addDomListener - 也许有什么不对 - 我不知道。

我正在尝试创建简单的超精简版基本地图插件，当我想使用地图时，我可以替换样式或位置代码，我过于依赖 Elementor 网站变得非常笨重，所以试图扩展我的知识减少对视觉页面构建器的依赖...非常感谢任何提供帮助的提议，

这是我的第一个 js 项目，我猜我只是错过了一些小东西，或者完全关闭了……无论如何，我只在这里包含了 JS，因为我 95% 确定 php 没问题，但是整个链接都在上面

干杯尼斯

jQuery.noConflict();
// JS for Google Map with Custom Style obtained https://mapstyle.withgoogle.com/
// Function to create the map
function initMap() {

// create variable themap and define the element id for use in html ie to be used like: <div id="put-map"></div>
var themap = document.getElementById( 'put-map' );

// create variable mapOptions and define options and information for the map to display     
var mapOptions = {
// Generated long and lat from https://www.latlong.net/
  center: {
    lat: -37.345,
    lng: 144.146
      },
    zoom: 12,
    
    // Disable all the controls https://developers.google.com/maps/documentation/javascript/controls
    // in this case i don't want the use to have any options to change the map position or zon in etc.
    
    disableDefaultUI: true,
 
       //******************************************************************************
       //
       //  Custom map visual styling
       //  Styles applied from wizard https://mapstyle.withgoogle.com/
       //   - Cut and paste JSON Code from below //**** to above next //****
       //******************************************************************************
       
    styles: [
      {
        "elementType": "geometry",
        "stylers": [
          {
            "color": "#f5f5f5"
          }
        ]
      },

这里有更多样式代码，但为了让它更短，我在星星之间从谷歌的 JSON 中删减和过去

    ] 
    //****************************************************************************** 
//end of Style part 
  }; //end of Map Options
// create a new map using the information and options defined in the variables themap and mapOptions
var map = new google.maps.Map( themap, mapOptions );     
  }  //ends function initMap 
// Create a DOM event to tell the site to load the createmap function when it finds <div id="mymap"></div> on the web page 
google.maps.event.addDomListener( window, 'load', initMap );

再次感谢。

【问题讨论】：

更正“正在加载我的页面” - 它删除了应该说的一点...... div id="map" 等正在我的页面上加载。

标签： javascript wordpress google-maps google-maps-api-3 wordpress-plugin-creation

【解决方案1】：

OHHHH SOOO EXCITED 我把它复杂化了……我认为我有大部分正确的部分，但在错误的地方，我已经很接近了。我还认为我可能一直在更新我激活的插件之外的 script.js 文件，因此这些更改实际上并没有反映在页面上 - 新手错误呃，无论哪种方式，我都已将其全部清理并正常工作。

最终我发现这个很棒的视频隐藏在所有如何使用带有 HTML embed/iframe 的 Google 地图或如何获取 API 的内容中 :( 但这个视频实际上向您展示了一步一步 Google Maps JavaScript API Tutorial by Traversay Media 足以获得正确的想法。 .. 我只需要前几分钟，视频继续教程如何添加标记和其他我不需要的花哨功能。

我有一个 GitHub 存储库（Git 也是新的），在代码中我已经过评论解释了 PHP/JS 中发生了什么（我认为），我使用了哪些资源从谷歌地图向导生成代码位，其中某些变量和名称需要相同，并且您需要进行更改。没有关于获取 JavaScript Map API 的说明，但周围有很多这样的说明。

插件由 3 个非常短的文件组成，所以我确信有不同的方式来呈现代码的某些部分，或者更高效的方式，请记住我还在学习这是我的第一个插件，第一次完成真正的PHP，第一次使用JavaScript

真的很高兴我从自己发现的资源中解决了问题，真的很令人兴奋。我希望这对其他人有所帮助。

GitHub - Googlemap-wp by Vanessa

【讨论】：