« back to discussion

Non-https google map embed

I find it unbelievable that after Google updated their Maps API, you can only load a map over HTTPS. I browsed around and see 100 broken maps on people's sites now...

They have no examples anywhere that I've found (although I admit... I didn't look too hard on their main site, due to information overload. It could very well be there but given the amount of answers on SO being confused I'm not sure). At the very least they need to show this option on the create embed code page. I think this is a serious level of 'WTF' that they don't make this easier to find...

Either way this is how you do it. Half of it came from an SO thread, however it didn't have a marker so I had to add that. Also there was a bit of his code that was wrong.

Not sure if this helps anyone, and I wouldn't rarely post a snippet that you could google.. but this was far more painful than it should have been.

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

<div id="deMap" style="width: 450px; height: 300px;"></div>

<script type="text/javascript">

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

// Step 2
var latLong = new G.LatLng(40.413169, -3.709173);
var deMap = document.getElementById('deMap');
var mapOptions = {
    zoom: 14,
    center: latLong,
    mapTypeId: google.maps.MapTypeId.ROADMAP
map = new G.Map(deMap, mapOptions);

var marker = new google.maps.Marker({
  position: latLong,
  map: map,
  title:"Hello World!"

// 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;
    else {
        alert("Geocode was not successful for the following reason: " + status);
about 3 years ago, by pineapple

0 Replies

Login or to comment.

« back to discussion

Tutorials are any resources you learn from.

Examples: an intro to html5 screencast, a pdf about git, photoshop effects tutorials, meta-programming in ruby, lambda calculus, higher-order fixed-point combinators.

Tools are websites, apps or services used -on- your project (indirectly), to aid the process.

Examples: A color scheme generator, email marketing software, usability heat maps, css3 code generators, a downloadable png compressor.

Assets are downloadable files used -in- your projects, usually as code, textures, or images.

Examples: a jquery sticky menu, photoshop brushes, background textures, mvc frameworks, twitter bootstrap, 960 grid system.