1

動的に変化するアドレス (データベースから取得) を使用して Google マップを埋め込もうとしているだけですが、http のままにしたいと考えています。マップを埋め込もうとするたびに読み込まれますが、いくつかのエラーがコンソールに送信されます (同じエラーが 60 回以上繰り返されます)。

Unsafe JavaScript attempt to access frame with URL http://mydomain.com from frame with URL https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=address&z=14&output=embed. 
The frame requesting access has a protocol of 'https', the frame being accessed has a protocol of 'http'. Protocols must match.

これを修正するにはどうすればよいですか? 私のiframeコード:

document.getElementById("deMap").src = 'http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q='+arr[5]+'&hnear='+arr[5]+'&z=14&output=embed';

関連する HTML:

    <div id="deRight">
        <iframe id="deMap" width="405px" height="150px" style="background-color:rgba(0,0,0,.5)"></iframe><br>Contact Info:<br>
        <div id="deContact"></div><br>
        Additional Info.:<br>
        <div id="deInfo"></div>
        <div class="footer" style="width:410px">
            <hr style="width:100%; height:1px; background-color: #CCC; border:0px; margin: 0px; margin-bottom:5px"/>
            <button class="formBtn" onclick="editEvt()">Edit Event</button>
        </div>
    </div>
4

2 に答える 2

1

に変更する必要があると思いiframeますdiv。次に、ヘッダーに次のスクリプトを含めます。

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

データベース内のアドレスで何をしたいか、およびそれらの形式に応じて、ここから進むことができるいくつかの方向があります。1 つの例は、テキスト アドレスがあり、それらをマップの中央に配置したい場合です。次のように実行できます。

  1. Google Maps API を読み込み、Geocoder オブジェクトを作成します。
  2. マップ オブジェクトを作成し、それを使用してdiv. コードのように、高さと幅を明示的に設定する必要があります: <div id="deMap" style="width: 405px; height: 150px;"></div>.
  3. Geocoder オブジェクトにクエリを実行して住所座標を取得します。
  4. マップなどを中央に配置します。

下記参照：

// Step 1
var G = google.maps;
var geocoder = new G.Geocoder();

// Step 2
var deMap = document.getElementById('deMap');
var center = new G.LatLng(0, 0);
var mapOptions = {
    zoom: 14,
    center: center,
    mapTypeId: G.MapTypeId.ROADMAP
};
map = new G.Map(deMap, mapOptions);

// Step 3
function changeAddress(address) {
    geocoder.geocode({'address': address}, parseResult);
}

// Step 4
function parseResult(res, status) {
    if (status == G.GeocoderStatus.OK && res.length) {
        var latlng = res[0].geometry.location;
        map.set_center(latlng);
    }
    else {
        alert("Geocode was not successful for the following reason: " + status);
    }
}

詳細については、Google Maps JavaScript API を参照してください。これについては、こちらで詳しく説明されています。

一見似たようなタスクを達成するために私がそれをどのように実装したかもここで見ることができます。

于 2013-01-15T17:35:07.373 に答える
0

理由はわかりませんが、「source=embed」を「output=embed」に変更すると問題が解決するようです。同じ JavaScript エラーが引き続き発生しますが、マップは読み込まれ、完全に機能します。

于 2013-02-20T16:06:01.883 に答える