Skip to content

Instantly share code, notes, and snippets.

@kosmiq
Last active August 29, 2015 14:17
Show Gist options
  • Save kosmiq/cba5552d5edba3171f3f to your computer and use it in GitHub Desktop.
Save kosmiq/cba5552d5edba3171f3f to your computer and use it in GitHub Desktop.
Add Google Maps via JS to avoid hidden iFRAMES on mobile
/**
* Outputs the Google Maps iframe.
*/
gmapiframe = function() {
var iframe = document.createElement('iframe');
iframe.frameBorder=0;
iframe.border=0;
iframe.width="600px"; //set width
iframe.height="450px"; //set height
iframe.id="gmap-iframe";
iframe.setAttribute("src", 'Gmaps Embed URL'); //set map URL
$( ".gmap" ).append(iframe);
}
gmapimage = function() {
// Create maps with Static Map Maker on codepen.io: http://codepen.io/katydecorah/pen/Klieu
$gmapimagehref = 'Short URL of map location'; //Short URL to direct use to when clicking the image
$gmapimagetarget = '_blank';
$gmapimagealt = 'Google Map of [Address]';
$gmapimagesrc = 'URL from Static Map Maker';
var gmapimage = '<a href="' + $gmapimagehref + '" target="' + $gmapimagetarget + '"><img alt="' + $gmapimagealt + '" src="' + $gmapimagesrc + '"></a>';
$( ".gmap" ).append(gmapimage);
}
if ($('.responsive-check').css('display') == 'inline') {//check whatever responsive check. If not mobile, append the iFrame
gmapiframe();
} else if ($('.responsive-check').css('display') == 'block') {//if mobile, append the image
gmapimage();
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment