Google Maps API Geokodierung & Place-Marker

Ich versuche, den Code dieses Geokodierung api Beispiel zu fusionieren: https://developers.google.com/maps/documentation/javascript/examples/geocoding-simple Google Maps API Geokodierung & Place-Marker

mit einigen zuvor funktionierenden Code für Markierungen auf einer Karte ablegen. hier ist mein Code:

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Remove Markers</title> 
    <style> 
     /* Always set the map height explicitly to define the size of the div 
     * element that contains the map. */ 
     #map { 
     height: 100%; 
     } 
     /* Optional: Makes the sample page fill the window. */ 
     html, body { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
     } 
     #floating-panel { 
     position: absolute; 
     top: 10px; 
     left: 25%; 
     z-index: 5; 
     background-color: #fff; 
     padding: 5px; 
     border: 1px solid #999; 
     text-align: center; 
     font-family: 'Roboto','sans-serif'; 
     line-height: 30px; 
     padding-left: 10px; 
     } 
    </style> 
    </head> 
    <body> 
    <div id="floating-panel"> 
     <input id="address" type="textbox" value="London, UK"> 
     <input id="submit" type="button" value="Geocode"> 
     <input onclick="deleteMarkers();" type=button value="Delete Markers"> 
    </div> 
    <div id="map"></div> 
    <p>Click on the map to add markers.</p> 
    <script> 

     // In the following example, markers appear when the user clicks on the map. 
     // The markers are stored in an array. 
     // The user can then click an option to hide, show or delete the markers. 
     var map; 
     var markers = []; 

     function initMap() { 
     var haightAshbury = {lat: 51.5074, lng: 0.1278}; 

     map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 15, 
      center: haightAshbury, 
      mapTypeId: 'hybrid' 
     }); 


     // This event listener will call addMarker() when the map is clicked. 
     map.addListener('click', function(event) { 
      addMarker(event.latLng); 
     }); 

     // Adds a marker at the center of the map. 
     //addMarker(haightAshbury); 
     } 

     // Adds a marker to the map and push to the array. 
     function addMarker(location) { 
     var marker = new google.maps.Marker({ 
      position: location, 
      map: map 
     }); 
     markers.push(marker); 
     } 

     // Sets the map on all markers in the array. 
     function setMapOnAll(map) { 
     for (var i = 0; i < markers.length; i++) { 
      markers[i].setMap(map); 
     } 
     } 

     // Removes the markers from the map, but keeps them in the array. 
     function clearMarkers() { 
     setMapOnAll(null); 
     } 

     // Shows any markers currently in the array. 
     function showMarkers() { 
     setMapOnAll(map); 
     } 

     // Deletes all markers in the array by removing references to them. 
     function deleteMarkers() { 
     clearMarkers(); 
     markers = []; 
     } 
     var geocoder = new google.maps.Geocoder(); 

     document.getElementById('submit').addEventListener('click', function() { 
      geocodeAddress(geocoder, map); 
     }); 
     } 

     function geocodeAddress(geocoder, resultsMap) { 
     var address = document.getElementById('address').value; 
     geocoder.geocode({'address': address}, function(results, status) { 
      if (status === 'OK') { 
      resultsMap.setCenter(results[0].geometry.location); 
      var marker = new google.maps.Marker({ 
       map: resultsMap, 
       position: results[0].geometry.location 
      }); 
      } else { 
      alert('Geocode was not successful for the following reason: ' + status); 
      } 
     }); 
     } 
    </script> 
    <script async defer 
    src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXX&callback=initMap"> 
    </script> 
    </body> 
</html>

Es arbeitete, bevor ich Geokodierung hinzuzufügen versucht, ich die API-Schlüssel aus offensichtlichen Gründen entfernt haben, eine Idee, wo ich schief gelaufen? Ich bin relativ neu in JavaScript und würde das Feedback lieben!

Quelle

2017-08-24 ConnorUWD

Ihr Code wird einen Fehler erzeugen. Sie können es lösen, indem diese Codezeilen zu bewegen ...

var geocoder = new google.maps.Geocoder(); 

    document.getElementById('submit').addEventListener('click', function() { 
     geocodeAddress(geocoder, map); 
    });

... innen initMap(), so dass die Funktion etwas wie folgt aussehen:

function initMap() { 
    var haightAshbury = {lat: 51.5074, lng: 0.1278}; 

    map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 15, 
     center: haightAshbury, 
     mapTypeId: 'hybrid' 
    }); 


    // This event listener will call addMarker() when the map is clicked. 
    map.addListener('click', function(event) { 
     addMarker(event.latLng); 
    }); 

    // Adds a marker at the center of the map. 
    //addMarker(haightAshbury); 

    var geocoder = new google.maps.Geocoder(); 

    document.getElementById('submit').addEventListener('click', function() { 
     geocodeAddress(geocoder, map); 
    }); 
    }

immer für lockiges überprüfen erinnern Klammern, die keine Paare haben.

Quelle

2017-08-24 16:28:53 Ayo

Google Maps API Geokodierung & Place-Marker

Antwort

Verwandte Themen