在jQuery对话框中显示Google地图模式弹出窗口传递地址

第一次使用谷歌地图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);

---

但我不知道如何将这两种方法结合起来打开地图

在

打开

功能中，不要设置地图的

中心

和

缩放

属性，而是调用地理编码器，并使用结果设置地图中心

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);
});

代码片段：

$（函数（）{
$（“#btnmap”）。单击（函数（）{
//调试器；
$（“#对话框”）。对话框({
莫代尔：是的，
标题：“地点”，
宽度：600，
身高：450，
按钮：{
关闭：函数（）{
$（this.dialog（'close'）；
}
},
打开：函数（）{
//调试器；
变量映射选项={
mapTypeId:google.maps.mapTypeId.ROADMAP
}
//调试器；
var map=new google.maps.map（$（“#canvasMap”）[0]，mapOptions）；
var geocoder=new google.maps.geocoder（）；
地理编码({
地址：$（“#lblOfficeAddress”）.text（）
}，功能（结果、状态）{
如果（状态=“正常”）{
map.setCenter（结果[0].geometry.location）；
map.setZoom（18）；
}else警报（“地理编码失败，状态=”+状态）；
});
}
});
});
});
html，
身体，
#画布地图{
身高：100%；
宽度：100%；
边际：0px；
填充：0px
}

地图
美国佐治亚州阿尔法雷塔莫里斯路13560号，邮编30004
在
打开
功能中，调用地理编码器，使用结果设置地图中心，而不是设置地图的
中心
和
缩放
属性

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);
});


代码片段：


$（函数（）{
$（“#btnmap”）。单击（函数（）{
//调试器；
$（“#对话框”）。对话框({
莫代尔：是的，
标题：“地点”，
宽度：600，
身高：450，
按钮：{
关闭：函数（）{
$（this.dialog（'close'）；
}
},
打开：函数（）{
//调试器；
变量映射选项={
mapTypeId:google.maps.mapTypeId.ROADMAP
}
//调试器；
var map=new google.maps.map（$（“#canvasMap”）[0]，mapOptions）；
var geocoder=new google.maps.geocoder（）；
地理编码({
地址：$（“#lblOfficeAddress”）.text（）
}，功能（结果、状态）{
如果（状态=“正常”）{
map.setCenter（结果[0].geometry.location）；
map.setZoom（18）；
}else警报（“地理编码失败，状态=”+状态）；
});
}
});
});
});
html，
身体，
#画布地图{
身高：100%；
宽度：100%；
边际：0px；
填充：0px
}

地图
美国佐治亚州阿尔法雷塔莫里斯路13560号，邮编30004