Wordpress中的谷歌地图地理编码不起作用

我想使用Wordpress帖子的标题（一个位置）来成为谷歌地图上的可见标记。谷歌的这段代码可以很好地显示地图（没有标记）：

<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日，使用地址代替经纬度与谷歌地图API

我做错了什么或者没看到什么？

EDIT：在getElementByID中将map更改为map画布，但仍然不起作用。

编辑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