CartoDB data not displaying on Google basemap

Question

I'm new to CartoDB but hoping to use it to display various types of real estate data on my website. That said I've been playing around with some of the sample code (Google Maps V3 integration example - https://github.com/CartoDB/cartodb.js/blob/develop/examples/gmaps.html) and cannot get this data to display within my website (see test page - https://metropolisiq.com/MapTest). I've tried the same code within Dreamweaver and it works fine. Not sure what the issue is, but perhaps it relates to the differences between Dreamweaver and my website:

1. My site is encrypted (HTTPS)
2. My site was built using the Joomla CMS.

How do I solve this?

Answer 1

Your site is running over HTTPS which requires some changes to your code.

Update the .css file source,

<link rel="stylesheet" href="https://d3voyrscnb0slx.cloudfront.net/cartodb.js/v3/themes/css/cartodb.css" />
<!--[if lte IE 8]>
 <link rel="stylesheet" href="https://d3voyrscnb0slx.cloudfront.net/cartodb.js/v3/themes/css/cartodb.ie.css" />
<![endif]-->

Next, update the cartodb.js source,

<script src="https://d3voyrscnb0slx.cloudfront.net/cartodb.js/v3/cartodb.js"></script>

Update the google maps source,

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

Finally, update the viz.json createLayer method to an HTTPS url and tell it to use HTTPS

cartodb.createLayer(map, 'https://documentation.cartodb.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json', {https: true})

I think that will fix it for you.