CODEWITHSUNDEEP
javascriptgoogle-mapsiframe
Liftoff
Liftoff

Reputation: 25372

Embedding Google Maps without using HTTPS

I am simply trying to embed Google Maps with a dynamically changing address (taken from a database), but I want to remain in http. Every time I try to embed Maps, it loads, but several errors are sent to the console (over 60 iterations of the same error):

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.

How do I fix this? My iframe code:

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';

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

Upvotes: 1

Views: 5268

Answers (2)

Adrian Larson
Adrian Larson

Reputation: 370

I believe you need to change your iframe to a div. Then include the following script in your header:

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

Depending on what you want to do with the addresses in your database and how they are formatted, there are several directions you can go from here. One example is if you had text addresses and wanted to center the map on them. You could do that as follows:

  1. Load the Google Maps API and create your Geocoder object.
  2. Create your map object and use it to fill your div. As in your code, height and width must be set explicitly: <div id="deMap" style="width: 405px; height: 150px;"></div>.
  3. Query the Geocoder object to get address coordinates.
  4. Center the map, etc.

See below:

// 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);
    }
}

For more information, consult Google Maps JavaScript API, which is thoroughly documented here.

You can also see how I implemented it to accomplish a seemingly similar task here.

Upvotes: 1

gruppler
gruppler

Reputation: 676

I'm not sure why, but changing "source=embed" to "output=embed" seems to fix the issue for me. I still get the same JavaScript errors, but the map loads and works perfectly.

Upvotes: 0

Related Questions