-1

2 ファイル マップ プラグイン -github

私はあきらめて上にいます助けてください... noobはここにいます。

Google スタイル マップ ウィザード サイトから生成されたコードを使用して、カスタム スタイルの Google マップを作成しました。

コードを GitHub に置いたので、私が何を扱っているかを確認できます。私のサイトでは、scripts.jsはフォルダー内にあります(GitHubで初めて/ JSとPHPが初めてで、jsファイルをGitHubのフォルダーに移動する方法がわかりません笑)

すべてのスクリプトがヘッドに読み込まれていることを確認しました - YAY 自分のページに読み込まれています CSS が読み込まれています #put-map {height:300px; width:300px;} しかし、実際のマップは API ではなく、ローカル ホストから動作しています (apu とカスタム スタイル マップを使用してテスト済みの静的 html ページ)。それはイベントリスナーですか-addDomListener-おそらく何かが正しくありません-私にはわかりません。

シンプルなウルトラ ライト ベース マップ プラグインを作成しようとしています。これは、マップを使用したいときにスタイルまたはロケーション コードを置き換えるだけで済みます。Elementor サイトに頼りすぎて、非常に扱いにくくなっているため、知識を広げようとしています。視覚的なページビルダーに依存しています...これを支援するオファーがあれば本当に感謝します.

これは私の最初の js プロジェクトです。何か小さいものを見逃しているか、完全にオフになっていると思います... とにかく、ここには JS のみを含めました。php が問題ないと 95% 確信しているからです。全体が上です

乾杯ネス

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"
          }
        ]
      },

より多くのスタイルコードがここにありますが、短くするためにカットして、星の間で Google から 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 );

再度、感謝します。

4

1 に答える 1