Googleマップでマーカーを使用していない

Question

私は、ワードプレスでACFマップで定義されたアドレスを使用して可変Googleマップを表示するためにクライアントのウェブサイトを取得しようとしています。

マップ自体は、マーカの位置から遠く離れていて、それ自体が機能します。

しかし、私たちは地図自体をマーカーの中心に置くことはできません。それは問題の会社がウェブサイト上のプロパティを掲載している不動産管理会社であるため、地図の目的に反するものです。

これは私の関数のコードです：

<?php 
    function my_theme_add_scripts() { 
    wp_enqueue_script('google-map', 'https://maps.googleapis.com/maps/api/js?key=AIzaSyCXO1En_anHPp9eAXyu5ApV50MdHzsDU5c', array(), '3', true); 
    wp_enqueue_script('google-map-init', get_template_directory_uri() . '/js/google-maps.js', array('google-map', 'jquery'), '0.1', true); 
} 

add_action('wp_enqueue_scripts', 'my_theme_add_scripts'); 

function my_acf_google_map_api($api){ 

    $api['key'] = 'API_KEY_HERE'; 

    return $api; 

} 

add_filter('acf/fields/google_map/api', 'my_acf_google_map_api'); 
?> 

これは私のjQueryのです：

window.map; 
(function ($) { 
function render_map($el) { 

    // var 
    var $markers = $el.find('.marker'); 

    // vars 
    var args = { 
     zoom: 16, 
     center: new google.maps.LatLng('data-lat','data-lng'), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    // create map    
    window.map = new google.maps.Map($el[0], args); 

    // add a markers reference 
    map.markers = []; 

    // add markers 
    $markers.each(function() { 

     add_marker($(this), map); 

    }); 

    // center map 
    center_map(map); 

} 

function add_marker($marker, map) { 

    // var 
    var latlng = new google.maps.LatLng($marker.attr('data-lat'), $marker.attr('data-lng')); 

    // create marker 
    var marker = new google.maps.Marker({ 
     position: latlng, 
     center: latlng, 
     map: map 
    }); 

    // add to array 
    map.markers.push(marker); 

    // if marker contains HTML, add it to an infoWindow 
    if ($marker.html()) { 
     // create info window 
     var infowindow = new google.maps.InfoWindow({ 
      content: $marker.html() 
     }); 

     // show info window when marker is clicked 
     google.maps.event.addListener(marker, 'click', function() { 

      infowindow.open(map, marker); 

     }); 
    } 

} 

function center_map(map) { 
    // vars 
    var bounds = new google.maps.LatLngBounds(); 
    // loop through all markers and create bounds 
    $.each(map.markers, function (i, marker) { 
     var latlng = new google.maps.LatLng(marker.position.lat(), marker.position.lng()); 
     bounds.extend(latlng); 
    }); 
    // only 1 marker? 
    if (map.markers.length == 1) { 
     // set center of map 
     map.setCenter(bounds.getCenter()); 
     map.setZoom(15); 
    } else { 
     // fit to bounds 
     map.fitBounds(bounds); 
    } 
} 

$(document).ready(function() { 
    $('.acf-map').each(function() { 
     render_map($(this)); 
    }); 

    function center_map(map) { 
     // vars 
     var bounds = new google.maps.LatLngBounds(); 
     // loop through all markers and create bounds 
     $.each(map.markers, function (i, marker) { 
      var latlng = new google.maps.LatLng(marker.position.lat(), marker.position.lng()); 
      bounds.extend(latlng); 
     }); 
    } 
}); 

})(jQuery); 

HTML/PHP：

<?php 
       $location = get_field('properties_location'); 
       if(!empty($location)): 
      ?> 
      <div class="acf-map"> 
       <div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>"></div> 
      </div> 
      <?php endif; ?> 

CSS：

.acf-map { 
    width: 100%; 
    height: 400px; 
    border: #ccc solid 1px; 
    margin: 20px 0; 
} 

シンプルなjQueryの修正で修正できると思っていますが、私の人生では修正が何であるか把握できません。

ご迷惑をおかけして申し訳ありません。

Answer 1

私の問題は何かを発見しました。

マップをプロパティ情報（screenshot）の下のタブ付きの表示内に表示しています。

マップが表示されない限りGoogle Maps APIは実行されないため、センタリングスクリプトは実行されていませんでした。

しかし、マップの中央揃えを確実にするために、Googleマップレンダリングのすべてのjavascriptをタブクリック機能内で実行するように移動しました。

コードを移動した後、マーカーを中央に配置するようになりました。次のように

私の新しいジャバスクリプト/ jqueryのは、次のとおりです。

$('ul.tabs li.map').one('click', function() { 
    function render_map($el) { 

     // var 
     var $markers = $el.find('.marker'); 

     // vars 
     var args = { 
      zoom: 17, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 

     // create map    
     window.map = new google.maps.Map($el[0], args); 

     // add a markers reference 
     map.markers = []; 

     // add markers 
     $markers.each(function() { 

      add_marker($(this), map); 

     }); 

     // center map 
     center_map(map); 

    } 

    function add_marker($marker, map) { 

     // var 
     var latlng = new google.maps.LatLng($marker.attr('data-lat'), $marker.attr('data-lng')); 

     // create marker 
     var marker = new google.maps.Marker({ 
      position: latlng, 
      center: latlng, 
      map: map 
     }); 

     // add to array 
     map.markers.push(marker); 

     // if marker contains HTML, add it to an infoWindow 
     if ($marker.html()) { 
      // create info window 
      var infowindow = new google.maps.InfoWindow({ 
       content: $marker.html() 
      }); 

      // show info window when marker is clicked 
      google.maps.event.addListener(marker, 'click', function() { 

       infowindow.open(map, marker); 

      }); 
     } 

    } 

    function center_map(map) { 
     // vars 
     var bounds = new google.maps.LatLngBounds(); 
     // loop through all markers and create bounds 
     $.each(map.markers, function (i, marker) { 
      var latlng = new google.maps.LatLng(marker.position.lat(), marker.position.lng()); 
      bounds.extend(latlng); 
     }); 
     // only 1 marker? 
     if (map.markers.length == 1) { 
      // set center of map 
      map.setCenter(bounds.getCenter()); 
      map.setZoom(17); 
     } else { 
      // fit to bounds 
      map.fitBounds(bounds); 
     } 
    } 

    $(document).ready(function() { 
     $('.acf-map').each(function() { 
      render_map($(this)); 
     }); 
    }); 
}); 

これは、タブは、それは、タブをクリックされるたびに再レンダリングされることを防ぐために、クリックするだけで、初めてのコードを実行します。再レンダリングによって地図が完全に破壊されました。