Ajaxで取得した情報を元にGoogle Mapsにマーカーを表示する

kentomurata 137views 更新:2016年4月11日

Ajaxで取得した情報を元にGoogle Mapsにマーカーを表示するには、外でマーカーを表示する関数を作った後で、Ajax通信の処理の中でその関数を呼び出すのが一番簡単な方法のようです。

function createMarker(lat, lng){
//        マーカの作成
          var marker = new google.maps.Marker({
            position: new google.maps.LatLng(lat, lng),
            map: map
          });
      }

jQuery(function ($) {
        $.ajax({
          type: 'POST',
          dataType: 'json', 
          crossDomain: true,
          url: wp_url_admin_ajax,
          data: {
            'action': 'tell_me'
          },
          success: function (response) {
            console.log(response);
            var data = response;
            for (i = 0; i < data.length; i++) {
              createMarker(data[i].lat, data[i].lng); 
            }
          }
        });

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません