Displaying locations on front end

Update: having spent all day on this without fixing it, I have a simple question: How do I get the latitude and longitude out from the array field so that Google Maps can display it?

For example, I have been using this to retrieve the values from fields:
simple_fields_get_post_value(get_the_id(), array(1, 12), true);

But in this case I need to separate the lat and lng values contained within the single field.

I think you can do something like this:

$field_slug = "simple-fields-field-googlemaps";
$location = simple_fields_value($field_slug);
$lat = $location["lat"];
$lng = $location["lng"];

Thanks P?r,

However, that doesn’t work. I just tested it without the map with your suggestion on another page and I cannot even get it to echo any of the content contained within that field.

Eg

$field_slug = "simple-fields-field-googlemaps";
$location = simple_fields_value($field_slug);
$lat = $location["lat"];
$lng = $location["lng"];

echo $lat;

I’ve searched through the documentation, but can’t find anything that tells me how to output the googlemap field, let alone display the locations on a map. Have I missed something?

Quick update: Based on your suggestion, I’ve used the following to get the latitude and longitude to echo:

$location = simple_fields_get_post_value(get_the_id(), array(1, 12), true);
$lat = $location["lat"];
$lng = $location["lng"]; 

echo "LAT:". $lat; echo "LONG:". $lng;

Where 1 is the field group number and 12 is the number of the googlemap field.

Now to get it to display on the map… Will report back!

I’m afraid I’m giving up. The code I have ended up with, which doesn’t work, is:

In my template header:

define('GOOGLE_MAPS_V3_API_KEY', 'MY API KEY HERE');

add_action('wp_enqueue_scripts', 'so_exhibitions_map_scripts');
function so_exhibitions_map_scripts() {
    wp_register_script('googlemaps', 'https://maps.googleapis.com/maps/api/js?hl=en&key=' . GOOGLE_MAPS_V3_API_KEY . '&sensor=false', false, '3');
    wp_enqueue_script('googlemaps');

    wp_register_script( 'so.maps', get_bloginfo('stylesheet_directory') . "/js/so.maps.js", array('jquery', 'googlemaps'), false, false );
    wp_enqueue_script('so.maps');

  $locations = array();

    $location_query = new WP_Query( array(
        'meta_key' => '_simple_fields_fieldGroupID_1_fieldID_12_numInSet_0',
        'posts_per_page' => -1
    ) );

    while ( $location_query->have_posts() ) {
        $location_query->the_post();
				 $key = simple_fields_get_post_value(get_the_id(), array(1, 12), true);
  				$lat = $key["lat"];
				$lng = $key["lng"];
        $locations[] = array(
            'title' => get_the_title(),
            'latitude' => $lat,
            'longitude' => $lng,
            'id' => get_the_ID()
        );
    }

    wp_reset_postdata();

    wp_localize_script('so.maps', 'php_args', array(
        'locations' => json_encode($locations)
    ));
}

get_header();

In the template body:
<div id="map_canvas"></div>

In another file called so.maps.js:

(function($) {
    function initialise_map() {
        var locations_str = php_args.locations.replace(/"/g, '"');
        var locations = $.parseJSON(locations_str);

        var latlng = new google.maps.LatLng(MY DEFAULT LAT, LNG);
                var myOptions = {
            zoom: 10,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    }

    function addMarker(locations, map) {
        var locationLatLng = new google.maps.LatLng(locations.latitude,locations.longitude);
        bounds.extend(locationLatLng);
        var marker = new google.maps.Marker({
            position: locationLatLng,
            map: map,
            title:locations.title
        });
    }

    $(function() {
        initialise_map();
    });

})(jQuery);

Any ideas?