Google Map не работает с Pjax при переходе с другой страницы

Я хочу иметь карту google на своем веб-сайте, но карта не отображается, если я сначала открою index.html и перейдите к map.html.Google Map не работает с Pjax при переходе с другой страницы

Но если я непосредственно открываю map.html или обновляю окно браузера, находясь на map.html, карта отображается.

Как карта может отображаться при переходе с index.html на номер map.html?

Я использую standalone Pjax JavaScript module v0.1.4 stable (без jquery).

Я добавил document.write("rendered at: "+ Date.now()) В моем примере кода для лучшего понимания.

index.html

<!DOCTYPE html> 
<html> 
<head> 
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css"> 
    <link rel= "stylesheet" type="text/css" href="style.css"/> 
    <script type="text/javascript" src="https://raw.githubusercontent.com/MoOx/pjax/a17a6b90bebefd8f5209e6a6f7d8c5d59296232a/src/pjax.js"></script> 
    <script type="text/javascript" src='example.js'></script> 
</head> 
<body> 
    <div class="col-sm-2"> 
    <div class="list-group dynamic"> 
     <a href="index.html" class="list-group-item active">Start</a> 
     <a href="map.html" class="list-group-item">Map</a> 
    </div> 
    </div> 
    <div class="col-sm-10"> 
    <h1>STATIC HEADING</h1> 
    <script type="text/javascript">document.write("rendered at: "+ Date.now())</script> 
    <div class="dynamic"> 
     <h4>this is a dynamic line, this is site 1</h4> 
    </div> 
    </body> 
    </html>

map.html

<!DOCTYPE html> 
<html> 
<head> 
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css"> 
    <link rel= "stylesheet" type="text/css" href="style.css"/> 
    <script type="text/javascript" src="https://raw.githubusercontent.com/MoOx/pjax/a17a6b90bebefd8f5209e6a6f7d8c5d59296232a/src/pjax.js"></script> 
    <script type="text/javascript" src='example.js'></script> 
</head> 
<body> 
    <div class="col-sm-2"> 
    <div class="list-group dynamic"> 
     <a href="index.html" class="list-group-item">Start</a> 
     <a href="map.html" class="list-group-item active">Map</a> 
    </div> 
    </div> 
    <div class="col-sm-10"> 
    <h1>STATIC HEADING</h1> 
    <script type="text/javascript">document.write("rendered at: "+ Date.now())</script> 
    <div class="dynamic"> 
     <h4>this is a dynamic line, this is the map site</h4> 
     <!-- map is not displayed currently --> 
     <script src="https://maps.googleapis.com/maps/api/js"></script> 
     <script> 
     function initialize() { 
      var mapCanvas = document.getElementById('map-canvas'); 
      var latLng = new google.maps.LatLng(50.0, 10.0) 
      var mapOptions = {center: latLng,zoom: 4,mapTypeId: google.maps.MapTypeId.ROADMAP} 
      var map = new google.maps.Map(mapCanvas, mapOptions) 
     } 
     google.maps.event.addDomListener(window, 'load', initialize); 
     </script> 
     <div id="map-canvas"></div> 
    </div> 
    </div> 
</body> 
</html>

style.css

#map-canvas { 
    width: 90%; 
    height: 500px; 
}

example.js

document.addEventListener("DOMContentLoaded", function() { 
    var pjax = new Pjax({ 
    selectors: [".dynamic"] 
    }) 
    console.log("Pjax initialized.", pjax) 
})

источник

2016-02-09 foobarbaz

Присвоить стиль явно на карте DIV карта работа .. может быть у Вас есть ошибка в пути для style.css

<!DOCTYPE html> 
<html> 
    <head> 
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css"> 
    <link rel= "stylesheet" type="text/css" href="style.css"/> 
    <script type="text/javascript" src="https://raw.githubusercontent.com/MoOx/pjax/a17a6b90bebefd8f5209e6a6f7d8c5d59296232a/src/pjax.js"></script> 
    <script type="text/javascript" src='example.js'></script> 
    </head> 
    <body> 
    <div class="col-sm-2"> 
     <div class="list-group dynamic"> 
     <a href="index.html" class="list-group-item">Start</a> 
     <a href="map.html" class="list-group-item active">Map</a> 
     </div> 
    </div> 
    <div class="col-sm-10"> 
     <h1>STATIC HEADING</h1> 
     <script type="text/javascript">document.write("rendered at: "+ Date.now())</script> 
     <div class="dynamic"> 
     <h4>this is a dynamic line, this is the map site</h4> 
     <div id="map-canvas" style="width:90%; height:500px;"></div> 
     </div> 
    </div>   
    <!-- map is not displayed currently --> 
    <script src="https://maps.googleapis.com/maps/api/js"></script> 
    <script> 
     function initialize() { 
     var mapCanvas = document.getElementById('map-canvas'); 
     var latLng = new google.maps.LatLng(50.0, 10.0) 
     var mapOptions = {center: latLng,zoom: 4,mapTypeId: google.maps.MapTypeId.ROADMAP} 
     var map = new google.maps.Map(mapCanvas, mapOptions) 
     } 
     google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
    <script type="text/javascript" src='example.js'></script> 
    </body> 
</html>

источник

2016-02-09 19:48:01 scaisEdge

Это не работает. Я попробовал код с firefox и chrome. Я не знаю почему, но карты отображаются в хроме, к сожалению, все это неправильно в хроме, потому что контент не динамически загружен, потому что время «rendered at ....» становится обновленным при навигации с хром, но этот контент должен быть static – foobarbaz

Код, который я опубликовал, работает с firefox .. я тестировал .. это ... – scaisEdge

Я не могу заставить этот код работать. Я очистил свой кеш браузера, открыл файлы локально (файл: //) и через lactate webserver. Все еще нет успеха. – foobarbaz

Google Map не работает с Pjax при переходе с другой страницы

ответ

Смежные вопросы