WordPress.org

Ready to get started?Download WordPress

Forums

[Plugin Advanced Custom Fields] Display Google map on your theme (14 posts)

  1. LeRedac
    Member
    Posted 6 months ago #

    Hi there,

    maybe this code is help you for display a Google map from field google map in Advanced Custom Fields plugin.

    Peut être ce bout de code pourra vous être utile pour afficher dans votre thème, la carte google généré via le champs "Google map" du plugin Advanced Custom Fields

    Working whith WordPress 3.8.1

    <div id="view1">
    <?php
    $location = get_field('carte_google');
    if( ! empty($location) ):
    ?>
    <div id="map" style="width: 100%; height: 350px;"></div>
    <script src='http://maps.googleapis.com/maps/api/js?sensor=false' type='text/javascript'></script>
    
    <script type="text/javascript">
      //<![CDATA[
    	function load() {
    	var lat = <?php echo $location['lat']; ?>;
    	var lng = <?php echo $location['lng']; ?>;
    // coordinates to latLng
    	var latlng = new google.maps.LatLng(lat, lng);
    // map Options
    	var myOptions = {
    	zoom: 9,
    	center: latlng,
    	mapTypeId: google.maps.MapTypeId.ROADMAP
       };
    //draw a map
    	var map = new google.maps.Map(document.getElementById("map"), myOptions);
    	var marker = new google.maps.Marker({
    	position: map.getCenter(),
    	map: map
       });
    }
    // call the function
       load();
    //]]>
    </script>
    <?php endif; ?> 
    
    </div>
  2. joshuaiz
    Member
    Posted 6 months ago #

    This really helped - much clearer than the ACF docs.

  3. orangesandlime
    Member
    Posted 5 months ago #

    Thank you SO SO much for sharing this!

  4. lakmar
    Member
    Posted 5 months ago #

    Dear LeRedac

    THANK YOU so much for the help. I am setting up an easy backend to add events via post(Event Category) and with 2 ACF fields.. Event endDate and Map..

    As long as event enddate is less than today's date, i display the event.

    Wanted the map to be displayed on home page as well, and struggled. In my test code, i got an output of "array" for the map field.. Went to ACF site and got completely lost.

    Your code above allowed me to display a map! I am SO excited..

    Merci Beaucoup!

  5. joshmaxrubinstein
    Member
    Posted 4 months ago #

    Thank you. ACF Docs could use this!

  6. jamesfirass
    Member
    Posted 4 months ago #

    Dear LeRedac,
    I am a PHP developer, somewhat new to WP. I tried your code, spiced it up with an if statement to see why it won't show the map. The field name is: "laama_map".
    I don't know where i have got it wrong, but it always executes the else part of the if statement. Thanks for your help in advance!

    Here is my code:

    get_header();
    $postReceivedID='36';
    $foundPost=get_post($postReceivedID);
    global  $foundPost;
    echo  $foundPost->post_title;
    echo   $foundPost->post_content;
    echo   $foundPost->the_date;
    /* $location = get_field('laama_map'); */
    ?>
    <div id="view1" style="background-color:red; height:600px; width:700px; margin-left:300px;">
    <?php
    $location = get_field('laama_map');
    if( ! empty($location) ){
    ?>
    <div id="map" style="width: 100%; height: 350px;"></div>
    <script src='http://maps.googleapis.com/maps/api/js?sensor=false' type='text/javascript'></script>
    
    <script type="text/javascript">
      //<![CDATA[
    	function load() {
    	var lat = <?php echo $location['lat']; ?>;
    	var lng = <?php echo $location['lng']; ?>;
    // coordinates to latLng
    	var latlng = new google.maps.LatLng(lat, lng);
    // map Options
    	var myOptions = {
    	zoom: 9,
    	center: latlng,
    	mapTypeId: google.maps.MapTypeId.ROADMAP
       };
    //draw a map
    	var map = new google.maps.Map(document.getElementById("map"), myOptions);
    	var marker = new google.maps.Marker({
    	position: map.getCenter(),
    	map: map
       });
    }
    // call the function
       load();
    //]]>
    </script>
    <?php
    }
    else { echo "map not found"; }
    ?> 
    
    </div>
    <?php
    
    //Display the footer
    get_footer();
    ?>

    [Moderator Note: Please post code or markup between backticks or use the code button. Or better still - use a pastebin. Your posted code may now have been permanently damaged by the forum's parser.]

  7. LeRedac
    Member
    Posted 4 months ago #

    Hi James,

    are you sure the value get_field('laama_map'); is not empty ?

    Try this code for testing return value :

    echo '<pre>';
        print_r( get_field('laama_map')  );
    echo '</pre>';
  8. Extelliqent
    Member
    Posted 3 months ago #

    The code works perfect. I'd like to know if there is a way to make it so when you click the marker it opens up options like directions.

  9. JuNky3
    Member
    Posted 2 months ago #

    Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks! Thanks!

  10. mrwd
    Member
    Posted 2 months ago #

    Thank you so much to LeRedac & jamesfirass!
    And +1 to joshmaxrubinstein (I don't why ACF documentation is not using this code example).

  11. S_N_E_J_K_A
    Member
    Posted 1 month ago #

    Thanks! :)

  12. jamesfirass
    Member
    Posted 1 month ago #

    You guys are more than welcome!

  13. helln06
    Member
    Posted 3 weeks ago #

    Hey,

    thank you so much for this code... So helpfull !!

    Maybe you know how I could display multiple markers on a single map ?

    txs

  14. vijayrajesh
    Member
    Posted 1 week ago #

    Thank you so much :)

Reply

You must log in to post.

About this Topic

Tags