Skip to content

Instantly share code, notes, and snippets.

@xiaotian-tan

xiaotian-tan/index.html

Last active February 28, 2017 15:41
Show Gist options
  • Save xiaotian-tan/2f117a7a0715a14f7670 to your computer and use it in GitHub Desktop.
Save xiaotian-tan/2f117a7a0715a14f7670 to your computer and use it in GitHub Desktop.
Download ZIP
Google Maps embed toggle in AngularJs
Raw
index.html
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
<script src="main.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl"> <a href="#" ng-click="showMap()">view map</a>
<div id="map" ng-show="displayMap">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d806400.0834064049!2d145.07961604999997!3d-37.860282799999965!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad646b5d2ba4df7%3A0x4045675218ccd90!2sMelbourne+VIC!5e0!3m2!1sen!2sau!4v1401707343104" width="600" height="450" frameborder="0" style="border:0"></iframe>
</div>
</div>
</body>
</html>
Raw
main.js
var app = angular.module('myApp', []);
function myCtrl($scope) {
$scope.displayMap = false;
$scope.showMap = function () {
if ($scope.displayMap) {
$scope.displayMap = false;
} else {
var iframe = angular.element('iframe');
var map = iframe.parent();
// reload the iframe
map.html(map.html());
$scope.displayMap = true;
}
};
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment