-1
私は個人的なプロジェクトに取り組んでいます。私はブートストラップにフォームを持っています。このフォームでは、ユーザーはボタンをクリックしてGoogleマップを表示してストアを選択できます。Googleマップのインフォウィンドウにonclickイベントを追加するにはどうすればよいですか？
情報ウィンドウの[ストアを選択]リンクをクリックする以外は、すべてうまくいきます。ここで
は、それへのリンクです： https://codepen.io/brettdavis4/pen/wraNJV
私はこの2種類の方法を試してみたと私はすべての運を持っていませんでした。
私はこのようにそれをしようとすると、私は地図をクリックしたときに、何も起こりません：
var contentString2 = stores[i].name + '<br/><a href="#" class="mapclick" data-value="test">Select Store</a>';
私はそれをこのようにしようとすると、私はエラーを取得しています：
var contentString2 = stores[i].name + '<br/><a href="#" onclick="selectstore("test");">Select Store</a>';
これは、私が受け取っているエラー：
Uncaught SyntaxError: Unexpected token }
誰かがペンを見て正しい方向に向けることができますか？
$('#btnClosestBB').click(function(event) {
event.preventDefault();
$('#myModal').modal('show');
});
$('#myModal').on("shown.bs.modal", initialize);
var address = document.getElementById('address').value + ', ' + document.getElementById('city').value + ', ' + document.getElementById('state').value + ' ' + document.getElementById('zip').value;
var stores = [{
name: 'Greenwood Best Buy',
phone: '317-555-1000',
long: -86.119458,
lat: 39.629789,
id: 1
},
{
name: 'Eastside Best Buy',
phone: '317-555-1000',
long: -85.992033,
lat: 39.773182,
id: 2
},
{
name: 'Castleton Best Buy',
phone: '317-555-1000',
long: -86.069270,
lat: 39.906005,
id: 3
},
{
name: 'Carmel Best Buy',
phone: '317-555-1000',
long: -86.230302,
lat: 39.934572,
id: 4
},
{
name: 'North Carmel Best Buy',
phone: '317-555-1000',
long: -86.129277,
lat: 40.000897,
id: 5
},
{
name: 'Avon Best Buy',
phone: '317-555-1000',
long: -86.339541,
lat: 39.764612,
id: 6
},
{
name: 'Lafayette Rd. Best Buy',
phone: '317-555-1000',
long: -86.245499,
lat: 39.839805,
id: 7
}
];
function showResult(result) {
document.getElementById('latitude').value = result.geometry.location.lat();
document.getElementById('longitude').value = result.geometry.location.lng();
}
function getLatitudeLongitude(callback, address) {
// Initialize the Geocoder
geocoder = new google.maps.Geocoder();
if (geocoder) {
geocoder.geocode({
'address': address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
callback(results[0]);
}
});
}
}
function initialize() {
var center = new google.maps.LatLng(document.getElementById('latitude').value, document.getElementById('longitude').value);
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 12,
center: center
});
var contentString = document.getElementById('name').value,
infowindow = new google.maps.InfoWindow({
content: contentString
}),
marker = new google.maps.Marker({
position: center,
map: map,
icon: 'https://maps.google.com/mapfiles/ms/icons/green-dot.png'
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
infowindow.open(map, marker);
for (var i = 0; i < stores.length; i++) {
//var contentString2 = stores[i].name + '<br/><a href="#" class="mapclick" data-value="test">Select Store</a>';
var contentString2 = stores[i].name + '<br/><a href="#" onclick="selectstore("test");">Select Store</a>';
infowindow2 = new google.maps.InfoWindow({
content: contentString2
}),
marker2 = new google.maps.Marker({
position: new google.maps.LatLng(stores[i].lat, stores[i].long),
map: map,
icon: 'https://maps.google.com/mapfiles/ms/icons/red-dot.png'
});
infowindow2.open(map, marker2);
}
}
$('a.mapclick').on('click', function(event) {
event.preventDefault();
alert('test');
});
function selectstore(name) {
console.log(name);
}
//convert address to lat/long
getLatitudeLongitude(showResult, address);#latitude {
display: none;
}
#longitude {
display: none;
}
.row {
margin-top: 15px
}
@media (min-width: 992px) .modal-lg {
width: 1000px;
}
.modal-body {
height: 400px;
}
#map-canvas {
width: 100%;
height: 100%;
}
.gm-style-iw+div {
display: none;
}<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://brettdavis4.github.io/udacity_js_design_patterns/final/js/oauth.js"></script>
<script src="https://brettdavis4.github.io/udacity_js_design_patterns/final/js/sha1.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCMbcfzQwpyQHGt0LYix-RB0guBH0OOdgg&extension=.js&output=embed&foo=bar.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<body role="document">
<div class="container theme-showcase" role="main">
<div id="divform">
<input type="text" id="latitude" readonly="" />
<input type="text" id="longitude" readonly="" />
<form id="frmworkout">
<div class="row">
<div class="col-xs-4">
<div class="input-group">
<span class="input-group-addon">
<span>Name:</span>
</span>
<input id="name" value="Bankers Life Fieldhouse" type="text" class="form-control" readonly="true" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<div class="input-group">
<span class="input-group-addon">
<span>Street Address:</span>
</span>
<input id="address" value="125 S Pennsylvania St" type="text" class="form-control" readonly="true" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<div class="input-group">
<span class="input-group-addon">
<span>City:</span>
</span>
<input id="city" value="Indianapolis" type="text" class="form-control" readonly="true" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<div class="input-group">
<span class="input-group-addon">
<span>State:</span>
</span>
<input id="state" value="IN" type="text" class="form-control" readonly="true" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<div class="input-group">
<span class="input-group-addon">
<span>Zip Code:</span>
</span>
<input id="zip" value="46204" type="text" class="form-control" readonly="true" />
</div>
</div>
</div>
<br/><button id="btnClosestBB" class=".btn-default">Choose a Best Buy Store</button>
<h4>Best Buy Store Details:</h4>
<div class="row">
<div class="col-xs-4">
<div class="input-group">
<span class="input-group-addon">
<span>Store Name:</span>
</span>
<input id="bbname" type="text" class="form-control" />
</div>
</div>
</div>
</form>
</div>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="exampleModalLabel">Select a store:</h4>
</div>
<div class="modal-body">
<div id="map-canvas"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>