-
-
Save javisantana/49d31ea2787a53e7ae2d to your computer and use it in GitHub Desktop.
layer from scratch + infowindow in gmaps
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Gmaps example | CartoDB.js</title> | |
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> | |
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> | |
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" /> | |
<style> | |
html, body, #map { | |
height: 100%; | |
padding: 0; | |
margin: 0; | |
} | |
</style> | |
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" /> | |
<!--[if lte IE 8]> | |
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.ie.css" /> | |
<![endif]--> | |
</head> | |
<body> | |
<div id="map"></div> | |
<!-- include google maps library *before* load cartodb.js --> | |
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> | |
<!-- include cartodb.js library --> | |
<script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.uncompressed.js"></script> | |
<script type="infowindow/html" id="infowindow_template"> | |
<span> custom </span> | |
<div class="cartodb-popup"> | |
<a href="#close" class="cartodb-popup-close-button close">x</a> | |
<div class="cartodb-popup-content-wrapper"> | |
<div class="cartodb-popup-content"> | |
<!-- content.data contains the field info --> | |
<h4>{{content.data.ppe_ma}}</h4> | |
</div> | |
</div> | |
<div class="cartodb-popup-tip-container"></div> | |
</div> | |
</script> | |
<script> | |
function main() { | |
var map; | |
var my_city = new google.maps.LatLng(43.7292108173, 12.6530746836); | |
var mapOptions = { | |
zoom: 15, | |
center: my_city, | |
}; | |
map = new google.maps.Map(document.getElementById('map'), mapOptions); | |
cartodb.createLayer(map, { | |
user_name: 'sissy0584', | |
type: 'cartodb', | |
sublayers: [{ | |
sql: "SELECT * FROM output_new", | |
cartocss: '#output_new { marker-opacity: 0.9; marker-fill: red; marker-width: 12;}', | |
interactivity: 'ppe_ma' | |
}] | |
}) | |
.addTo(map) | |
.on('done', function(layer) { | |
// get sublayer 0 and set the infowindow template | |
var sublayer = layer.getSubLayer(0); | |
// when you create a visualization from scratch you need to | |
// use cdb.vis.Vis.addInfowindow to set the params | |
// if you use viz.json the infowindow params are inside it | |
cdb.vis.Vis.addInfowindow(map, sublayer, ['cartodb_id','ppe_ma'], { | |
// we provide a nice default template, if you want yours uncomment this | |
//infowindowTemplate: $('#infowindow_template').html() | |
}); | |
sublayer.setInteraction(true); | |
}).on('error', function() { | |
console.log("some error occurred"); | |
}); | |
}//end main | |
window.onload = main; | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment