单击文本框时会弹出 Google 地图吗？

Question

I have some code for google maps autofilling a text box with Latitude and Longitude when you click on the map.

Now I would like to know if there's a way you can have the map appear in a popup? I searched for "google map" popup frame and things along the same line but I could not find anything.

For instance: Let's assume there is a textbox with id "Location" . Once you click on the textbox, a google map popup will appear where you can click and the coordinates will be entered automatically into "Location" (already have this part of the code). If you click anywhere on the screen behind the popup, the google map popup must disappear.

What I had in mind was the google map is hidden; and once there is an "onclick" event for the textbox, it will show the popup and the user can choose the location.

I will add the code.

 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">

Thank you.

Answer 1

You should consider implementing a page where you have that map separately. Use it as an iframe inside the main page and show/hide its container whenever you need to do that. So, steps to solve the problem:

• implement the map page
• add a popup container which will contain an iframe pointing to the map page
• handle communication between iframe page and main page via Javascript