Google Map клик маркер по внешней ссылке

Question

Google map, на целевой маркер целевой ссылки. Найдите демонстрационную демонстрацию ниже.

find fiddle demo

google.maps.event.addListener(marker, 'click', (function(marker, i) { 

     return function() { 
      infowindow.setContent(locations[i][0]); 
      infowindow.open(map, marker); 
      map.setZoom(9); 
      map.setCenter(marker.getPosition()); 
     } 
     })(marker, i)); 

function triggerClick(i) { 
    google.maps.event.trigger(markers[i],'click'); 
} 

<ul class="nav"> 
<li><a href="javascript:triggerClick(0)">location1</a></li> 
<li><a href="javascript:triggerClick(1)">location2</a></li> 
<li><a href="javascript:triggerClick(2)">location3</a></li> 
<li><a href="javascript:triggerClick(3)">location4</a></li> 
</ul> 

Answer 1

Я получаю ошибку яваскрипта: Uncaught ReferenceError: triggerClick is not defined в вашей скрипке. функция triggerClick является локальной для функции onLoad, она должна быть глобальной, которая будет использоваться в функции HTML-щелчка.

updated fiddle

фрагмент кода:

var markers = new Array(); 
 
var map; 
 

 
var locations = [ 
 
    ['<h4>Delhi International Art Festival, New Delhi</h4>', 28.613939, 77.209021], 
 
    ['<h4>ICCR - Horizon Series, New Delhi</h4>', 28.625439, 77.245715], 
 
    ['<h4>Shree Arobindo Asharam, Pondecherry</h4>', 11.936761, 79.834314], 
 
    ['<h4>With Shuba Mudgal, Florance, Italy</h4>', 43.769560, 11.255814], 
 
    ['<h4>Classical Piano by S.A.I.D., London, UK</h4>', 51.507351, -0.127758], 
 
    ['<h4>Piano Unplugged for Nartan Academy, US & Canada</h4>', 40.712784, -74.005941] 
 
]; 
 

 
// Setup the different icons and shadows 
 
var iconURLPrefix = 'http://maps.google.com/mapfiles/ms/icons/'; 
 

 
var icons = [ 
 
    iconURLPrefix + 'red-dot.png', 
 
    iconURLPrefix + 'green-dot.png', 
 
    iconURLPrefix + 'green-dot.png', 
 
    iconURLPrefix + 'red-dot.png', 
 
    iconURLPrefix + 'purple-dot.png', 
 
    iconURLPrefix + 'green-dot.png' 
 
] 
 
var iconsLength = icons.length; 
 

 
function initialize() { 
 
    map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 10, 
 
    center: new google.maps.LatLng(20.59, 78.96), 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
    mapTypeControl: false, 
 
    streetViewControl: false, 
 
    panControl: false, 
 
    zoomControlOptions: { 
 
     position: google.maps.ControlPosition.LEFT_BOTTOM 
 
    } 
 
    }); 
 

 

 
    var infowindow = new google.maps.InfoWindow({ 
 
    maxWidth: 160 
 
    }); 
 

 
    var iconCounter = 0; 
 

 
    // Add the markers and infowindows to the map 
 
    for (var i = 0; i < locations.length; i++) { 
 
    var marker = new google.maps.Marker({ 
 
     position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
 
     map: map, 
 
     icon: icons[iconCounter], 
 
     title: 'Click to zoom' 
 
    }); 
 

 
    markers.push(marker); 
 

 
    google.maps.event.addListener(marker, 'mouseover', (function(marker, i) { 
 

 
     return function() { 
 
     infowindow.setContent(locations[i][0]); 
 
     infowindow.open(map, marker); 
 
     //map.setZoom(9); 
 
     //map.setCenter(marker.getPosition()); \t 
 
     } 
 
    })(marker, i)); 
 

 
    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
 

 
     return function() { 
 
     infowindow.setContent(locations[i][0]); 
 
     infowindow.open(map, marker); 
 
     map.setZoom(9); 
 
     map.setCenter(marker.getPosition()); 
 
     } 
 
    })(marker, i)); 
 

 

 
    iconCounter++; 
 
    // We only have a limited number of possible icon colors, so we may have to restart the counter 
 
    if (iconCounter >= iconsLength) { 
 
     iconCounter = 0; 
 
    } 
 

 
    } 
 
    autoCenter(); 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize); 
 

 
function triggerClick(i) { 
 
    google.maps.event.trigger(markers[i], 'click'); 
 
    //map.getBounds(); \t 
 
} 
 

 

 

 

 
function autoCenter() { 
 
    // Create a new viewpoint bound 
 
    var bounds = new google.maps.LatLngBounds(); 
 
    // Go through each... 
 
    for (var i = 0; i < markers.length; i++) { 
 
    bounds.extend(markers[i].position); 
 
    } 
 
    // Fit these bounds to the map 
 
    map.fitBounds(bounds); 
 
}

body { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.container { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.archive-map { 
 
    width: 100%; 
 
    height: 400px; 
 
} 
 
.nav { 
 
    background: rgba(0, 0, 0, 0.5); 
 
    width: 100%; 
 
    text-align: center; 
 
    margin: 0; 
 
    padding-left: 0; 
 
} 
 
.nav li { 
 
    display: inline-block; 
 
} 
 
.nav li a { 
 
    color: #fff; 
 
    padding: 10px; 
 
    display: block; 
 
    position: relative; 
 
    z-index: 100; 
 
}

<script src="http://maps.google.com/maps/api/js"></script> 
 
<ul class="nav"> 
 
    <li><a href="javascript:triggerClick(0)">location1</a> 
 

 
    </li> 
 
    <li><a href="javascript:triggerClick(1)">location2</a> 
 

 
    </li> 
 
    <li><a href="javascript:triggerClick(2)">location3</a> 
 

 
    </li> 
 
    <li><a href="javascript:triggerClick(3)">location4</a> 
 

 
    </li> 
 
</ul> 
 
<div class="container"> 
 
    <div id="map" class="archive-map"></div> 
 
</div>