So, I'm having a little problem with crossing signals in WordPress between Google Maps' API and an exploded custom field. I want to be able to geocode an address that's been exploded from a custom field, formatted "name,address":
<?php
$trucks = get_post_meta($post->ID, "truck", false);
if ($trucks[0]=="") { ?>
<p>No Trucks Operating Today</p>
<?php } else { ?>
<?php foreach($trucks as $truck) {
$truckdata = explode(',', $truck );
$name = $truckdata[0];
$location = $truckdata[1];
echo $name . ' is located at' . $location .'<br />'; ?>
<?php } ?>
This code will allow me to call each custom field, explode the value into its name and location into a separate value and echo them below.
What I want to do next is map out each value into a Google Map. Here's the code I'm working with:
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() { initialize(); });
function initialize() {
var map_options = {
center: new google.maps.LatLng(33.84659,-84.35686),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var google_map = new google.maps.Map(document.getElementById("map_canvas"), map_options);
var info_window = new google.maps.InfoWindow({
content: 'loading'
});
var t = [];
var x = [];
var y = [];
var h = [];
t.push('Location Name 1');
x.push(33.84659);
y.push(-84.35686);
h.push('<p><strong>Location Name 1</strong><br/>Address 1</p>');
t.push('Location Name 2');
x.push(33.846253);
y.push(-84.362125);
h.push('<p><strong>Location Name 2</strong><br/>Address 2</p>');
var i = 0;
for ( item in t ) {
var m = new google.maps.Marker({
map: google_map,
animation: google.maps.Animation.DROP,
title: t[i],
position: new google.maps.LatLng(x[i],y[i]),
html: h[i]
});
google.maps.event.addListener(m, 'click', function() {
info_window.setContent(this.html);
info_window.open(google_map, this);
});
i++;
}
}
</script>
<div id="map_canvas" style="width:400px;height:400px;">Google Map</div>
This is an example, but the code in question is the t, x, y, and h variables. I know I should be able to grab an address, pop it into a geocoder, and output a location for a marker. My question are:
1) how do I loop through my custom fields to grab the addresses inside of a javascript? Is there a way to grab the array with WP_Query (since it's only grabbing from one post) and use those variables in the javascript file?
2) how do I geocode the addresses and get them into the lat and lon positions in order to grab the correct coordinates for the markers
3) once I have the addresses geocoded, how can I get map markers placed that echo the sentiment below?