Google maps not working in https://

Question

I am using google maps on http, it is working perfectly fine. But when i installed ssl certificates over the same, it stopped working. It is giving me errors

Mixed Content: The page at 'https://url' was loaded over HTTPS, but requested an insecure script 'http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js?_=1***************'. This request has been blocked; the content must be served over HTTPS.

Solution 1

UPDATE: On May the 12th 2016 Google decommissioned the google-maps-utility-library-v3.googlecode.com source for this library. However, since Google moved the source over to GitHub a while back, please consider the GitHub details covered at the end of this post and, in particular, the final note regarding including the script and resources directly in your project

In addition to changing your script inclusion url from:

http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js

to:

https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js

you'll also need to specify the imagePath option when instantiating your MarkerClusterer along the following lines:

var mc = new MarkerClusterer(map, markers, { 
    imagePath: 'https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m' 
});

This will avoid the following warning which covers the same ground as the script error you've highlighted:

Mixed Content: The page at 'https://url' was loaded over HTTPS, but requested an insecure image 'http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m1.png'. This content should also be served over HTTPS.

The reason this occurs is that, by default, the MarkerClusterer library uses the following non https setting as the root for its cluster images (m1.png, m2.png etc.):

MarkerClusterer.prototype.MARKER_CLUSTER_IMAGE_PATH_ =
    'http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/' +
    'images/m'

Whilst we encountered this issue a while back, it does appear to have been addressed in response to the following pull request on the library's GitHub repository:

Changed HTTP to HTTPS in image link

This GitHub version can be accessed from RawGit by using the following script url:

https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/src/markerclusterer.js

and the following imagePath can be used to access the GitHub images:

var mc = new MarkerClusterer(map, markers, { 
    imagePath: 'https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/images/m' 
});

Whilst the above urls (with the cdn prefixes) have no traffic limits or throttling and the files are served via a super fast global CDN, please bear in mind that RawGit is a free hosting service and offers no uptime or support guarantees.

This is covered in more detail in the following SO answer:

Link and execute external JavaScript file hosted on GitHub

This post also covers that, if you're linking to files on GitHub, in production you should consider targeting a specific release tag to ensure you're getting the desired release version of the script.

However, as the custodians of the js-marker-clusterer repository have yet to create any releases, this isn't currently possible.

As a result, you should seriously consider downloading and including the library and its resources directly in your project for production purposes.

Solution 2

If you access your website through https, all content that it serves must come from https as well. That includes images, stylesheets and JS scripts. Just change http to https in the URL.

Solution 3

I faced this problem today for Marker cluster library, so I had to update the images directory manually from the js source file, open markercluster.js

and replace:

https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer

With the directory in github:

https://googlemaps.github.io/js-marker-clusterer

And you should be fine..

Solution 4

Check the script inclusion url for google maps and remove the http protocol from the url:

http://google-maps-utility-library-v3.googlecode.com/svn/trunk/mar...

will become

//google-maps-utility-library-v3.googlecode.com/svn/trunk/mar...

in this manner the script will be served using the correct protocol (http or, in your case, https)

View more solutions

Comments

[Mark McDonald]

Please note that one of the reasons that this failed to begin with is that linking directly to someone else's source control from production apps is risky. GitHub does not support including JS from their CDN for this reason, and by including another level of indirection (e.g. cdn.rawgit.com), you are adding another potential point of failure. Doing this in a production app is very risky. Please try to host the things you care about on your own infrastructure.

[PeterTheOne]

You should download and link to the images locally like it is described here: stackoverflow.com/a/37499989/782920

[Agung Sagita]

after installing certificate and based from this info, search and replacing http->https, around 91 files later... and.. everything works fine, thank you !... most popular site already have secure conn, this simple solution does work