高さと幅を 100% に設定すると、Twitter Bootstrap CSS が競合する必要があると思われます。同様の問題を抱えている人のために残します。
ユーザーがリンクをクリックしたときに Web ページに Google マップを実装しようとしています。すべての PHP は正常に動作しますが、何らかの理由で Google マップが表示されません。API ドキュメントのすべての例を読み直し、再すべてのコードを読みますが、まだ機能していない理由がわかりません..
地図を表示するページはこちら
注: PHP は正常に動作し、スクリプトはページの読み込み時に読み込まれますが、マップは読み込まれません。
<?php
/* Include header and config and set variable*/
require_once('config.inc.php');
require_once($rootdir . $dirsubfolder . 'navbar.php');
$route = $_GET['route'];
?>
<?php
/* User wants to retrieve their route */
if (isset($route)) {
?>
<?php
/* User wants Route 1 */
if (strcmp($route, "sunroute1") == 0) {
?>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.googleapis.com/maps/api/js?key=WORKINGKEYk&sensor=true&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
<?php
printf('worked');
} else { printf('failed'); }
?>
<div class="container">
<div class="hero-unit">
<div id="map_canvas" style="width: 100%; height: 100%"></div>
</div>
</div>
<?php
/* End isset(route) */
}
/* Include footer */
require_once($rootdir . $dirsubfolder . 'footer.php');
?>
そして私のfooter.phpの中に私は持っています
<script src="https://maps.googleapis.com/maps/api/js?key=MYKEYWORKING&sensor=false"></script>
view sourceページからはこちら
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.googleapis.com/maps/api/js?key=WORKING&sensor=true&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
worked
<div class="container">
<div class="hero-unit">
<div id="map_canvas" style="width: 100%; height: 100%"></div>
</div>
</div>
そして、フッターの私のスクリプト
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap-transition.js"></script>
<script src="js/bootstrap-alert.js"></script>
<script src="js/bootstrap-modal.js"></script>
<script src="js/bootstrap-dropdown.js"></script>
<script src="js/bootstrap-scrollspy.js"></script>
<script src="js/bootstrap-tab.js"></script>
<script src="js/bootstrap-tooltip.js"></script>
<script src="js/bootstrap-popover.js"></script>
<script src="js/bootstrap-button.js"></script>
<script src="js/bootstrap-collapse.js"></script>
<script src="js/bootstrap-carousel.js"></script>
<script src="js/bootstrap-typeahead.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=WORKING&sensor=false"></script>
</body>
</html>