-1
2つのCustomControlを作成しましたが、最初の設定は2番目のボタンに複製されています。私はこの間違いが初心者だと確信しています。私が見つけた例のほとんどは、ボタンを1つしか表示しないか、マーカーにコントロールを追加しています。どんな指導も大歓迎です！Googleマップ - マップ上の複数のカスタムボタン
<html>
<head>
<title>Current Location</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
</head>
<body onload= "start()">
<script>
function CustomControl(controlDiv, map, deviceID) {
// Set CSS for the control border
var controlUI = document.createElement('div');
//controlUI.style.backgroundColor = '#f00c0c';
controlUI.style.backgroundColor = '#ffffff';
controlUI.style.borderStyle = 'solid';
controlUI.style.borderWidth = '1px';
controlUI.style.borderColor = '#ccc';
controlUI.style.borderRadius = "23px";
controlUI.style.height = '33px';
controlUI.style.marginTop = '5px';
controlUI.style.marginLeft = '-6px';
controlUI.style.paddingTop = '1px';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
controlUI.title = 'Click to change settings';
controlDiv.appendChild(controlUI);
// Set CSS for the control interior
var controlText = document.createElement('div');
controlText.style.fontFamily = 'sans-serif';
controlText.style.fontSize = '10px';
controlText.style.paddingLeft = '4px';
controlText.style.paddingRight = '8px';
controlText.style.marginTop = '10px';
controlText.innerHTML = 'Settings';
controlUI.appendChild(controlText);
// Setup the click event listeners
google.maps.event.addDomListener(controlUI, 'click', function() {
url = "http://excite.bounceme.net/profile.html;
window.location = url;
});
}
function CustomControl1(controlDiv, map, deviceID) {
// Set CSS for the control border
var controlUI1 = document.createElement('empty');
//controlUI1.style.backgroundColor = '#f00c0c';
controlUI1.style.backgroundColor = '#ffffff';
controlUI1.style.borderStyle = 'solid';
controlUI1.style.borderWidth = '1px';
controlUI1.style.borderColor = '#ccc';
controlUI1.style.borderRadius = "23px";
controlUI1.style.height = '33px';
controlUI1.style.marginTop = '5px';
controlUI1.style.marginLeft = '-6px';
controlUI1.style.paddingTop = '1px';
controlUI1.style.cursor = 'pointer';
controlUI1.style.textAlign = 'center';
controlUI1.title = 'Click to plot course';
controlDiv.appendChild(controlUI1);
// Set CSS for the control interior
var controlText1 = document.createElement('empty');
controlText1.style.fontFamily = 'sans-serif';
controlText1.style.fontSize = '10px';
controlText1.style.paddingLeft = '4px';
controlText1.style.paddingRight = '8px';
controlText1.style.marginTop = '10px';
controlText1.innerHTML = 'Plot Route';
controlUI.appendChild(controlText1);
// Setup the click event listeners
google.maps.event.addDomListener(controlUI1, 'click', function() {
url = "http://excite.bounceme.net/settings.html";
window.location = url;
});
}
function start(){
var map;
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 39.833, lng: -98.585},
zoom: 12
});
var customControlDiv = document.createElement('div');
var customControl = new CustomControl(customControlDiv, map,deviceID);
customControlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(customControlDiv);
var customControlDiv1 = document.createElement('empty');
var customControl1 = new CustomControl(customControlDiv1, map,deviceID);
customControlDiv1.index = 2;
map.controls[google.maps.ControlPosition.RIGHT_TOP].push(customControlDiv1);
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"> </script>
<script src="https://maps.googleapis.com/maps/api/js?key=yourkeygoeshere4&callback=initMap"
async defer></script>
</body>
</html>
：
は、コードスニペットを（あなたは一つの他の構文エラーを持っていた）作業。 'deviceId'はどこから来たのですか？あなたの問題を示す[mcve]を提供してください。 – geocodezip