0
Googleマップを表示して、それぞれの場所に複数の店舗をピンしたいと思っていました。Googleマップを使用して、各外部リンクの場所に複数のマーカーを表示するページ更新なしでクリックする
たとえば、場所は
- チェンナイある
- トリッチー
- バンガロール
- ハイデラバード
私はリンクチェンナイをクリックすると、マップは唯一のチェンナイに複数の店舗を表示します。 。 Trichyリンクをクリックすると、マップはTrichyのみで複数の店舗を表示し、ページの再読み込みは行われません。
Googleマップでこれをコードする方法は？
現在のコードは
HTMLです：：あなたは、既存のコードにいくつかの変更を加えることができ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/map.js"></script>
</head>
<body>
<div id="map-canvas"style="width: 500px; height: 400px;"/>
</body>
</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 = '<div id="iw_container">' +
'<div class="iw_title">' + name + '</div>' +
'<div class="iw_content">' + address1 + '<br />' +
address2 + '<br />' +
postalCode + '</div></div>';
// 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;
}