在 jQuery Dialog Modal Popup Window 中显示 Google Maps 传递地址答案

【问题标题】：Display Google Maps inside jQuery Dialog Modal Popup Window passing address在 jQuery Dialog Modal Popup Window 中显示 Google Maps 传递地址
【发布时间】：2017-10-11 22:17:58
【问题描述】：

第一次使用谷歌地图 API。我正在尝试通过单击弹出窗口中的按钮打开谷歌地图，而不是通过地址而不是纬度和经度。

我能够做到这一点而没有以下代码传递 lat 和 long 的问题。

 $(function () {
        $("#btnmap").click(function () {
           // debugger;
            $("#dialog").dialog({
                modal: true,
                title: "Location",
                width: 600,
                height: 450,
                buttons: {
                    Close: function () {
                        $(this).dialog('close');
                    }
                },
                open: function () {
                    //debugger;
                    var mapOptions = {
                        center: new google.maps.LatLng(34.095131, -84.258404),
                        zoom: 18,
                        mapTypeId: google.maps.MapTypeId.ROADMAP

                    }
                   // debugger;
                    var map = new google.maps.Map($("#canvasMap")[0], mapOptions);
                }
            });
        });
    });

我知道我需要使用地理编码来代替地址或坐标。并尝试使用以下脚本

 function initialize() {
        debugger;
        var map = new GMaps({
            lat: 0,
            lng: 0,
            zoom: 0
        });

        GMaps.geocode({
            address: $("#lblOfficeAddress").text(),
            callback: function (results, status) {
                alert(address);
                if (status == 'OK') {
                    var latlng = results[0].geometry.location;
                    map.fitBounds(results[0].geometry.viewport);
                    map.addMarker({
                        lat: latlng.lat(),
                        lng: latlng.lng()
                    });
                }
            }
        });
    }
google.maps.event.addDomListener(window, "load", initialize);

但不确定如何将这两者结合起来打开地图。

【问题讨论】：

标签： jquery google-maps google-maps-api-3

【解决方案1】：

在您的open 函数中，不要设置地图的center 和zoom 属性，而是调用地理编码器，并使用结果来设置地图中心。

var geocoder = new google.maps.Geocoder();
geocoder.geocode({
  address: $("#lblOfficeAddress").text()}, function(results, status) {
  if (status == "OK") {
      console.log("location=" + results[0].geometry.location.toUrlValue(6));
      map.setCenter(results[0].geometry.location);
      map.setZoom(18);
  } else alert("Geocode failed, status=" + status);
});

proof of concept fiddle

代码 sn-p：

$(function() {
  $("#btnmap").click(function() {
    // debugger;
    $("#dialog").dialog({
      modal: true,
      title: "Location",
      width: 600,
      height: 450,
      buttons: {
        Close: function() {
          $(this).dialog('close');
        }
      },
      open: function() {
        //debugger;
        var mapOptions = {
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        // debugger;
        var map = new google.maps.Map($("#canvasMap")[0], mapOptions);

        var geocoder = new google.maps.Geocoder();
        geocoder.geocode({
          address: $("#lblOfficeAddress").text()
        }, function(results, status) {
          if (status == "OK") {
            map.setCenter(results[0].geometry.location);
            map.setZoom(18);
          } else alert("Geocode failed, status=" + status);
        });
      }
    });
  });
});

html,
body,
#canvasMap {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&ext=.js"></script>
<button id="btnmap">MAP</button>
<div id="dialog">
  <div id="canvasMap"></div>
</div>
<div id="lblOfficeAddress">
  13560 Morris Rd, Alpharetta, GA 30004, USA
</div>

【讨论】：