-1
我想使用Wordpress帖子(位置)的標題在Google地圖上成爲可見標記。這從谷歌代碼工作正常顯示的地圖(不帶標識):在Wordpress中對Google地圖進行地理編碼不起作用
<script>function initialize() {
var mapCanvas = document.getElementById('map-canvas');
var mapOptions = {
center: new google.maps.LatLng(44.5403, -78.5463),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions)
}
google.maps.event.addDomListener(window, 'load', initialize);</script>
然而,當我嘗試實施地理編碼部分的地圖不顯示。這兩種方案我已經試過:
解決方案1
<script type="text/javascript">// <![CDATA[
var mapOptions = {
zoom: 16,
center: new google.maps.LatLng(54.00, -3.00),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var geocoder = new google.maps.Geocoder();
var address = '3410 Taft Blvd Wichita Falls, TX 76308';
geocoder.geocode({ 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
// ]]></script>
2012年3月17日,http://manofhustle.com/2012/03/17/google-map-geocoding/
解決方案2:
var geocoder;
var map;
var address = "San Diego, CA";
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
if (geocoder) {
geocoder.geocode({
'address': address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
map.setCenter(results[0].geometry.location);
var infowindow = new google.maps.InfoWindow({
content: '<b>' + address + '</b>',
size: new google.maps.Size(150, 50)
});
var marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
title: address
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
} else {
alert("No results found");
}
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
2014年12月4日, Using Address Instead Of Longitude And Latitude With Google Maps API
我在做什麼錯誤或沒有看到?
編輯:將地圖更改爲getElementByID中的地圖畫布,但仍不起作用。
編輯2:通過iframe它的工作原理(但你可以在地圖上不動,只滾動)
<iframe width="195" height="195" frameborder="0" scrolling="yes" marginheight="0" marginwidth="0" src="https://maps.google.ca/maps?center=<?php the_title('Groningen'); ?>&q=<?php the_title('Groningen'); ?>&size=195x195&output=embed&iwloc=near"></iframe>enter code here
我想我應該解釋一下「帖子標題」;這是一個WordPress的帖子標題,沒有在字段中輸入地址;)。您的解決方案也不適合我。默認情況下沒有地圖,當我輸入詳細信息時,地圖會在重新加載頁面並顯示任何內容之前變成藍色。至少謝謝你試圖解決它! – 2015-02-09 13:06:36
如果頁面重新加載,您在返回false之前在js中有錯誤。它沒有被定義爲默認運行一個映射,你可以調用changemap()來做到這一點。順便說一句,jQuery默認加載到wp管理頁面,所以你不妨使用它,你可以用event.preventDefault()等替換'return false'。標題欄的id是「title」,所以你可以使用jQuery(document).on('change','#title'....等)調用上面的函數。 – David 2015-02-09 15:00:34