Link to google map markers with links below map

StackOverflow https://stackoverflow.com/questions/23591333

题

I have seen questions like this - but in the answers they are using javascript to generate a list of links which are then clickable to 'jump to' markers on a map e.g: http://www.geocodezip.com/v3_MW_example_map2.html

What i want to do is create my own links, on the same page as the map which do the same thing but i dont want the list generated as i need to put the links around in different places on the page.

my map code is:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Locations</title>
    <meta charset="utf-8">
    <script src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js"></script>
<script type="text/javascript">
var infowindow = null;
    $(document).ready(function () { initialize();  });

    function initialize() {
        var centerMap = new google.maps.LatLng(-25.274398, 133.775136);
        var myOptions = {
            zoom: 4,
            center: centerMap,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }

        var map = new google.maps.Map(document.getElementById("map"), myOptions);

        var sites = [
          ['location 16', -37.814107 , 144.96328, 6, 'Description in info window','images/map_mobile.png'],
          ['location 5', -37.911394 , 145.189584, 5, 'Description in info window','images/map_store.png'],
          ['location 4', -33.963542 , 151.134273, 4, 'Description in info window','images/map_store.png'],
          ['location 3', -33.923960 , 150.921158, 3, 'Description in info window','images/map_store.png'],
          ['location 2', -34.065619 , 150.796491, 2, 'Description in info window','images/map_mobile.png'],
          ['location 1', -33.752178 , 150.6910478, 1, 'Description in info window','images/map_mobile.png']
        ];

        var markers = setMarkers(map, sites);

        infowindow = new google.maps.InfoWindow({
                content: "loading..."
            });

        var mc = new MarkerClusterer(map, markers);
    }



    function setMarkers(map, sites) {
        var markers = [];

        for (var i = 0; i < sites.length; i++) {
            var site = sites[i];
            var siteLatLng = new google.maps.LatLng(site[1], site[2]);
            var marker = new google.maps.Marker({
                position: siteLatLng,
                map: map,
                title: site[0],
                zIndex: site[3],
                html: site[4],
    //icon: site[5]   // commented so we can see the original marker icon
            });
            markers.push(marker);

            google.maps.event.addListener(marker, "click", function () {
                //alert(this.html);
               infowindow.setContent(this.html);
               infowindow.open(map, this);
            });
        }
         return markers;
    }
</script>
</head>
<body onload="initialize()">
<div id="map" style="width: 620px; height: 600px;"></div>
</body>
</html>
有帮助吗？

解决方案

here is the sample for your code

<html lang="en">
<head>
    <title>Locations</title>
    <meta charset="utf-8">
    <script src="js/jquery-1.7.min.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js"></script>
    <script type="text/javascript">
    var markers = [];
    var infowindow = null;
    //$(document).ready(function () { initialize();  });

    function initialize() {
        var centerMap = new google.maps.LatLng(-25.274398, 133.775136);
        var myOptions = {
            zoom: 4,
            center: centerMap,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }

        var map = new google.maps.Map(document.getElementById("map"), myOptions);
        var marker, i;
        var sites = [
          ['location 16', -37.814107 , 144.96328, 6, 'Description in info window','images/map_mobile.png'],
          ['location 5', -37.911394 , 145.189584, 5, 'Description in info window','images/map_store.png'],
          ['location 4', -33.963542 , 151.134273, 4, 'Description in info window','images/map_store.png'],
          ['location 3', -33.923960 , 150.921158, 3, 'Description in info window','images/map_store.png'],
          ['location 2', -34.065619 , 150.796491, 2, 'Description in info window','images/map_mobile.png'],
          ['location 1', -33.752178 , 150.6910478, 1, 'Description in info window','images/map_mobile.png']
        ];

        var markers = setMarkers(map, sites);

        infowindow = new google.maps.InfoWindow({
                content: "loading..."
            });

        var mc = new MarkerClusterer(map, markers);
    }

    function setMarkers(map, sites) {      

        for (var i = 0; i < sites.length; i++) {
            var site = sites[i];
            var siteLatLng = new google.maps.LatLng(site[1], site[2]);
            var marker = new google.maps.Marker({
                position: siteLatLng,
                map: map,
                title: site[0],
                zIndex: site[3],
                html: site[4],
            //icon: site[5]   // commented so we can see the original marker icon
            });
            markers.push(marker);

            google.maps.event.addListener(marker, "click", function () {
                //alert(this.html);
               infowindow.setContent(this.html);
               infowindow.open(map, this);
            });
        }
         return markers;
    }
    // The function to trigger the marker click, 'id' is the reference index to the 'markers' array.
    function myClick(id){
        google.maps.event.trigger(markers[id], 'click');
    }
</script>
</head>
<body onload="initialize()">
<div id="map" style="width: 620px; height: 600px;"></div>
<a href="#" onclick="myClick(0);">Open Info Window</a>
<a href="#" onclick="myClick(1);">Open Info Window2</a>
<a href="#" onclick="myClick(2);">Open Info Window3</a>
<a href="#" onclick="myClick(3);">Open Info Window4</a>
<a href="#" onclick="myClick(4);">Open Info Window5</a>
<a href="#" onclick="myClick(5);">Open Info Window6</a>
</body>
</html>

Best Regards

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top