我有一个PHP代码,我需要在其中嵌入谷歌地图,以便在将来绘制标记。
因此我尝试获取Google地图的API密钥,并将其放在javascript中的代码中。
但它没有显示任何内容。我该如何解决这个问题。
<?php
/*
Template Name: search info_location
*/
get_header();
?>
<!DOCTYPE html>
<html>
<head>
<title>Custom Markers</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key= AIzaSyBSpBVcEmUnLMXS1wN9Mx8JcOhWvLA0kvY&callback=initMap">
</script>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 400px;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
var map,currentPopup;
function initMap()
{
map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: new google.maps.LatLng(33.888630, 35.495480),
mapTypeId: 'roadmap'
});
}
</script>
</body>
</html>
<?php
get_footer();
?>
答案 0 :(得分:1)
答案 1 :(得分:0)
我解决了wordpress中的问题,如果每个页面的其他页面不同,每个页面都需要有自己的模板。 所以我改变了这一行:
<?php
/*
Template Name: leb_army_sites
*/
get_header();
?>
答案 2 :(得分:0)
<style>
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}
</style>
&#13;
<div id="floating-panel">
<input id="address" type="textbox" value="Sydney, NSW">
<input id="submit" type="button" value="Geocode">
</div>
<div id="map"></div>
&#13;
context.getBean(SomeBean.class)
&#13;