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 %>

以下は、Google のコードです。

        <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 に答える