Support » Plugin: Carbon Fields » How can I do map in carbon fields?

  • Resolved vitaminnnka

    (@vitaminnnka)


    Hi! I need do a map in my site. link screenshot I see coordinate. I need a map. How its do? I dont see that in official documentation. I consequence like this <div class="map" id="map" style="height: 480px; width: 100%"><?php echo $map_data;?> </div>

    • This topic was modified 2 years, 7 months ago by vitaminnnka.

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author htmlBurger

    (@htmlburger)

    Hi @vitaminnnka,

    The $map_data variable contains the latitude and longitude that you’ve set in the administration area. In order to display a Google Map with these coordinates, you will have to use JavaScript to manually initialize the map.

    Here is an example code:

    <div class="map" id="map" style="height: 480px; width: 100%" data-lat="<?php echo $map_data['lat']; ?>" data-lng="<?php echo $map_data['lng']; ?>" data-zoom="<?php echo $map_data['zoom']; ?>"></div>

    In functions.php load the Google Maps API:

    add_action( 'wp_enqueue_script', 'crb_enqueue_scripts' );
    function crb_enqueue_scripts() {
    	$google_maps_api_key = ''; // get from https://developers.google.com/maps/documentation/javascript/get-api-key
    
    	wp_enqueue_script( 'google-maps-api', '//maps.googleapis.com/maps/api/js?key=' . $google_maps_api_key );
    	wp_enqueue_script( 'theme-scripts', get_stylesheet_directory_uri() . '/js/functions.js' );
    }

    And lastly in js/functions.js:

    ;(function ($, document, window, undefined) {
    
    	$(document).ready(function () {
    		var $map = $('#map');
    		var lat = $map.data('lat');
    		var lng = $map.data('lng');
    		var zoom = $map.data('zoom');
    
    		var center = { lat: lat, lng: lng };
    		var mapOptions = { zoom: zoom, center: center };
    
    		var map = new google.maps.Map( $map[0], mapOptions );
    
    		new google.maps.Marker({
    			map: map,
    			position: center,
    		})
    	});
    })(jQuery, document, window);

    Hope this helps!

    Let me know if you need more details 🙂

    • This reply was modified 2 years, 7 months ago by htmlBurger.
    Thread Starter vitaminnnka

    (@vitaminnnka)

    Thank you for your answer. But doesnt work not show map. And not show errors

    Plugin Author htmlBurger

    (@htmlburger)

    Hi @vitaminnnka,

    Can you send me the code which you are using to register the Map Field in the administration area?

    Thread Starter vitaminnnka

    (@vitaminnnka)

    add_action( 'carbon_map_api_key', 'crb_get_gmaps_api_key' );
    function crb_get_gmaps_api_key( $current_key ) {
        return 'AIzaSyDaQCaJqTVcDEs7-WO0Zo9NR-fDtOu5ncQ';
    }
    add_action( 'wp_enqueue_script', 'crb_enqueue_scripts' );
    function crb_enqueue_scripts() {
        $google_maps_api_key = ''; // get from https://developers.google.com/maps/documentation/javascript/get-api-key
    
        wp_enqueue_script( 'google-maps-api', '//maps.googleapis.com/maps/api/js?key=' . $google_maps_api_key );
        wp_enqueue_script( 'theme-scripts', get_stylesheet_directory_uri() . '/js/functions.js' );
    }

    This code from functions.php
    This code add field on page administration area `Field::make(“map”, “crb_company_location”, “Местоположение”)
    ->help_text(‘Перетащите указатель на карту, чтобы выбрать местоположение’)`
    This code on page where we enter map $map_data = carbon_get_post_meta($post->ID, 'crb_company_location', 'map');
    That code? Im write?

    • This reply was modified 2 years, 7 months ago by vitaminnnka.
    • This reply was modified 2 years, 7 months ago by vitaminnnka.
    Plugin Author htmlBurger

    (@htmlburger)

    Instead of add_action( 'carbon_map_api_key', 'crb_get_gmaps_api_key' ); you should be using add_filter( 'carbon_map_api_key', 'crb_get_gmaps_api_key' );.

    In addition, change $google_maps_api_key = ''; to $google_maps_api_key = crb_get_gmaps_api_key();

    The rest seems OK.

    Can you write <?php var_dump( $post ); var_dump( $map_data ); exit; ?> in the template and paste the result here? This way I can check if the correct values are being returned from carbon_get_post_meta() 🙂

    Thread Starter vitaminnnka

    (@vitaminnnka)

    Screenshot I see that If use var_dump

    Plugin Author htmlBurger

    (@htmlburger)

    Hi @vitaminnnka,

    The data in the screenshot looks OK as well.

    Can you try adding wp_enqueue_script( 'jquery' ) in the crb_enqueue_scripts() function?

    If this doesn’t solve the issue, can you share the code with us with a read-only access to the repository or by sending it to us on info@htmlburger.com so we can try to reproduce the issue locally?

    Thread Starter vitaminnnka

    (@vitaminnnka)

    I write on email

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘How can I do map in carbon fields?’ is closed to new replies.