谷歌地图在每个外部链接位置显示多个标记点击而不刷新页面
我想显示Google地图以固定每个位置的多个商店。
例如，位置是
- 奈
- 特利奇
- class加罗尔
- 海得拉巴
如果我点击链接Chennai，地图将只在Chennai显示多个商店。 如果我单击链接Trichy，地图将仅在Trichy中显示多个商店而不重新加载页面。
如何在谷歌地图中编码？
目前的代码是
HTML：
js代码
// * // * Add multiple markers // * 2013 - en.marnoto.com // * // necessary variables var map; var infoWindow; // markersData variable stores the information necessary to each marker var markersData = [ { lat: 40.6386333, lng: -8.745, name: "Jayasurya Tex", address1:"Anna strret", address2: "Chennai", postalCode: "625789" // don't insert comma in the last item of each marker }, { lat: 40.59955, lng: -8.7498167, name: "Ram Tex", address1:"65 Kovalan strret", address2: "chennai", postalCode: "625001" // don't insert comma in the last item of each marker }, { lat: -33.890542, lng: 51.274856, name: "Keerthi Tex", address1:"465 avinashi road", address2: "Erode", postalCode: "638009" // don't insert comma in the last item of each marker }, { lat: -33.890542, lng: 51.274856, name: "supreme Tex", address1:"468 Pks road", address2: "Erode", postalCode: "638009" // don't insert comma in the last item of each marker }, { lat: 40.6247167, lng: -8.7129167, name: "Niva Tex", address1:"75 small bazar street", address2: "Trichy", postalCode: "698547" // don't insert comma in the last item of each marker } // don't insert comma in the last item ]; function initialize() { var mapOptions = { center: new google.maps.LatLng(40.601203,-8.668173), zoom: 9, mapTypeId: 'roadmap', }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); // a new Info Window is created infoWindow = new google.maps.InfoWindow(); // Event that closes the Info Window with a click on the map google.maps.event.addListener(map, 'click', function() { infoWindow.close(); }); // Finally displayMarkers() function is called to begin the markers creation displayMarkers(); } google.maps.event.addDomListener(window, 'load', initialize); // This function will iterate over markersData array // creating markers with createMarker function function displayMarkers(){ // this variable sets the map bounds according to markers position var bounds = new google.maps.LatLngBounds(); // for loop traverses markersData array calling createMarker function for each marker for (var i = 0; i < markersData.length; i++){ var latlng = new google.maps.LatLng(markersData[i].lat, markersData[i].lng); var name = markersData[i].name; var address1 = markersData[i].address1; var address2 = markersData[i].address2; var postalCode = markersData[i].postalCode; createMarker(latlng, name, address1, address2, postalCode); // marker position is added to bounds variable bounds.extend(latlng); } // Finally the bounds variable is used to set the map bounds // with fitBounds() function map.fitBounds(bounds); } // This function creates each marker and it sets their Info Window content function createMarker(latlng, name, address1, address2, postalCode){ var marker = new google.maps.Marker({ map: map, position: latlng, title: name }); // This event expects a click on a marker // When this event is fired the Info Window content is created // and the Info Window is opened. google.maps.event.addListener(marker, 'click', function() { // Creating the content to be inserted in the infowindow var iwContent = '' + '' + name + '' + '' + address1 + '
' + address2 + '
' + postalCode + ''; // including content to the Info Window. infoWindow.setContent(iwContent); // opening the Info Window in the current map and at the current marker location. infoWindow.open(map, marker); }); }
CSS
#map-canvas { height: 50%; } #iw_container .iw_title { font-size: 16px; font-weight: bold; } .iw_content { padding: 15px 15px 15px 0; }
您可以在现有代码中进行一些更改：
- 添加数组
markers以保留所有标记 - 添加一个属性，例如
tag到每个标记，并在那里设置该标记所属的位置的值 - 编写一个根据标签过滤标记的函数
- 最后，添加调用此函数的链接元素以过滤click事件上的标记。
概念certificate
// necessary variables var map; var infoWindow; var markers = []; // markersData variable stores the information necessary to each marker var markersData = [ { lat: 40.6386333, lng: -8.745, name: "Jayasurya Tex", address1:"Anna strret", address2: "Chennai", postalCode: "625789" // don't insert comma in the last item of each marker }, { lat: 40.59955, lng: -8.7498167, name: "Ram Tex", address1:"65 Kovalan strret", address2: "Chennai", postalCode: "625001" // don't insert comma in the last item of each marker }, { lat: 40.6247167, lng: -8.7129167, name: "Niva Tex", address1:"75 small bazar street", address2: "Trichy", postalCode: "698547" // don't insert comma in the last item of each marker } // don't insert comma in the last item ]; function initialize() { var mapOptions = { center: new google.maps.LatLng(40.601203,-8.668173), zoom: 9, mapTypeId: 'roadmap', }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); // a new Info Window is created infoWindow = new google.maps.InfoWindow(); // Event that closes the Info Window with a click on the map google.maps.event.addListener(map, 'click', function() { infoWindow.close(); }); // Finally displayMarkers() function is called to begin the markers creation displayMarkers(); } // This function will iterate over markersData array // creating markers with createMarker function function displayMarkers(){ // this variable sets the map bounds according to markers position var bounds = new google.maps.LatLngBounds(); // for loop traverses markersData array calling createMarker function for each marker for (var i = 0; i < markersData.length; i++){ var latlng = new google.maps.LatLng(markersData[i].lat, markersData[i].lng); var name = markersData[i].name; var address1 = markersData[i].address1; var address2 = markersData[i].address2; var postalCode = markersData[i].postalCode; createMarker(latlng, name, address1, address2, postalCode); // marker position is added to bounds variable bounds.extend(latlng); } // Finally the bounds variable is used to set the map bounds // with fitBounds() function map.fitBounds(bounds); } // This function creates each marker and it sets their Info Window content function createMarker(latlng, name, address1, address2, postalCode){ var marker = new google.maps.Marker({ map: map, position: latlng, title: name }); marker.tag = address2; markers.push(marker); // This event expects a click on a marker // When this event is fired the Info Window content is created // and the Info Window is opened. google.maps.event.addListener(marker, 'click', function() { // Creating the content to be inserted in the infowindow var iwContent = '' + '' + name + '' + '' + address1 + '
' + address2 + '
' + postalCode + ''; // including content to the Info Window. infoWindow.setContent(iwContent); // opening the Info Window in the current map and at the current marker location. infoWindow.open(map, marker); }); } function filterMarkersByTag(tagName) { var bounds = new google.maps.LatLngBounds(); markers.forEach(function(marker) { marker.setMap(null); }); var filtered = markers.filter(function(marker) { return marker.tag === tagName; }); if (filtered && filtered.length) { filtered.forEach(function(marker) { bounds.extend(marker.getPosition()); marker.setMap(map); }); map.fitBounds(bounds); } }
#map-canvas { height: 50%; } #iw_container .iw_title { font-size: 16px; font-weight: bold; } .iw_content { padding: 15px 15px 15px 0; }
Chennai Trichy