CartoDB No CDN CreateVis
HTML
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.14/cartodb.js"></script>
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.14/themes/css/cartodb.css">
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id='map'></div>
CSS
html, body, #map {
height: 100%;
padding: 0;
margin: 0;
}
JavaScript
function initialize() {
var myLatLng = new google.maps.LatLng(45.4375, 12.3358),
myOptions = {
zoom: 5,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
},
map = new google.maps.Map(document.getElementById('map'), myOptions),
marker = new google.maps.Marker({
position: myLatLng,
map: map
});
cartodb.createLayer(map, 'http://documentation.carto.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json')
.on('done', function(layer) {
map.overlayMapTypes.setAt(1, layer);
layer
.on('featureOver', function(e, latlng, pos, data) {
console.log(e, latlng, pos, data);
})
.on('error', function(err) {
console.log('error: ' + err);
});
}).on('error', function(err) {
console.log("some error occurred: " + err);
});
marker.setMap(map);
moveMarker(map, marker);
}
function moveMarker(map, marker) {
//delayed so you can see it move
setTimeout(function () {
marker.setPosition(new google.maps.LatLng(45.4375, 12.3358));
map.panTo(new google.maps.LatLng(45.4375, 12.3358));
}, 1500);
};
initialize();