通过标签在 Google 地图中显示位置

Question

我有一个标签，其中包含地址值。我希望将此地址加载到我的谷歌地图中。 “首选”解决方案在这里Plases Search。但我不想要这个独奏。我不想搜索 adreeses 或商店或其他任何东西。 我只想将我的标签值加载到我的谷歌地图中。

非常感谢任何帮助！谢谢！

附言我已经尝试过该解决方案，但没有重新识别某些代码，例如 var searchBox = new google.maps.places.SearchBox(search);The error 说：“Uncaught ReferenceError: google is not defined”

更新：

<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 函数中移动 SearchBox 初始化。目前它在 id="search" 的输入在 DOM 中呈现之前运行。

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