在 Wordpress 中对 Google 地图进行地理编码不起作用

Question

我想使用 Wordpress 帖子的标题（位置）成为 Google 地图上的可见标记。来自 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

Answer 1

工作示例.........http://jsfiddle.net/vezkvkve/1/

html:

<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>


<input type="text" id="mapaddress" />
<input type="submit" id="change" onclick="changeMap()">
<div id="map" style="width: 413px; height: 300px;"></div>

javascript

<script type="text/javascript">
    function changeMap(){

        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';
        var address= document.getElementById("mapaddress").value;

        if(!address) {
            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"), mapOptions);

        return false;
    }
</script>