如何在Google地圖的infowindow中創建按鈕？

Question

我真的需要一些幫助傢伙！ 如何在Google地圖的infowindow中創建按鈕？ infowindow包含來自數據庫的數據。我嘗試在infowindow（infowincontent）內創建按鈕或鏈接，但未成功。 在此先感謝

這裏是代碼創建標記

<script> 
    function initialize() { 


     initMap(); 
     initAutocomplete(); 


     } 
     function initAutocomplete() { 


     var infoWindow = new google.maps.InfoWindow; 

     // Create the search box and link it to the UI element. 
     var input = document.getElementById('pac-input'); 
     var searchBox = new google.maps.places.SearchBox(input); 
     map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); 


       // Bias the SearchBox results towards current map's viewport. 
     map.addListener('bounds_changed', function() { 
      searchBox.setBounds(map.getBounds()); 
     }); 

     var markers = []; 
     // Listen for the event fired when the user selects a prediction and  retrieve 
     // more details for that place. 
     searchBox.addListener('places_changed', function() { 
      var places = searchBox.getPlaces(); 

      if (places.length == 0) { 
      return; 
      } 



      // For each place, get the icon, name and location. 
      var bounds = new google.maps.LatLngBounds(); 
      places.forEach(function(place) { 
      if (!place.geometry) { 
      console.log("Returned place contains no geometry"); 
      return; 
      } 
      var icon = { 
      url: place.icon, 
       size: new google.maps.Size(71, 71), 
       origin: new google.maps.Point(0, 0), 
       anchor: new google.maps.Point(17, 34), 
       scaledSize: new google.maps.Size(25, 25) 
      }; 

      // Create a marker for each place. 
      markers.push(new google.maps.Marker({ 
      map: map, 
      icon: icon, 
      title: place.name, 
       position: place.geometry.location 
      })); 

      if (place.geometry.viewport) { 
       // Only geocodes have viewport. 
       bounds.union(place.geometry.viewport); 
      } else { 
       bounds.extend(place.geometry.location); 
      } 
      }); 
      map.fitBounds(bounds); 
     }); 
     } 

     function initMap() { 

     var directionsService = new google.maps.DirectionsService; 
     var directionsDisplay = new google.maps.DirectionsRenderer; 
     directionsDisplay = new google.maps.DirectionsRenderer({ polylineOptions: { strokeColor: "#075e54" } }); 
     directionsDisplay.setOptions({ suppressMarkers: true }); 



     var map = new google.maps.Map(document.getElementById('map'), { 
      center: new google.maps.LatLng(-1.2921,36.8219), 
      zoom: 14 
     }); 


      directionsDisplay.setMap(map); 




     var infoWindow = new google.maps.InfoWindow; 


        var onChangeHandler = function() { 
      calculateAndDisplayRoute(directionsService, directionsDisplay); 
     }; 
     document.getElementById('start').addEventListener('change', onChangeHandler); 
     document.getElementById('end').addEventListener('change', onChangeHandler); 

     function calculateAndDisplayRoute(directionsService, directionsDisplay) { 
     directionsService.route({ 
     origin: document.getElementById('start').value, 
      destination: document.getElementById('end').value, 
      travelMode: 'DRIVING' 
    },  function(response, status) { 
      if (status === 'OK') { 
      directionsDisplay.setDirections(response); 
     } else { 
      window.alert('Directions request failed due to ' + status); 
     } 
    }); 
    } 


      // Change this depending on the name of your PHP or XML file 
      downloadUrl('control.php', function(data) { 
      var xml = data.responseXML; 
      var markers = xml.documentElement.getElementsByTagName('marker'); 
      Array.prototype.forEach.call(markers, function(markerElem) { 
       var name = markerElem.getAttribute('name'); 
       var address = markerElem.getAttribute('address'); 
       var superfuel = markerElem.getAttribute('superfuel'); 
       var diesel = markerElem.getAttribute('diesel'); 
        var shop = markerElem.getAttribute('shop'); 
       var service = markerElem.getAttribute('service'); 
       var air = markerElem.getAttribute('air'); 


       var point = new google.maps.LatLng(
        parseFloat(markerElem.getAttribute('lat')), 
        parseFloat(markerElem.getAttribute('lng'))); 

       var infowincontent = document.createElement('div'); 
       infowincontent.id = 'sometoom'; 
       infowincontent.style.background="#ffffff"; 
       var contentString = "<a href='#' onclick='openNew();'>Click here to open new infowindow!</a>"; 
       infowincontent.style.padding="20px"; 
       infowincontent.style.textAlign = 'left'; 











       var strong = document.createElement('strong'); 

       strong.textContent = name 
       infowincontent.appendChild(strong); 
       infowincontent.appendChild(document.createElement('br')); 


       var text = document.createElement('text'); 
       text.style.color="#000000"; 

       text.textContent = address 
       infowincontent.appendChild(text); 
       infowincontent.appendChild(document.createElement('br')); 


         var text = document.createElement('text'); 
       text.textContent = superfuel 
       text.style.color="#136ad5"; 



       infowincontent.appendChild(text); 
        infowincontent.appendChild(document.createElement('br')); 

         var text = document.createElement('text'); 
           text.style.color="#136ad5"; 



       text.textContent = diesel 
       infowincontent.appendChild(text); 
        infowincontent.appendChild(document.createElement('br')); 

          var text = document.createElement('text'); 
           text.style.color="#000000"; 

       text.textContent = shop 
       infowincontent.appendChild(text); 
        infowincontent.appendChild(document.createElement('br')); 

           var text = document.createElement('text'); 
                text.style.color="#000000"; 

       text.textContent = service 
       infowincontent.appendChild(text); 
        infowincontent.appendChild(document.createElement('br')); 






           var text = document.createElement('text'); 
                text.style.color="#000000"; 

       text.textContent = air 
       infowincontent.appendChild(text); 
       infowincontent.appendChild(document.createElement('br')); 






















    var marker = new google.maps.Marker({ 
       map: map, 
       position: point, 
       icon:'pictures/huu.png', 


       }); 





       marker.addListener('click', function() { 
       infoWindow.setContent(infowincontent); 
       infoWindow.open(map, marker); 
       }); 

      }); 
      }); 




     } 



     function downloadUrl(url, callback) { 
     var request = window.ActiveXObject ? 
      new ActiveXObject('Microsoft.XMLHTTP') : 
      new XMLHttpRequest; 

     request.onreadystatechange = function() { 
      if (request.readyState == 4) { 
      request.onreadystatechange = doNothing; 
      callback(request, request.status); 
      } 
     }; 

     request.open('GET', url, true); 
     request.send(null); 
     } 

     function doNothing() {} 
    </script> 
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD-4hkK5MZ4Svgyf611MqiKYF8&libraries=places&callback=initialize" async defer></script> 

Answer 1

你可以建立你喜歡的信息窗口，這是一個鏈接的HTML代碼，但你可以使用所有的標籤元素或自定義與鏈接css

var myContentString = 
      '<div id="your_id" style="your_style...."><a href="your_link">' + 
      'My link Text comes here' + 
      '</a></div>'; 

    var infowindow = new google.maps.InfoWindow({ 
      content: myContentString, 
      maxWidth: 600 
     });