0

我正在尝试在此处（页面中间）为我们的活动页面安装新的 Google APIv3 地图。

当前地图是旧的嵌入式地图，我无法显示新地图。

我有 API 密钥，需要使用像当前这样的邮政编码参数：

          <div class="event-map">
            <iframe src="http://maps.google.co.uk/maps?q=<%=server.URLEncode(""&rs("ca_postcode"))%>&amp;ie=UTF8&amp;hq=&amp;hnear=<%=Session("PublicFranchiseName")%>+<%=server.URLEncode(""&rs("ca_postcode"))%>,+United+Kingdom&amp;z=14&amp;iwloc=near&amp;output=embed"></iframe>
        </div>
    <% end if %>

以下是来自谷歌的代码：

        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

这是我尝试过的代码，但不起作用：

       <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <style>
              html { height: 100% }
              body { height: 100%; }
              #map-canvas { height: 100% }
            </style>

      <script src="https://maps.googleapis.com/maps/api/js?q=<%=server.URLEncode(""&rs("ca_postcode"))%>&hnear=<%=Session("PublicFranchiseName")%>+<%=server.URLEncode(""&rs("ca_postcode"))%>,+United+Kingdom&key=&sensor=false"></script>
            <script>
        var map;
        function initialize() {
          var mapOptions = {
            zoom: 8,
            center: new google.maps.LatLng(-34.397, 150.644),
            mapTypeId: google.maps.MapTypeId.ROADMAP
          };
          map = new google.maps.Map(document.getElementById('map-canvas'),
              mapOptions);
        }

        google.maps.event.addDomListener(window, 'load', initialize);

            </script>

任何帮助都会很棒

更新代码：

<div id='map-canvas'></div>
 <script src="http://maps.googleapis.com/maps/api/js?q=<%=server.URLEncode(""&rs("ca_postcode"))%>&hnear=<%=Session("PublicFranchiseName")%>+<%=server.URLEncode(""&rs("ca_postcode"))%>,+United+Kingdom&key=&sensor=false"></script>
<script>
var map;
function initialize() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var geolocate = function(address, callback) {
        $.ajax({
                url: "http://maps.googleapis.com/maps/api/geocode/json",
                data: {
                    "sensor": true,
                    "address": address
                },
                dataType: "json",
                success: function(d) {
                    if (d.status == "ZERO_RESULTS") callback(false);
                    if (d.results && d.results[0] && d.results[0].geometry) {
                        callback({
                            "ne": d.results[0].geometry.bounds.northeast,
                            "sw": d.results[0].geometry.bounds.southwest,
                            "center": d.results[0].geometry.location
                        });
                    }
                    else callback(false);
                }
            });
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
  geolocate("<%=server.URLEncode(""&rs("ca_postcode"))%>&hnear=<%=Session("PublicFranchiseName")%>+<%=server.URLEncode(""&rs("ca_postcode"))%>,+United+Kingdom", function(c) {
        map.setCenter(new google.maps.LatLng(c.center.lat, c.center.lng));
 });
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
4

1 回答 1

0

我已经更正了您的错误（这是由于 API 的 URI）并为您添加了对 Google API 的地理定位调用。在以下地址可以看到您的代码示例：http: //tinker.io/95285

地理定位调用是通过 AJAX 完成的。我选择在这个小提琴中包含 jQuery。如果您不使用 jQuery，请将调用替换为您常用的 AJAX 库。地理定位 API 代码的灵感来自我在此处提供的 API 的演示代码。

如果您有任何问题随时问！

请注意，您的 API 密钥对于您正在做的事情是不必要的。此外，鉴于它目前是公开的，您可能想要更改它。

于 2013-05-11T19:40:02.810 回答