CODEWITHSUNDEEP
javascripthtmlcssgoogle-maps-api-3https
chuckd
chuckd

Reputation: 14540

Can't access http site to get map marker in my https site

I'm using google maps and trying to insert a div on the map. In the div there is a reference to a google maps marker from the url: google map marker

When I run my code below I get the error in the browser console.

SEC7111: HTTPS security is compromised by http://maps.gstatic.com/mapfiles/markers2/marker.png

Should I just download the image and reference it or is there a way to access it in my site's css like below? If downloading it is the better option, what would my path be in CSS? Currently I keep images in 'App_Data->Images'

$('<div/>').addClass('centerMarker').appendTo($googlemap.getDiv())
  //do something onclick
  .click(function() {
    var that = $(this);
    if (!that.data('win')) {
      that.data('win', new google.maps.InfoWindow({
        content: 'this is the center'
      }));
      that.data('win').bindTo('position', $googlemap, 'center');
    }
    that.data('win').open($googlemap);
  });
.centerMarker {
  position: absolute;
  /*url of the marker*/
  background: url(http://maps.gstatic.com/mapfiles/markers2/marker.png) no-repeat;
  /*center the marker*/
  top: 50%;
  left: 50%;
  z-index: 1;
  /*fix offset when needed*/
  margin-left: -10px;
  margin-top: -34px;
  /*size of the image*/
  height: 34px;
  width: 20px;
  cursor: pointer;
}
<div id="map-canvas" style="height: 380px; width: 480px"></div>

Upvotes: 0

Views: 100

Answers (2)

Llogari Casas
Llogari Casas

Reputation: 962

I would say that you are getting this warning due the fact that Google Maps API serve the docs using HTTPS layer (Socket 443) and you are requiring an asset trought an stantandard HTTP Port (80).

Your CSS code:

background: url(http://maps.gstatic.com/mapfiles/markers2/marker.png) no-repeat;

Modified CSS code:

background: url(https://maps.gstatic.com/mapfiles/markers2/marker.png) no-repeat;

And personally speaking, I would suggest to keep all your assets in your project folder, it is always an easier way to work. In that case, the Image path would be:

background: url(App_Data/images/marker.png) no-repeat;

Hope it helps!

Upvotes: 1

Bob
Bob

Reputation: 523

Have you tried using a secure URL for the marker?

https://maps.gstatic.com/mapfiles/markers2/marker.png

The browser may be complaining because you are asking for unsecured resources from a secured page.

Upvotes: 1

Related Questions