Не удается получить доступ к http-сайту, чтобы получить маркер карты на моем сайте https

Question

Я использую карты Google и пытаюсь вставить div на карту. В div есть ссылка на маркер карты google: google map marker

Когда я запускаю свой код ниже, я получаю сообщение об ошибке в консоли браузера.

SEC7111: HTTPS безопасность скомпрометирована http://maps.gstatic.com/mapfiles/markers2/marker.png

Должен ли я просто загрузить изображение и ссылку на него или есть способ получить доступ к нему в CSS моего сайта, как показано ниже? Если загрузка - лучший вариант, каким будет мой путь в CSS? В настоящее время я продолжаю изображения в 'App_Data-> Изображения'

$('<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>

Answer 1

Я бы сказал, что вы получаете это предупреждение из-за того, что API Карт Google обслуживает документы с использованием HTTPS-уровня (Socket 443), и вам требуется, чтобы ресурс получил HTTP-порт stantandard (80).

Ваш код CSS:

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

Модифицированный код CSS:

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

И лично говоря, я хотел бы предложить, чтобы сохранить все свои активы в вашей папке проекта, это всегда простой способ Работа. В этом случае путь изображения будет следующим:

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

Надеюсь, это поможет!

Answer 2

Вы пытались с помощью безопасного URL для маркеров?

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

Браузер может жаловаться, потому что вы запрашиваете необеспеченные ресурсы с защищенной страницы.