Google Maps — Встраивание Googlemap с помощью оператора PHP include
Я создал пользовательскую карту Google для отображения моих филиалов (которая хранится в файле с именем [map-location] .php.
Когда я открываю этот файл в браузере, файл отображается идеально, однако, если я пытаюсь включить этот php-файл с помощью оператора include, он вообще не отображается.
Я попытался скопировать и вставить код прямо на страницу на моем веб-сайте, я хотел бы, чтобы код отображался, но он там также не отображается.
Я бы предпочел, чтобы карта отображалась с помощью оператора include, но сейчас просто показать ее было бы замечательно!
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
.wrap { max-width: 75em; min-height: 40em; height:600px; width:500px; margin: 0 auto; padding-top: 2.5%;}
#map-canvas { height: 90%; }
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true">
</script>
<script type="text/javascript">
var map;
var centerPos = new google.maps.LatLng(51.6491587,0.0386048);
var zoomLevel = 11;function LogoControl(controlDiv, map) {
controlDiv.style.padding = '5px';
var controlUI = document.createElement('div');
controlUI.style.backgroundImage = 'url(http://www.1stopinstruction.com/media/images/logos/1stop/googlemap-title.gif)';
controlUI.style.width = '275px';
controlUI.style.height = '65px';
controlUI.style.cursor = 'pointer';
controlUI.title = 'Click to set the map to Home';
controlDiv.appendChild(controlUI);
google.maps.event.addDomListener(controlUI, 'click', function() {
map.setCenter(centerPos)
map.setZoom(zoomLevel)
});
}
function initialize() {
var mapOptions = {
center: centerPos,
zoom: zoomLevel
};
map = new google.maps.Map( document.getElementById("map-canvas"), mapOptions );
var locations = [
['East London - Ilford (Fairlop Powerleague)', 51.598589, 0.101594],
['North London - Tottenham (Frederick Knight Sports Ground)',51.607052, -0.054270],
['Highams Park - Chingford (LGV & PCV Only)',51.609685, -0.005183],
['North Weald Airfield (kneedown & Wheelie Only)',51.717709, 0.160214],
['Office Address',51.572126, 0.106147]
]
var image = "http://www.1stopinstruction.com/media/images/logos/1stop/googlemap-icon.gif";
logoControlDiv = document.createElement('div');
var logoControl = new LogoControl(logoControlDiv, map);
logoControlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_CENTER].push(logoControlDiv);for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
title: locations[i][0],
map: map,
icon: image
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<body>
<div class="wrap">
<div id="map-canvas"></div>
</div>
</body>
Решение
Проблема в том, что ваш код javascrip выполняется до полной зарядки DOM. Поместите свой код JavaScript в нижней части документа после <div class="wrap">...</div> но внутри body тег
Другие решения
Других решений пока нет …