-1
地図マーカーをクリックしたいと思って、地図の下の情報をdivに表示します。私は以下のコードを持っています。同じマーカーを常に表示します。マーカーごとに行う方法は？ ................................................. .................................................. ............................div内のGoogleマーカーからの情報を表示するにはどうすればよいですか？
.htmlを
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<meta name="description" content="Custom Google map, with multiple markers, the clicking markers show the outside map div" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="css/styles.css" />
</head>
<body >
<div id="map-canvas"></div>
<div id="test">
<h1>test</h1>
<img src="https://www.google.org/assets/static/images/logo_googledotorg-171e7482e5523603fc0eed236dd772d8.svg" width="128" height="128" alt="Mountain View">
</div>
<!--scripts loaded here-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCMJVE1N5mUEQaJFulw7omVluNrXqzOipk&callback=initMap"
type="text/javascript"></script>
<script src="js/scripts.js"></script>
</body>
</html>
の.js
var map;
var brooklyn = new google.maps.LatLng(-33.9, 151.2);
var MY_MAPTYPE_ID = 'custom_style';
function initialize() {
var featureOpts = [
{
stylers: [
{ hue: '#890000' },
{ visibility: 'simplified' },
{ gamma: 0.5 },
{ weight: 0.5 }
]
},
{
elementType: 'labels',
stylers: [
{ visibility: 'off' }
]
},
{
featureType: 'water',
stylers: [
{ color: '#890000' }
]
}
];
var mapOptions = {
zoom: 12,
center: brooklyn,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
},
mapTypeId: MY_MAPTYPE_ID
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var styledMapOptions = {
name: 'Custom Style'
};
var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions);
map.mapTypes.set(MY_MAPTYPE_ID, customMapType);
setMarkers(map, beaches);
}
var gmarkers = [];
var beaches = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];
function setMarkers(map, locations) {
for (var i = 0; i < locations.length; i++) {
var beach = locations[i];
var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: beach[0],
zIndex: beach[3]
});
gmarkers.push(marker);
google.maps.event.addListener(marker, "click", function() {
$('#test').css('display', 'block');
$(".dropdown").removeClass("is-expanded");
var target = $('#test');
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
.css
html, body, #map-canvas {
height: 90%;
margin: 0px;
padding: 0px
}
#test{
display:none;
}
があなたの後にロードされているGoogleのAPIによる誤差を持っていますコードは行います。最小限で完全で検証可能な例が得られるようにそれらを修正できますか？ https://stackoverflow.com/help/mcve –
申し訳ありませんが、完全なコードを記述します。 – FranciscoM