Геокодирование Карты Google в Wordpress не работает

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, 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, 4 декабря, Using Address Instead Of Longitude And Latitude With Google Maps API

Что я делаю неправильно или не вижу?

EDIT: изменяет карту на карту-холст в getElementByID, но все равно не работает.

EDIT 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>