Google Maps鏈接到外部地圖上的標記

Question

我正在嘗試列出鏈接，並與Google地圖上的正確標記關聯。 我有多個標記，這就是我所擁有的：

您可以通過在以下頁面上查看源代碼來查看我的代碼的實時示例：

http://79.170.40.181/cranes.co.uk/stockists/

我正在使用Wordpress的“高級自定義字段”插件來生成地圖及其標記。 我正在使用他們在文檔頁面上給出的示例代碼，但我正在嘗試添加其他功能。 我只需要一些有關將這段代碼放在什么位置的建議，以使鏈接列表能夠與地圖上的每個標記相關聯：

var name = $('#listdata').find('.clickaway');

google.maps.event.addDomListener(name, 'click', function() {
    infowindow.open(map,marker);
    alert('found me');
});

我的鏈接列表具有以下結構：

<ul id="listdata"
   <li><a href="#" class="clickaway">Location 1</a></li>
   <li><a href="#" class="clickaway">Location 2</a></li>
   ...
</ul>

作為參考，我在這里粘貼了完整的Google Maps代碼：

<script type="text/javascript">    
/* Google Maps */
(function($) {

/*
*  render_map
*
*  This function will render a Google Map onto the selected jQuery element
*
*  @type    function
*  @date    8/11/2013
*  @since   4.3.0
*
*  @param   $el (jQuery element)
*  @return  n/a
*/

function render_map( $el ) {

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

    // vars
    var args = {
        zoom        : 16,
        center      : new google.maps.LatLng(0, 0),
        mapTypeId   : google.maps.MapTypeId.ROADMAP,
        scrollwheel: false,
        mapTypeControlOptions: {
          mapTypeIds: [google.maps.MapTypeId.ROADMAP]
        }
    };

    // create map               
    var 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 );

}

/*
*  add_marker
*
*  This function will add a marker to the selected Google Map
*
*  @type    function
*  @date    8/11/2013
*  @since   4.3.0
*
*  @param   $marker (jQuery element)
*  @param   map (Google Map object)
*  @return  n/a
*/

function add_marker( $marker, map ) {

    // var
    var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );
    var image = 'http://79.170.40.181/cranes.co.uk/wp-content/uploads/2014/10/pin.png';

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

    // 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 );

        });

    }

}



/*
*  center_map
*
*  This function will center the map, showing all markers attached to this map
*
*  @type    function
*  @date    8/11/2013
*  @since   4.3.0
*
*  @param   map (Google Map object)
*  @return  n/a
*/

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( 16 );
    }
    else
    {
        // fit to bounds
        map.fitBounds( bounds );
    }

}

// Call it
$(document).ready(function(){

    $('.acf-map').each(function(){

        render_map( $(this) );

    });

});

})(jQuery);
</script>

這是我循環瀏覽並顯示標記的方法：

 <?php if( have_rows('locations') ): ?>
            <div class="acf-map">
            <?php while ( have_rows('locations') ) : the_row(); 

                $location = get_sub_field('stockist_location'); ?>

                <div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo   $location['lng']; ?>">
                                <h4 class="title">Title</h4>
                                        <p class="address">Address</p>
                </div>

            <?php endwhile; ?>
            </div>
    <?php endif; ?>

誰能給我建議或幫助我如何使它工作？

Answer 1

js擺弄您的代碼：

http://jsfiddle.net/dheffernan/3xkuybrf/

需要注意的幾點：

1. 將div listdata留空
2. 為鏈接插入的div，您可能需要修改此代碼（請參見下面的代碼，我在將您的鏈接附加到listdata div的jquery旁邊留下了注釋-我為jsfiddle添加了一個CSS類來為其設置樣式，但是您可以刪除它。 ..

3. 將js替換為以下內容。

     /* Google Maps */ (function($) { function render_map( $el ) { // var var $markers = $(document).find('.marker'); // vars var args = { zoom : 16, center : new google.maps.LatLng(0, 0), mapTypeId : google.maps.MapTypeId.ROADMAP, scrollwheel: false, mapTypeControlOptions: { mapTypeIds: [google.maps.MapTypeId.ROADMAP] } }; // create map var map = new google.maps.Map( $el[0], args); // add a markers reference map.markers = []; // add markers index=0; $markers.each(function(){ add_marker( $(this), map, index); index++; }); // center map center_map( map ); } function add_marker( $marker, map, index ) { // var var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') ); var image = 'http://79.170.40.181/cranes.co.uk/wp-content/uploads/2014/10/pin.png'; // create marker var marker = new google.maps.Marker({ position : latlng, map : map, icon : image }); // add to array map.markers.push( marker ); // if marker contains HTML, add it to an infoWindow if( $marker.html() ) { $('#listdata').append('<div class= "linkage" id="p'+index+'">'+$marker.html()+'</div>'); // change html here if you want but eave id intact!! $(document).on('click', '#p'+index, function(){ infowindow.open(map, marker); setTimeout(function () { infowindow.close(); }, 5000); }); // 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 alert(bounds); map.setCenter( bounds.getCenter() ); map.setZoom( 16 ); } else { // fit to bounds map.fitBounds( bounds ); } } // Call it $(document).ready(function(){ $('.acf-map').each(function(){ render_map( $(this) ); }); }); })(jQuery);