Google Maps - Mehrere benutzerdefinierte Schaltflächen auf der Karte

-1

Ich habe zwei CustomControls erstellt, jedoch sind die Einstellungen für die erste auf der zweiten Schaltfläche dupliziert. Ich bin mir sicher, dass dieser Fehler ein Anfänger ist. Die meisten Beispiele, die ich finden konnte, zeigen nur eine Schaltfläche oder sie fügen den Markern Steuerelemente hinzu. Jede Anleitung würde sehr geschätzt werden!Google Maps - Mehrere benutzerdefinierte Schaltflächen auf der Karte

<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>

Quelle

2016-08-16 user3308131

Es gibt keine HTML in geposteten Code (der "Landkarte" Element fehlt). Woher kommt 'deviceId'? Bitte geben Sie eine [mcve] an, die Ihr Problem veranschaulicht. – geocodezip

Sie haben einen Tippfehler in Ihrem Code. Sie erstellen zwei Kopien der Klasse CustomControl. Sie erstellen nie die Klasse CustomControl1.

Code-Schnipsel Arbeits (Sie hatte eine andere Syntaxfehler):

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'; 
 
    controlUI1.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; 
 
    var deviceID = "A"; 
 
    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('div'); 
 
    var customControl1 = new CustomControl1(customControlDiv1, map, deviceID); 
 
    customControlDiv1.index = 2; 
 
    map.controls[google.maps.ControlPosition.RIGHT_TOP].push(customControlDiv1); 
 
} 
 
google.maps.event.addDomListener(window, "load", start);

html, 
 
body, 
 
#map { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map"></div>

Quelle

2016-08-16 20:38:34 geocodezip

Danke. Um meinen Tippfehler zu fangen. Ich wollte gerade verrückt werden und versuchen, diese herauszufinden! – user3308131

Google Maps - Mehrere benutzerdefinierte Schaltflächen auf der Karte

Antwort

Verwandte Themen