質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.51%

Wordpressの投稿からGoogleMapにピンを登録したい

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 3,006

score 214

事前にGooglemap等に、ピン情報を登録しておいてフロント側で表示できるシステムです、
(参考:http://house.goo.ne.jp/rent/shuto_ap/map_tokyo/13106.html )

検討しているのは、Wordressから位置情報を投稿出来るシステムです。

イメージとして、GoogleMap等のアカウント情報を事前に準備し、そこにAPIを利用して投稿データを投げる感じだと思いますが手順が浮かびません。

プラグイン等あったら使いたいのですが、なければAPIへ値を渡すようなプログラムを作るような手順でしょうか?

根本的に間違っているかもしれません、ご教授願います。。



  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

0

ピンを挿したいということですので、常に動的にピンを取得して表示させていきたいということでないのであればWordPressの管理画面の投稿作成エリアに、例えば
  1.  ピンの位置情報
  2.  タイトル
  3.  infoWindowを使用するのであれば、そこに表示させる内容
を登録させるカスタムフィールドを作成します。

後は、表示させるページで、各投稿で保存されている、ピンの位置情報などのカスタムフィールドを取得して、javascriptのオブジェクトのデータとして出力してあげればOKではないでしょうか?

簡単なサンプルを示します。
!function() {
  // ピン(マーカー)のデータ
  var myMarkers = [
    <?php foreach(...) : ?>
    /* 下記の形式でピンの位置情報などカスタムフィールドから取得して出力する
    {
      position: [60.142568, 24.989571],
      title: 'Submarine Vesikko'
    },
    */
   <?php endforeach; ?>
  ];

  function initialize() {
    // 地図の中心位置 好きな所にしてください
    var myLatlng = new google.maps.LatLng(60.1500745,24.978537);

    // Map Options
    var mapOptions = {
      center: myLatlng,
      zoom: 14 
    };

    // Map
    var map = new google.maps.Map(document.getElementById('map-canvas'),
        mapOptions);

    // Add markers
    for(var i=0, l=myMarkers.length; i<l; i+=1) {
      var markerData = myMarkers[i],
          marker = new google.maps.Marker({
            position: new google.maps.LatLng( markerData.position[0], markerData.position[1] ),
            title: markerData.title,
            map: map
          });
    }    
  }

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

動的に取得させて表示させたいということであれば、Ajaxでアクセスした際にカスタムフィールドの値を返すAPIになるページを作成してあげればよいかと思います。

手前味噌で恐縮ですがgoogleMapのカスタマイズ関連の参考になれば
Google Map 埋め込んだ地図にピン(マーカー)を打ちまくりたい。ついでに色々カスタマイズしてみた。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/09/03 16:31

    - 評価を頂きましたが、後学のためにも何がダメだったのか書いていただけると有難いです。

    キャンセル

0

GoogleMapを静的な画像として受け取りたいのか、動的に埋め込みたいのかで変わりますね。

画像として受け取るだけなら、こちらのサイトの内容が簡単に使えます:
api不要!グーグルマップを簡単に画像化してサイトに埋め込む方法[カスタマイズ]

動的に使いたいのであれば、もう少し具体的に「何を」「どうしたいのか」がはっきりしないと答え辛いかと思いますよ。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.51%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る