Geocoding Google Maps in Wordpress not working

Question

I want to use the title of a Wordpress post (a location) to become a visible marker on a Google map. This code from Google works fine to show a map (without marker):

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

However, when I try to implement the geocoding part the map doesn't show. The two solutions I've tried:

Solution 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, March 17, http://manofhustle.com/2012/03/17/google-map-geocoding/

Solution 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, December 4, Using Address Instead Of Longitude And Latitude With Google Maps API

What am I doing wrong or not seeing?

EDIT: changes map to map-canvas in getElementByID, but still doesn't work.

EDIT 2: through an iframe it works (but you can't move in the map, only scroll)

<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

score 0 · Answer 1 · answered Feb 09 '15 at 02:18

working example.........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>

I think I should've explained the "post title"; that's a Wordpress post title, not entering the address in a field ;). Your solution also doesn't work for me. No map by default, and when I enter the details, the map turns blue for a moment before reloading the page and showing nothing. At least thanks for trying to solve it! — Sven Uilhoorn, Feb 09 '15 at 13:06
if the page reloads, you have a error in your js before `return false`. Its not defined to run a map by default, you can call changemap() on doucment ready to do this. Btw jQuery is loaded by default on wp admin pages, so you might as well make use of it, you can replace `return false` with event.preventDefault() etc. The id of the title slot is "title" so you can use jQuery(document).on('change','#title' ....etc) to call the function above. — David, Feb 09 '15 at 15:00

Geocoding Google Maps in Wordpress not working

1 Answers1