<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap@3.3.1" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="http://jschr.github.io/textillate/assets/animate.css" />
<!--<link rel="stylesheet" href="http://jschr.github.io/textillate/assets/style.css" />-->
<script data-require="jquery@2.1.3" data-semver="2.1.3" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script data-require="bootstrap@3.3.1" data-semver="3.3.1" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script data-require="knockout@3.3.0" data-semver="3.3.0" src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
<script type="text/javascript" src="http://jschr.github.io/textillate/assets/jquery.lettering.js"></script>
<script type="text/javascript" src="http://jschr.github.io/textillate/assets/jquery.fittext.js"></script>
<script type="text/javascript" src="http://jschr.github.io/textillate/jquery.textillate.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<script src='https://maps.googleapis.com/maps/api/js?key=AIzaSyA6iZkIKPCujL4UPLuJFCllDStot1SG1wA'></script>
<map id="mymap"></map>
<map id="yourmap"></map>
<script src="script.js"></script>
</body>
</html>
var DataListViewModel = function(params, componentInfo) {
var self = this;
var id;''
self.getId = function(){
return 'map';
}
self.mapshit = function () {
var map;
var x = (Math.floor(Math.random() * 180000) - 90000)/1000;
var y = (Math.floor(Math.random() * 360000) - 180000)/1000;
map = new google.maps.Map(document.getElementById(id), {
center: {lat: x, lng: y},
zoom: 8
});
}
self.doMap = function(){
};
self.initialize = function(params, componentInfo) {
/**
* Initialize the View Model for the data-list component,
* setting all callbacks, and creating the columnDefinitionsCache.
* This also validates input params.
*
* @param {object} params: the knockout components standard params property
* @param {object} componentInfo: the knockout components standard componentInfo property
*/
id = componentInfo.element.id;
self.mapshit();
};
self.initialize(params, componentInfo);
};
ko.components.register('map', {
/**
* Register the data-list component.
*/
viewModel: {
createViewModel: function (params, componentInfo) {
return new DataListViewModel(params, componentInfo);
}
},
template: ' <div data-bind="attr:{\'id\':getId()}">\
</div>\
'
});
ko.applyBindings();
map {
width: 400px;
height: 400px;
display:block;
}