Causing links to pan to and open markers in map

2019-07-13 00:05发布

问题:

JS Fiddle: http://jsfiddle.net/megatimes/NVDLf/7/

I have a map which is creating multiple markers from an array. Below the map are some links which, when clicked, I'd like to cause the map to pan to its respective marker, and open the info window.

Given that I don't want to generate the links themselves as part of the loop that creates the markers, how can I do this?

I'm fairly certain this is a scope issue since the links below the map each open the last item in the locations array but I can't seem to figure out how to get around it.

Thanks

var locations = [
    [
    "Location 1",
     "215 West Girard Avenue 19123",
    "39.9695601",
    "-75.1395161"
    ],
    [
    "Location 2",
    "5360 Old York Road 19141",
    "40.034038",
    "-75.145223"
    ],
    [
    "Location 3",
    "1350 W Girard Avenue 19123",
    "39.9713524",
    "-75.1590360"
    ]
    ];


var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: new google.maps.LatLng(39.9995601, -75.1395161),
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

var infowindow = new google.maps.InfoWindow();

var marker, i;

for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][2], locations[i][3]),
        map: map
    });

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            infowindow.setContent(locations[i][0]);
            infowindow.open(map, marker);
        }
    })(marker, i));
}


$(function() {
    $('#locations h3 a').each(function() {
        $(this).on('click', function() {
            google.maps.event.trigger(marker, 'click');    
        })    
      });    
}); 

<div id="map" style="width: 500px; height: 400px;"></div>
<div id="locations">
    <h3><a href="#">Location 1</a></h3>
    <p>Arbitrary content about 1</p>

    <h3><a href="#">Location 2</a></h3>
    <p>Arbitrary content about 2</p>

    <h3><a href="#">Location 3</a></h3>
    <p>Arbitrary content about 3</p>
</div>

回答1:

You can do something like this:

http://jsfiddle.net/6vjwd/2/embedded/result/

uses a createMarker function to associate the infowindow with the marker:

function createMarker(latlng, html)
{
var marker = new google.maps.Marker({
    position: latlng,
    map: map
});

google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(html);
        infowindow.open(map, marker);
});
return marker;
}

And a global array to allow them to be referenced from HTML click listeners.

The external links depend on knowing the order of the locations. Or if you want to look them up by "name" you could use an "associative" array, with the name as the index.

Indexing the markers by name:

http://jsfiddle.net/6nqj8/1/embedded/result/



回答2:

I would generate the links using jQuery while generating the markers. You can store the marker object on the link object using jQuery's .data() call and add a generic click handler to those links that set the map to the marker's location.

Something kind of like this:

for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][2], locations[i][3]),
        map: map
    });

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            infowindow.setContent(locations[i][0]);
            infowindow.open(map, marker);
        }
    })(marker, i));

    $('#locations').append($('<a>').append('Location Name').click(function()
    {
        // $(this).data('marker')
    }).data('marker', marker));
}


回答3:

ok, this works for me. I'm adding each marker to a global variable array called markers. Then whenever a link is clicked, check which link in the array of those links it is by using the jquery .index() function, and trigger the 'click' on the corresponding marker (link 1 = marker 1, etc).

Thanks to geocodezip as well for the createMarker function which I've re-used here.

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map { width: 500px; height: 400px; }
</style>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">
var marker, map;
var markers = [];

function initialise() {
var i;
    var locations = [
        [
        "Location 1",
         "215 West Girard Avenue 19123",
        "39.9695601",
        "-75.1395161"
        ],
        [
        "Location 2",
        "5360 Old York Road 19141",
        "40.034038",
        "-75.145223"
        ],
        [
        "Location 3",
        "1350 W Girard Avenue 19123",
        "39.9713524",
        "-75.1590360"
        ]
        ];


    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 12,
        center: new google.maps.LatLng(39.9995601, -75.1395161),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    infowindow = new google.maps.InfoWindow();

    for (i = 0; i < locations.length; i++) {
        markers.push(createMarker(new google.maps.LatLng(locations[i][2], locations[i][3]), locations[i][0]));
    }
}

function createMarker(latlng, html)
{
    var marker = new google.maps.Marker({
        position: latlng,
        map: map
    });

    google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent(html);
            infowindow.open(map, marker);
    });

    return marker;
}

$(function() {
    $('#locations h3 a').each(function() {
        $(this).on('click', function() {
            // find out which link in the array was clicked (1st, 2nd etc)
            var intLinkClicked = $('#locations h3 a').index($(this));
            google.maps.event.trigger(markers[intLinkClicked], 'click');    
        });
    });    
}); 

google.maps.event.addDomListener(window, 'load', initialise);
</script>
</head>
<body>
    <div id="locations">
        <h3><a href="#">Location 1</a></h3>
        <p>Arbitrary content about 1</p>

        <h3><a href="#">Location 2</a></h3>
        <p>Arbitrary content about 2</p>

        <h3><a href="#">Location 3</a></h3>
        <p>Arbitrary content about 3</p>
    </div>
    <div id="map"></div>
</body>
</html>