Different icon on multiply custom post( acf+google map )

2 comments

1. There are 2 possible solutions.

   1 – Create categories and set the post with these categories (this is useful to when you has many places in map with the same icon)

   2 – Create a custom field to place the icon

   I will describe both.

   By creating categories you can easily to link many locations with the same icon. I did it once and used the categories images plugin. When in loop, just identify the post category and retrieve image for it, something like:

   for (i = 0; i < locations.length; i++) {
   
       var image = '<?php echo z_taxonomy_image($term_id); ?>';
       // the $term_id is the category from the current post in loop that 
       // you need to retrieve
   
       marker = new google.maps.Marker({
       position: new google.maps.LatLng(locations[i][1], locations[i][2]),
       map: map,
       icon: image,
       animation: google.maps.Animation.BOUNCE,
   });
   

   With the second solution you must to create an Advanced Custom Field for some post/page type, this custom field will be of type: “image”. Set the return to be the image URI, not an object as is the default option. For this example, I suppose that you will create a field named map_icon. In your question I can see you already have a custom field named map_description, for this same ACF configuration just add the image custom field. And to show this image you can do this:

   for (i = 0; i < locations.length; i++) {
   
       var image = '<?php the_field('map_icon', $post_id); ?>';
       // the $post_id is the current post in loop
   
       marker = new google.maps.Marker({
       position: new google.maps.LatLng(locations[i][1], locations[i][2]),
       map: map,
       icon: image,
       animation: google.maps.Animation.BOUNCE,
   });
   

   Has a lot of time since I did this, but looking in some references like ACF and the Categories Images plugin these 2 solutions must to work to you.

2. At least I figure out how to display different icon for one post(Head-quarter – pin) and other for the rest projects. Here is code I used and it work for me. Maybe it will be useful for someone else.

   I am ordering here post from the oldest to the newest and then I am adding prefix + image.png to the oldest post.

   Thank You for Yours posts

   <script src="http://maps.google.com/maps/api/js?sensor=false"
         type="text/javascript"></script>
   <?php
         $args = array(
             'post_type'       => 'projects',
             'posts_per_page'  => -1,
             'order' => 'ASC'
            );
           // query
       $wp_query = new WP_Query( $args );
           $NUM = 0;
   ?>
   <div id="map"></div>
   <script type="text/javascript">
   var locations = [<?php while( $wp_query->have_posts() ){
   $wp_query->the_post();
   $location = get_field('carte_google');?>
   ['<?php the_title(); ?> <br/> <?php  the_field('map_description'); ?>', <?php echo $location['lat']; ?>, <?php echo $location['lng'];?>, <?php $NUM++ ?>],
   

   ];

    var stylowanie = [ { "featureType": "water", "stylers": [ { "visibility": "on" }, { "color": "#46bcec" } ] },{ "featureType": "landscape", "stylers": [ { "color": "#f2f2f2" } ] } ];
   var map = new google.maps.Map(document.getElementById('map'), {
     zoom: Math.ceil(Math.log2($(window).width())) - 8,
     minZoom: Math.ceil(Math.log2($(window).width())) - 8,
     maxZoom: Math.ceil(Math.log2($(window).width())) - 8,
     center: new google.maps.LatLng(45.7830954, 24.0697979),
     mapTypeId: google.maps.MapTypeId.ROADMAP,
     disableDefaultUI: true,
     styles: stylowanie,
   
   });
   
   var infowindow = new google.maps.InfoWindow();
    var iconURLPrefix = 'http://link.to.your.images.folder/images';
   
   var icons = [
     iconURLPrefix + 'image1.png',
     iconURLPrefix + 'image2.png',
   
   
   ]
   var iconsLength = icons.length;
   var marker, i;
   var iconCounter = 0;
   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,
       icon: icons[iconCounter],
       animation: google.maps.Animation.DROP,
   
   
     });
   
     google.maps.event.addListener(marker, 'click', (function(marker, i) {
       return function() {
         infowindow.setContent(locations[i][0]);
         infowindow.open(map, marker);
       }
     })(marker, i));
   
     // We only have a limited number of possible icon colors, so we may have to restart the counter
     if(iconCounter > iconsLength) {
       iconCounter = 0;
     }
     else{
       iconCounter = 1;
     }
   
   }
   

   I hope it will work for You as well

Comments are closed.