Home/ Questions/Q 8644555
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T12:19:22+00:00

I’m trying to use meta data to get a postcode, so something like: $property->add_meta_box(

  • 0

I’m trying to use meta data to get a postcode, so something like:

$property->add_meta_box( 
    'Property Info', 
    array(
        array(
              'name'        => 'postcode',
              'label'       => 'Postcode',
              'type'        => 'text',
        );
     )
);

to create a meta box on every post type – property. How do I use this postcode to get a google map to generate on a page dynamically, IF the property has a postcode?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’ll show how I did it but this was a year ago and there is perhaps a more updated, modern answer based on updates to Google Maps / Geocoding. Geocoding being the term for the process of converting a postcode to a Latitude/Longitude. This code was all in my single.php as I was using it to display the map on individual posts, you could do things differently depending on how you’ve set it up.

    I had originally used Yahoo Maps API to geocode a postcode and then use Google Maps for the map as Google Map’s geocoding was woefully inaccurate. Yahoo turned their service off, so I changed it to the Google Local Search version of geocoding which was more accurate at the time than Google Maps (this was last year, 2011).

    Firs of all make sure you include the scripts to the map API in your <head>

    https://developers.google.com/maps/documentation/javascript/tutorial#api_key

    and 

    <body onload="initialize()" onunload="GUnload()">

    In your template you access your custom option (assuming it has an id of postcode) like;

    <?php $postcode = get_post_meta($post->ID, 'postcode', true); ?>

    And then use the following Javscript to geocode the address and generate your map (in #map_canvas).

    Here’s the JS;

    <script type="text/javascript">
var localSearch;
var map;
var icon;
var addressMarkerOptions;
google.load("search", "1");
google.load("maps", "2");
google.setOnLoadCallback(initialize);

function initialize()
{

    localSearch = new GlocalSearch();
    icon = new GIcon(G_DEFAULT_ICON);
    addressMarkerOptions = { icon:icon , draggable: false};

    map = new GMap2(document.getElementById("map_canvas"));
    map.addControl(new GSmallZoomControl3D ());
    var mapControl = new GMapTypeControl();
    plotAddress("<?php echo $postcode ?>");

}

/**
* This takes either a postcode or an address string
*
*/
function plotAddress(address)
{
  localSearch.setSearchCompleteCallback(null, 
function() {

  if (localSearch.results[0])
     {     
    var resultLat = localSearch.results[0].lat;
    var resultLng = localSearch.results[0].lng;
    var point = new GLatLng(resultLat,resultLng);
    var marker = new GMarker(point, addressMarkerOptions);
    map.setCenter(point, 15, G_HYBRID_MAP);
   }
});

localSearch.execute(address + ", UK");
}
</script>

    The HTML is as follows;

    <div id="streetview">
    <div id="map_canvas" style="width: 250px; height: 250px"></div>
</div>
    • 0