How to create multiple image Google Map Marker Array which is not predefined

Question

I am trying to integrate a multiple image marker based on the user "selected" field. For example the user selected Apple and the other user selected Oranges, the map then will display two markers which is orange and the other one is Apple. I am using a wordpress plugin called ACF to handle the field selection and use the code in here http://www.advancedcustomfields.com/resources/field-types/google-map/ to display the google map. I was able to change the the icons although the problem is even i put this condition it is still showing only one image which is set in the first condition "apple".

<?php /** /Template Name: Project */ get_header(); ?>
<?php while ( have_posts() ) : the_post(); ?>
<div class="post_title">
    <?php the_title(); ?>
</div>
<article>
    <?php echo the_content(); ?>

</article>
<?php endwhile; ?>
<!--- Google Map Integration Map -->
<?php if( have_rows( 'project_location') ): ?>
<div class="acf-map">
    <?php while ( have_rows( 'project_location') ) : the_row(); ?>
    <?php 
        $location   =   get_sub_field( 'map_location'); 
        $image  =   get_sub_field( 'project_image'); 
        $sector =   get_sub_field( 'project_sector');

        if ($sector == "health")  {
        ?>
        <script>
        iconIMG = "health_icn.png";
        </script>
        <?php
        }
        elseif ($sector == "solar")  {
        ?>
        <script>
        iconIMG = "solar_icn.png";
        </script>
        <?php
        }
        else 
        { 
        ?>
        <script>
        iconIMG = "water_icn.png";
        </script>
        <?php
        }

        ?>




    <div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>">
        <!-- Bootstrap -->
        <div class="row" style="margin:0;max-width:300px;">
            <div class="col-md-6" style="padding:0;width:33%;">
                <img src="<?php echo $image ?>" style="width:100px;" />



            </div>
            <div class="col-md-6" style="width:67%;"><strong>PROJECT NAME:</strong>
                <br/>
                 <h4 style="font-size: 34px;overflow: hidden;text-transform:uppercase;"><?php the_sub_field('project_name'); ?></h4>

            </div>
            <div style="clear:both;"></div>
            <p>
                <?php the_sub_field( 'project_description'); ?>
            </p>
        </div <!--- End of Bootstrap -->

    </div>
    <?php endwhile; ?>
</div>
<?php endif; ?>
<!------------------------->


<?php get_footer(); ?>

JS file that controls the map

(function ($) {
$.noConflict();
    /*
     *  render_map
     *
     *  This function will render a Google Map onto the selected jQuery element
     *
     *  @type   function
     *  @date   8/11/2013
     *  @since  4.3.0
     *
     *  @param  $el (jQuery element)
     *  @return n/a
     */

    function render_map($el) {

        // var
        var $markers = $el.find('.marker');


        // vars
        var args = {
            zoom: 16,
            center: new google.maps.LatLng(0, 0),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map($el[0], args);


        // add a markers reference
        map.markers = [];

        // add markers
        $markers.each(function () {

            add_marker($(this), map);

        });

        // center map
        center_map(map);

    }

    /*
     *  add_marker
     *
     *  This function will add a marker to the selected Google Map
     *
     *  @type   function
     *  @date   8/11/2013
     *  @since  4.3.0
     *
     *  @param  $marker (jQuery element)
     *  @param  map (Google Map object)
     *  @return n/a
     */

    function add_marker($marker, map) {


        var latlng = new google.maps.LatLng($marker.attr('data-lat'), $marker.attr('data-lng'));
        var icons =  IconURL + iconIMG;


        // create marker
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            icon: icons


        });

        // add to array
        map.markers.push(marker);

        // if marker contains HTML, add it to an infoWindow
        if ($marker.html()) {
            // create info window
            var infowindow = new google.maps.InfoWindow({
                content: $marker.html()
            });

            // show info window when marker is clicked
            google.maps.event.addListener(marker, 'mouseover', function () {

                infowindow.open(map, marker);

            });
             google.maps.event.addListener(marker, 'mouseout', function () {

                infowindow.close(map, marker);

             });

        }

    }

    /*
     *  center_map
     *
     *  This function will center the map, showing all markers attached to this map
     *
     *  @type   function
     *  @date   8/11/2013
     *  @since  4.3.0
     *
     *  @param  map (Google Map object)
     *  @return n/a
     */

    function center_map(map) {

        // vars
        var bounds = new google.maps.LatLngBounds();

        // loop through all markers and create bounds
        $.each(map.markers, function (i, marker) {

            var latlng = new google.maps.LatLng(marker.position.lat(), marker.position.lng());

            bounds.extend(latlng);

        });

        // only 1 marker?
        if (map.markers.length == 1) {
            // set center of map
            map.setCenter(bounds.getCenter());
            map.setZoom(16);
        } else {
            // fit to bounds
            map.fitBounds(bounds);
        }

    }




    /*
     *  document ready
     *
     *  This function will render each map when the document is ready (page has loaded)
     *
     *  @type   function
     *  @date   8/11/2013
     *  @since  5.0.0
     *
     *  @param  n/a
     *  @return n/a
     */

    $(document).ready(function () {

        $('.acf-map').each(function () {

            render_map($(this));

        });

    });

})(jQuery);

How do I display multiple markers with multiple icons based on multiple user selection?

Answer 1

In JavaScript, to check if a condition is true you have to use == instead of =. So, it should be

if (fruitmarker == "apple") {
    icons = "/apple.png";
} else if (fruitmarker == "grapes") {
    icons = "/grapes.png";
} else {
    icons = "/oranges.png";
};

In your code, the first condition is always true:)