Home Forums Plugin Support WP User Frontend Pro Google map on header with all my companies

This topic is: resolved

This topic contains 7 replies, has 3 voices, and was last updated by  noomia 6 years, 1 month ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #2464

    Post count: 115

    Hi guys !

    I'm trying to create something similar to this theme right now :Β http://preview.ait-themes.com/directory/wp1/

    I have a custom post type wich is called “companies”. The company creation is allowed on the front end and have a google map field. What I want is show a google map on the header of my site wich show all the companies thanks to the address users entered on the company front end form.

    Thanks a lot πŸ™‚ !


    Tareq Hasan
    Post count: 2831

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


    Post count: 115

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


    Post count: 115

    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 ?


    Tareq Hasan
    Post count: 2831

    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.


    Post count: 115

    Thanks Tareq,

    With a mix of this postΒ and what you told me, I was able to achieve my goal πŸ™‚ !

    Thanks !


    Post count: 1555

    Hello @noomia,

    If possible please share your solution with us πŸ™‚ ?



    Post count: 115

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

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

    $(function() {

    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

    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=' . GOOGLE_MAPS_V3_API_KEY . ‘&sensor=false', false, ‘3');

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

    $locations = array();

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

    while ( $location_query->have_posts() ) {

    $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_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;

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘Google map on header with all my companies’ is closed to new replies.