Google map on header with all my companies

You can use a shortcode: `[wpuf-meta name=”meta_key_name” type=”map”]` or the function `wpuf_shortcode_map( ‘meta_key’, $post->ID );`

In fact, I need 1 maps, with all the companies … Is it doing the trick :s ?

Ok I have figured it out… But I need to get only the lat value and the lng value of the google map field… How could I do that ?

Sorry, I thought you just needed the map for one post. In that case, you need to get all posts and fetch the custom field. Lat and long are saved in the same custom field, separated by a comma. Using `explode( ‘,’, $value )` will give you array of lat and long.

Thanks Tareq,

With a mix of this post and what you told me, I was able to achieve my goal 🙂 !

Thanks !

Hello @noomia,

If possible please share your solution with us 🙂 ?

Cheers.

Hi !

So, according to this post and what Tareq told me, here is what I did :

First of all, put the following html code where you want to have your Google Map (I choose the header.php file) :
`

`

Then, you need to create a .js file that will initialize the google maps. Let’s call it 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(48.856667, 2.350833);
var myOptions = {
zoom: 2,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

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

var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < locations.length; i++) { addMarker(locations[i], map, bounds); } if (locations.length > 1) {
map.fitBounds(bounds);
}
}

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

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

})(jQuery);
`
The `getElementById(“map_canvas”)` part refers to the `

` which will contains the Google Map.

Now, this is the important part. In your function.php file, put these lines of code :
`
/**
* Google Map
*
*/
define(‘GOOGLE_MAPS_V3_API_KEY’, ‘XXXXXXXXXXXX’);

add_action(‘wp_enqueue_scripts’, ‘companies_map_scripts’);

function companies_map_scripts() {
wp_register_script(‘googlemaps’, ‘http://maps.googleapis.com/maps/api/js?hl=en&key=&#8217; . GOOGLE_MAPS_V3_API_KEY . ‘&sensor=false’, false, ‘3’);
wp_enqueue_script(‘googlemaps’);

wp_register_script( ‘maps’, get_bloginfo(‘stylesheet_directory’) . “/js/maps.js”, array(‘jquery’, ‘googlemaps’), false, false );
wp_enqueue_script(‘maps’);

$locations = array();

$location_query = new WP_Query( array(
‘post_type’ => ‘companies’,
‘posts_per_page’ => -1
) );

while ( $location_query->have_posts() ) {
$location_query->the_post();

$address = get_post_meta( get_the_ID(), ‘address’, true );
list( $def_lat, $def_long ) = explode( ‘,’, $address );

$locations[] = array(
‘title’ => get_the_title(),
‘latitude’ => $def_lat,
‘longitude’ => $def_long,
‘id’ => get_the_ID()
);
}

wp_reset_postdata();

wp_localize_script(‘maps’, ‘php_args’, array(
‘locations’ => json_encode($locations)
));
}
`

You have to change :

– `XXXXXXXXXXXX` : change it with your Google API Key.
– `wp_register_script( ‘maps’, get_bloginfo(‘stylesheet_directory’) . “/js/maps.js”, array(‘jquery’, ‘googlemaps’), false, false );` and `wp_enqueue_script(‘maps’);` : if you have called the script maps.js with an other name, change it there too.
– `’post_type’ => ‘companies’` : Put your custom post type name here.
– `$address = get_post_meta( get_the_ID(), ‘address’, true );` : Change address by the name of your google map field in your custom post type.

Finally, add these lines to your style.css :
`
/* =Maps
———————————————– */
#map_canvas {
width: 100%;
height: 452px;
}
`