I am trying to get different markers on Google Maps for different Categories in WordPress. I can able to get all the markers on the map, but cannot able to achieve it. Hoping to get a solution from here. Thanks for all your help.
What I want exactly is, I want to show Blue color Google marker if custom field is empty, and I want to show Green color if custom field is not empty.
This is my Custom field, $order_online_link = rwmb_meta( 'mt_order' );
Here is all my code,
<!-- Content -->
<div id="content">
<?php
// if (!empty($location)):
?>
<div class="whole-area">
<div id="map_wrapper" class="col-sm-10 map-mainportion">
<button class="btn btn-default btn-xs mapreset" onclick="mapCentered()"><i class="f fa-reload"></i> Reset</button>
<div id="map_canvas" class="mapping"></div>
</div>
<div class="col-sm-2 map-sidebar">
<!-- Start For Category and Sub Category List -->
<?php
$term_args = array(
'exclude' => array(251,252,253,254,255,257,258,259,260,261,262,267,295,298,263,264,265),
);
$city_group_terms = get_terms('category', $term_args);
$cp=0;
foreach ($city_group_terms as $city_group_term) {
$city_group_query = new WP_Query(array(
'post_type' => 'post',
'posts_per_page' => -1,
'orderby' => array( 'title' => 'ASC'),
'tax_query' => array(
array(
'taxonomy' => 'category',
'field' => 'slug',
'terms' => array($city_group_term->slug),
'operator' => 'IN'
)
)
));
?>
<button class="accordion city-based"><span class="city-title"><?php echo $city_group_term->name; ?></span></button>
<ul class="panel">
<?php
if ($city_group_query->have_posts()) : while ($city_group_query->have_posts()) : $city_group_query->the_post(); ?>
<?php
$loc_title = get_the_title();
$location = get_field('google_map_lat_long');
$order_online_link = rwmb_meta( 'mt_order' );
if($order_online_link =='' || $order_online_link =='#'):
$mapicon= get_template_directory_uri().'/images/red-icon.png';
else:
$mapicon= get_template_directory_uri().'/images/blue-icon.png';
endif;
$sl_select_obj[] = array("lat" => $location['lat'],
"long" => $location['lng'],
"address" => $loc_title,
"orderlinky" => $order_online_link,
"mapicon"=>$mapicon
);
//$mpins[]=$cp;
$add_site = get_field('company_website');
$loc_permalink = get_permalink();
$order_online_link = rwmb_meta( 'mt_order' );
$locations_data[] = array("site" => $add_site, "loctitle" => $loc_title, "locpermalink" => $loc_permalink, "orderonlinelink" => $order_online_link);
?>
<li class="map-list-titles"><a href="javascript:ZoomAndCenter(<?php echo $location['lat']; ?>, <?php echo $location['lng'];?>, <?php echo $cp ?>)" ><?php echo the_title(); ?></a></li>
<?php
$cp++;
endwhile;
endif;
?>
</ul>
<?php
// Reset things, for good measure
$city_group_query = null;
wp_reset_postdata();
}
?>
<!-- End For Category and Sub Category List -->
</div>
</div>
<?php
//endif;
?>
</div>
Here is my javascript,
<script>
jQuery(function ($) {
// Asynchronously Load the map API
var script = document.createElement('script');
script.src = "//maps.googleapis.com/maps/api/js?key=AIzaSyA157quXbUlHHgm4wJJxzD49MivKgPSil8&sensor=false&callback=initialize";
document.body.appendChild(script);
});
var map;
var gmarkers=[];
function initialize() {
locations = <?php echo json_encode($sl_select_obj) ?>;
markerdata = JSON.parse('<?php echo json_encode($locations_data) ?>');
// var map;
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
//center: new google.maps.LatLng(51.5287718, -0.2416803),
mapTypeId: 'roadmap'
};
// Display a map on the page
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
map.setTilt(45);
// Multiple Markers''
// $info='';
var markers = locations;
<?php
$total = count($locations_data);
$markerinfo = '';
$c = 0;
foreach ($locations_data as $key => $info):
if ($c != $total):
$markerinfo .="['<div class=\"info_content\"><h2>" . $info['loctitle'] . "</h2><h3><a href=" . $info['site'] . ">" . $info['site'] . "</a></h3><h4><a href=" . $info['orderonlinelink'] . ">Order Online</a></h4><h4><a href=" . $info['locpermalink'] . ">View Full Office Details</a></h4></div>'],";
else:
$markerinfo .="['<div class=\"info_content\"><h2>" . $info['loctitle'] . "</h2><h3><a href=" . $info['site'] . ">" . $info['site'] . "</a></h3><h4><a href=" . $info['locpermalink'] . ">View Full Office Details</a></h4></div>']";
endif;
$c++;
endforeach;
?>
// Info Window Content
var infoWindowContent = [<?php echo $markerinfo; ?>]; //markerdata;
// Display multiple markers on a map
var infoWindow = new google.maps.InfoWindow(), marker, i;
// Loop through our array of markers & place each one on the map
for (i = 0; i < markers.length; i++) {
var position = new google.maps.LatLng(markers[i]["lat"], markers[i]["long"]);
var map_center_position = new google.maps.LatLng(34.0059657 ,-118.4440441);
bounds.extend(map_center_position);
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i]["address"],
icon: '<?php bloginfo('template_directory'); ?>/images/venue-direct-icon.png'
});
gmarkers.push(marker);
// Allow each marker to have an info window
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, marker);
}
})(marker, i));
google.maps.event.addListener(map, "click", function () {
infoWindow.close();
});
// Automatically center the map fitting all markers on the screen
map.fitBounds(bounds);
}
// Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function (event) {
this.setZoom(10);
google.maps.event.removeListener(boundsListener);
});
// map.fitBounds(markerBounds);
}
function ZoomAndCenter(lat,long,markerid) {
// map.setCenter(new google.maps.LatLng(lat, long));
//map.setZoom(13);
var latLng=new google.maps.LatLng(lat, long);
map.panTo(latLng);
google.maps.event.trigger(gmarkers[markerid],'click');
}
function mapCentered()
{
map.setCenter(new google.maps.LatLng(34.0059657 ,-118.4440441));
map.setZoom(10);
}
//Accordationscript
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function () {
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
}
}
