Всплывающее окно Google Maps в текстовом поле?

Question

У меня есть код для карт Google, автозаполняющий текстовое поле с широтой и долготой, когда вы нажимаете на карту.

Теперь я хотел бы узнать, есть ли способ, чтобы карта отображалась во всплывающем окне? Я искал всплывающий кадр «google map» и вещи по одной строке, но я ничего не мог найти.

Например: предположим, что есть текстовое поле с идентификатором «Местоположение». Как только вы нажмете на текстовое поле, появится всплывающее окно карты Google, где вы можете щелкнуть, и координаты будут введены автоматически в «Местоположение» (уже есть эта часть кода). Если вы щелкнете в любом месте экрана за всплывающим окном, всплывающее окно google должно исчезнуть.

То, что я имел в виду, это карта google скрыта; и как только появится событие «onclick» для текстового поля, оно покажет всплывающее окно, и пользователь может выбрать местоположение.

Я добавлю код.

  var map; 
 
      var marker = null; 
 

 
      function initialize() { 
 

 
       var mapOptions = { 
 
        zoom: 5, 
 
        disableDefaultUI: false, 
 
        center: new google.maps.LatLng(21.268899719967695, 39.2266845703125), 
 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
 
       }; 
 

 
       map = new google.maps.Map(document.getElementById('map'), mapOptions); 
 

 
       
 
       google.maps.event.addListener(map, 'click', function(event) { 
 
       
 
        $("#Coordinate1").val(event.latLng.lat() + ", " + event.latLng.lng()); 
 
        $("#Coordinate1").select(); 
 

 
       
 
        if (marker) { marker.setMap(null); } 
 

 
      
 
        marker = new google.maps.Marker({ position: event.latLng, map: map}); 
 

 
       }); 
 

 
      } 
 

 
      google.maps.event.addDomListener(window, 'load', initialize); 
 
      
 

#map { 
 
width:350px; 
 
height:200px; 
 
} 
 
#Coordinate1{ 
 
text-align:center; 
 
border:1px #ccc solid; 
 
}

<div id="map"></div> 
 
<input type="text" id="Coordinate1" value="Latitude, Longitude">

Спасибо.

Answer 1

Вам следует рассмотреть возможность создания страницы, на которой у вас есть эта карта отдельно. Используйте его как iframe на главной странице и покажите/скройте его контейнер, когда вам нужно это сделать. Таким образом, шаги, чтобы решить эту проблему:

• реализация страницы карты
• добавить всплывающий контейнер, который будет содержать iframe указывающего на страницу карты
• ручка связь между iframe страницы и главной страницей с помощью Javascript