使用链接打开Goog​​le地图信息框

时间:2017-07-17 20:35:24

标签: javascript google-maps google-maps-api-3 google-maps-markers

好的,我希望这是有道理的。下面是我的谷歌地图的代码,它工作得很好(不是最干净,但它的工作)。我怎么能在地图之外创建一个HTML链接,为我打开信息框?例如,我希望能够:

 <a href="#map" onclick="openInfo(2)">More Info</a>

这将打开标记2的信息框,这将是星期二。希望这是有道理的。

 <script>
 jQuery(function($) {
// Asynchronously Load the map API 
var script = document.createElement('script');
script.src = "//maps.googleapis.com/maps/api/js?sensor=true&callback=initialize&key=APIKEY";
document.body.appendChild(script);
 });
 var gmarkers = [];
 function initialize() {
var map;
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
    mapTypeId: 'roadmap'
};

// Display a map on the page
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
map.setTilt(45);

// Multiple Markers
var markers = [

        ['1', LAT,LONG],    
        ['2', LAT,LONG],    

];


// Info Window Content
var infoWindowContent = [

        ['<strong>Monday - 7:00pm</strong>'],       
        ['<strong>Tuesday - 6:00pm</strong>'],  
];

// Display multiple markers on a map
var infoWindow = new google.maps.InfoWindow(), marker, i;

// Loop through our array of markers & place each one on the map  
for( i = 0; i < markers.length; i++ ) {
    var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
    bounds.extend(position);
    marker = new google.maps.Marker({
        position: position,
        map: map,
        title: markers[i][0]
    });
    // Allow each marker to have an info window    
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            infoWindow.setContent(infoWindowContent[i][0]);
            infoWindow.open(map, marker);
        }
    })(marker, i));

    // Automatically center the map fitting all markers on the screen
    map.fitBounds(bounds);
}



// Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
    this.setZoom(11);
    google.maps.event.removeListener(boundsListener);
});
var opt = { minZoom: 9, maxZoom: 12 };
map.setOptions(opt);

}
</script>

1 个答案:

答案 0 :(得分:0)

您必须将其传递给您的实际标记...您正在使用marker = new google.maps.Marker创建标记({...您必须存储您要定位的标记,并将其传递给onclick触发功能。