我无法在Squarespace网站上显示地图。自动填充功能正常,但地图未显示。
这是我的代码:
<form>
<input id="geocomplete" type="text" placeholder="Enter Your Address" size="90" />
<input id="find" type="button" value="Next" />
</form>
<div class="map_canvas" style="position: relative; overflow: hidden; transform: translateZ(0px); background-color: rgb(229, 227, 223);"></div>
<pre id="logger">Log:</pre>
<script src="http://maps.googleapis.com/maps/api/js?sensor=true&libraries=places"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="/scripts/jquery.geocomplete.js"></script>
<script src="/scripts/logger.js"></script>
<script>
$(function(){
var options = {
map: ".map_canvas"
};
$("#geocomplete").geocomplete(options)
.bind("geocode:result", function(event, result){
$.log("Result: " + result.formatted_address);
})
.bind("geocode:error", function(event, status){
$.log("ERROR: " + status);
})
.bind("geocode:multiple", function(event, results){
$.log("Multiple: " + results.length + " results found");
});
$("#find").click(function(){
$("#geocomplete").trigger("geocode");
});
$("#examples a").click(function(){
$("#geocomplete").val($(this).text()).trigger("geocode");
return false;
});
});
</script>
以下是header.php中加载的脚本:
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&libraries=places"></script>