從標籤中顯示谷歌地圖中的位置

Question

我有一個標籤其中包括地址值。我想要將這個地址加載到我的谷歌地圖中。 「首選」解決方案在這裏Plases Search。但我不想要這種解決辦法。我不想搜索adreeses或商店或其他任何東西。 我只想將我的標籤值加載到我的谷歌地圖中。

我真的很感激任何幫助！謝謝！

p.s.我已經試過了解決方案，但不regonized像var searchBox = new google.maps.places.SearchBox(search);一些代碼的錯誤說：「未捕獲的ReferenceError：谷歌沒有定義」

更新：

<script> 
     var map; 
     var defaultLocation = { lat:37.977791, lng: 23.672878} ; 
     var infoWindow; 
     var marker; 

     function initMap() { 

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

      infoWindow = new google.maps.InfoWindow({map: map}); 

      // HTML5 Geolocation. 
      if (navigator.geolocation) { 
       navigator.geolocation.getCurrentPosition(function(position) { 
       var pos = { 
         lat: position.coords.latitude, 
         lng: position.coords.longitude 
       }; 
       defaultLocation = pos; 

       infoWindow.setPosition(pos); 
       infoWindow.setContent('<h4> You are here! </h4>'); 
       map.setCenter(pos); 
       }, function() { //Geolocation service failed 
        handleLocationError(true, infoWindow, map.getCenter()); 
        }); 
      } else { 
        // Browser doesn't support Geolocation 
        handleLocationError(false, infoWindow, map.getCenter()); 
       } 
       //END HTML5 Geolocation. 

      document.getElementById('add-marker').addEventListener('click', addMarker); 
      document.getElementById('delete-marker').addEventListener('click', removeMarker); 
     } 

     //---->Here the problem!!!!!!!!!!!!!!!! 
     var search = document.getElementById('search'); 
     var searchBox = new google.maps.places.SearchBox(search); 

     searchBox.addListener('places_changed', function() { 
      var places = searchBox.getPlaces(); 

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

     // Geolocation Function 
     function handleLocationError(browserHasGeolocation, infoWindow, pos) { 
      infoWindow.setPosition(pos); 
      infoWindow.setContent(browserHasGeolocation ? 
       '<strong>Error:</strong> The Geolocation service failed.' : 
       '<strong>Error:</strong> Your browser doesn\'t support geolocation.'); 
     } 

     // Add Marker 
     function addMarker() { 

      if (infoWindow){ 
       infoWindow.close(); 
      } 

      marker = new google.maps.Marker({ 
       position: map.getCenter(), 
       draggable: true, 
       map: map 
      }); 
      updateCurrentLatLng(marker.getPosition()); 
      document.getElementById('add-marker').disabled = true; 
      marker.addListener('dragend', updateCurrentLatLng); 


     } 

     // Delete Marker 
     function removeMarker() { 
      marker.setMap(null); 
      document.getElementById('add-marker').disabled = false; 
      document.getElementById('latcoords').value =null; 
      document.getElementById('loncoords').value = null; 
     } 



     // Update the position of the marker in latitude and longitude 
     function updateCurrentLatLng(latLng){ 
      document.getElementById('latcoords').value = marker.getPosition().lat(); 
      document.getElementById('loncoords').value = marker.getPosition().lat(); 
     } 


    </script> 

Answer 1

您需要內移動搜索盒初始化initMap函數。目前它正在運行，然後在DOM中呈現id =「search」的輸入。

function initMap() { 

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

    infoWindow = new google.maps.InfoWindow({ 
    map: map 
    }); 
    // HTML5 Geolocation. 
    if (navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(function(position) { 
     var pos = { 
     lat: position.coords.latitude, 
     lng: position.coords.longitude 
     }; 
     defaultLocation = pos; 

     infoWindow.setPosition(pos); 
     infoWindow.setContent('<h4> You are here! </h4>'); 
     map.setCenter(pos); 
    }, function() { //Geolocation service failed 
     handleLocationError(true, infoWindow, map.getCenter()); 
    }); 
    } else { 
    // Browser doesn't support Geolocation 
    handleLocationError(false, infoWindow, map.getCenter()); 
    } 
    //END HTML5 Geolocation. 

    document.getElementById('add-marker').addEventListener('click', addMarker); 
    document.getElementById('delete-marker').addEventListener('click', removeMarker); 

    var search = document.getElementById('search'); 
    var searchBox = new google.maps.places.SearchBox(search); 

    searchBox.addListener('places_changed', function() { 
    var places = searchBox.getPlaces(); 

    if (places.length == 0) { 
     return; 
    } 
    }); 
} // end of initMap 

proof of concept fiddle