将地理编码的谷歌地图添加到 div

Question

我花了一整天的时间查看文档和示例，但我正在彻底改变自己。我希望我能被引导到正确的方法来做到这一点。我正在使用 jQuery。

目的是制作一张地图，向学生展示that a story 所指的国家/地区的位置。我曾经使用cut&paste solution 实现过它，但在切换 div 时它不起作用 - 长话短说，我觉得我需要重做它，但有点超出我的深度。我找到elsewhere on here地理编码的代码：

var geocoder = new google.maps.Geocoder();
var address = $("#infopanel .map a.header").text();
map = $("#infopanel .map div");

geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
    var latitude = results[0].geometry.location.lat();
    var longitude = results[0].geometry.location.lng();
    } 
});

这是添加地图的代码，但请注意，我不知道如何将地理编码的结果放入 mapOptions 的 center 变量中：

var mapOptions = {
    center: new google.maps.LatLng(*geocoded-data*),
    zoom: 3,
    mapTypeId: google.maps.MapTypeId.TERRAIN,
    panControl: false,
    zoomControl: true,
    mapTypeControl: false,
    scaleControl: false,
    streetViewControl: false,
    overviewMapControl: false
   };

    new google.maps.Map(map,mapOptions);

这是来自this answer 的调整大小/居中解决方案的 slideToggle 代码，但同样，我如何将地理编码数据放入 setCenter：

$("#infopanel ul li > div").slideToggle("fast"); // hide the content
$("#infopanel a.header").click(function(e){ // toggle the content.
var hascontent = $(this).next("div");
if (hascontent.length == 1) {
    e.preventDefault();
    $(this).next().slideToggle("slow", function () {
        google.maps.event.trigger(map, "resize"); // resize map
        map.setCenter(*geocoded-data*); // center map
        });
    }
});

对于上下文，这里是所有内容所在的 HTML：

<li class="map"><a href="" class="header">Zimbabwe</a>
    <div style="width:220px;height:220px;"><a href="http://maps.google.com.au/maps?q=Zimbabwe&amp;z=3">Find Zimbabwe on Google Maps</a></div>
</li>

如何将这三者联系起来？

Answer 1

这是一个设置center of the map from a geocoded address 的非常简单的示例。

关键是这个：

  if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
      map.setCenter(results[0].geometry.location);

如果地理编码操作成功，则将地图的中心设置为返回的值。