This gist is my attempt to get MapQuest to work with AngularJS templates.
<!doctype html> | |
<html ng-app="map-app" > | |
<head> | |
<meta charset="utf-8"> | |
<title>AngularJS and MapQuest Plunker</title> | |
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css"> | |
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet"> | |
<link rel="stylesheet" href="style.css"> | |
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> | |
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script> | |
<script src="https://raw.github.com/twitter/bootstrap/master/docs/assets/js/bootstrap.js"></script> | |
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script> | |
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular-resource.min.js"></script> | |
<script src="https://raw.github.com/angular-ui/angular-ui/master/build/angular-ui.js"></script> | |
<script src="app.js"></script> | |
<script src="http://open.mapquestapi.com/sdk/js/v7.0.s/mqa.toolkit.js?key=Fmjtd%7Cluub2d6tn1%2C22%3Do5-9u22uu "></script> | |
<script type="text/javascript"> | |
/*An example of using the MQA.EventUtil to hook into the window load event and execute defined function | |
passed in as the last parameter. You could alternatively create a plain function here and have it | |
executed whenever you like (e.g. <body onload="yourfunction">).*/ | |
MQA.EventUtil.observe(window, 'load', function() { | |
/*Create an object for options*/ | |
var options={ | |
elt:document.getElementById('map'), /*ID of element on the page where you want the map added*/ | |
zoom:13, /*initial zoom level of the map*/ | |
latLng:{lat:40.735383, lng:-73.984655}, /*center of map in latitude/longitude */ | |
mtype:'osm', /*map type (osm)*/ | |
bestFitMargin:0, /*margin offset from the map viewport when applying a bestfit on shapes*/ | |
zoomOnDoubleClick:true /*zoom in when double-clicking on map*/ | |
}; | |
/*Construct an instance of MQA.TileMap with the options object*/ | |
window.map = new MQA.TileMap(options); | |
}); | |
</script> | |
</head> | |
<body ng-controller="MainCtrl"> | |
Hello {{name}}! | |
<div id="map" style="width:200px; height:150px;"></div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment