Javascript 一个简单的谷歌地图-wordpress自定义插件-地图不显示

我放弃了，请帮助我。。。这里没有

创建自定义样式的谷歌地图，并从谷歌样式地图向导网站生成代码 按照说明和各种教程、jsfiddle以及各种各样的方法进行操作，我感到非常困惑

我将代码放入GitHub，这样您就可以看到我在使用什么。在我的网站上，scripts.js在文件夹中，（第一次在GitHub上/对js和PHP来说是新的，无法理解如何将js文件移动到GitHub lol上的文件夹中）

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

我正在尝试创建简单的ultra-lite基础地图插件，当我想使用地图时，我可以替换样式或位置代码，我太依赖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"
          }
        ]
      },

jQuery.noConflict（）；
//已获取具有自定义样式的Google地图的JShttps://mapstyle.withgoogle.com/
//函数创建地图
函数initMap（）{
//创建变量themap并定义要在html ie中使用的元素id，如：
var themap=document.getElementById（'put map'）；
//创建变量mapOptions并定义要显示的地图的选项和信息
变量映射选项={
//从生成的长时间和lathttps://www.latlong.net/
中心：{
lat:-37.345，
液化天然气：144.146
},
缩放：12，
//禁用所有控件https://developers.google.com/maps/documentation/javascript/controls
//在这种情况下，我不想使用任何选项来更改地图位置或区域等。
disableDefaultUI:true，
//******************************************************************************
//
//自定义地图视觉样式
//从向导应用的样式https://mapstyle.withgoogle.com/
//-下一步将JSON代码从下方//****剪切并粘贴到上方//****
//******************************************************************************
风格：[
{
“elementType”：“几何体”，
“造型师”：[
{
“颜色”：“#F5”
}
]
},

这里有更多的风格代码，但为了保持更短，我从谷歌的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 );

]
//****************************************************************************** 
//样式结束部分
}；//映射结束选项
//使用map和mapOptions变量中定义的信息和选项创建新地图
var map=new google.maps.map（themap，mapOptions）；
}//结束函数initMap
//创建一个DOM事件，告诉站点在网页上找到时加载createmap函数
google.maps.event.addDomListener（窗口'load'，initMap）；

---

再次感谢。

哦，太激动了，我把它复杂化了。。。我想我有很多正确的地方，但在错误的地方，我很接近。我还认为，我可能在激活的插件之外更新了script.js文件，所以这些更改实际上并没有反映在页面上——新手错误，呃，不管怎样，我已经把它清理干净，并且工作正常

最终，我发现这段很棒的视频隐藏在所有关于如何使用带有HTML嵌入/iFrame的谷歌地图或如何获取API的视频中：（但这段视频实际上一步一步地向你展示了足够多的信息，让你获得正确的想法……我只需要开始几分钟，就可以指导你如何添加标记和其他我不需要的奇特功能

我有一个GitHub存储库（对Git来说也是新的），在代码中，我对它进行了过度的注释，以解释（我认为）什么在PHP/JS中，我使用了哪些资源从Google地图向导生成代码，其中某些变量和名称需要相同，还需要进行更改。没有关于获取JavaScript地图API的说明，有很多这样的资源

该插件由3个非常短的文件组成，因此我确信有不同的方法来表示代码的某些部分，或者有更有效的方法，请记住，我仍在学习这是我的第一个插件，第一个完成的真正PHP，也是第一次使用JavaScript

真的很高兴我从资源中找到了自己，真的很令人兴奋。我希望这能帮助别人

更正“正在我的页面上加载”-它删除了一些应该说的内容…div id=“map”etc正在我的页面上加载。