Support » Plugins and Hacks » [Plugin Advanced Custom Fields] Display Google map on your theme

  • LeRedac

    (@leredac)


    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>
Viewing 15 replies - 1 through 15 (of 30 total)
  • joshuaiz

    (@joshuaiz)

    This really helped – much clearer than the ACF docs.

    Thank you SO SO much for sharing this!

    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!

    Thank you. ACF Docs could use this!

    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.]

    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>';

    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.

    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!

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

    Thanks! 🙂

    You guys are more than welcome!

    Hey,

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

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

    txs

    Thank you so much 🙂

    Bacon saved – thanks!!

    Ok this exemple if you whant display on a wordpress page, a Google Maps whith Multiple Markers (working whith WordPress 4.0 )

    This is my method, not sur it’s the best ! Trie.

    Is working if you make a custom post type like “Map” and add custom field google map white ACF

    1- Make a new templates page >> Exemple PAGE name >> MAP in your theme >> page-map.php
    2 – Create a new page in WordPress dashboard >> Exemple >> MAP
    3- d’ont forget put on your header google map script

    <script src="http://maps.google.com/maps/api/js?sensor=false"
              type="text/javascript"></script>

    4 – Choice your template page >> MAP
    5 – Publish your page and see result

    This is exemple off MAP page (put your <div> inside)

    <?php
    /*
    Template Name: MAP
    */
    get_header();
    ?>
    <h1><?php the_title(); ?></h1>
    
    <section>
    
    <?php
      $args = array(
    	  'post_type'		=> 'YOUR_CUSTOM_POST_TYPE',
    	  'posts_per_page'	=> -1
      );
    // query
    $wp_query = new WP_Query( $args );
    $NUM = 0;
    ?>
    
      <div id="map" style="width: 500px; height: 400px;"></div>
    
    <script type="text/javascript">
        var locations = [<?php while( $wp_query->have_posts() ){
    	$wp_query->the_post();
        $location = get_field('carte_google'); // IMPORTANT << Change this for your Google map field name !!!!!!
    ?>
    
    ['<?php the_title(); ?>', <?php echo $location['lat']; ?>, <?php echo $location['lng'];?>, <?php $NUM++ ?>],
       <?php } ?> ];
    
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 9, /*Here you change zoom for your map*/
          center: new google.maps.LatLng(-21.1, 55.6), /*Here you change center map first location*/
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });
    
        var infowindow = new google.maps.InfoWindow();
    
        var marker, i;
    
        for (i = 0; i < locations.length; i++) {
          marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map
          });
    
          google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
              infowindow.setContent(locations[i][0]);
              infowindow.open(map, marker);
            }
          })(marker, i));
        }
     </script>
    </section>
    <?php get_footer(); ?>
Viewing 15 replies - 1 through 15 (of 30 total)
  • The topic ‘[Plugin Advanced Custom Fields] Display Google map on your theme’ is closed to new replies.