在jQuery对话框中显示谷歌地图模态弹出窗口传递地址

Question

第一次使用谷歌地图API。 我想打开一个按钮上的谷歌地图点击里面的弹出窗口传递地址，而不是经度和纬度。

我能够做到这一点与以下代码传递经纬度和长期问题。

$(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); 

但不知道如何结合这两个打开地图。非常感谢帮助。谢谢！

Answer 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

代码片段：

$(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>