Hey there @jonathan, I am going to hit you up for a bit more help, all along the same lines with the multiple marker images. I was hoping to have a select field to designate the image for the marker. So instead of having an image field to replace that with the select field and have pre allocated images allocated for the selections. Is this possible?
This is what I have currently:
<?php if( have_rows(‘locations’) ): ?>
<div class=”locations-map”>
<?php while ( have_rows(‘locations’) ) : the_row();
$location = get_sub_field(‘location’);
$image = get_sub_field(‘marker_image’);
?>
<div class=”marker” data-lat=”<?php echo $location[‘lat’]; ?>” data-lng=”<?php echo $location[‘lng’]; ?>” data-icon=”<?php echo $image[‘url’]; ?>”>
<div class=”shop”>
<h4><?php the_sub_field(‘title’); ?></h4>
<p><?php echo $location[‘address’]; ?></p>
<p><i class=”fa fa-mobile”></i> “><?php the_sub_field(‘phone’); ?></p>
<p><i class=”fa fa-globe”></i> “><?php the_sub_field(‘website’); ?></p>
</div>
</div>
<?php endwhile; ?>
</div>
<?php endif; ?>
<!– ====================================== –>
<style type=”text/css”>
.locations-map {
width: 100%;
height: 400px;
border: #ccc solid 1px;
margin: 20px 0;
}
</style>
<script src=”https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false”></script>
<script type=”text/javascript”>
(function($) {
function render_map( $el ) {
// var
var $markers = $el.find(‘.marker’);
// vars
var args = {
zoom : 7,
center : new google.maps.LatLng(0, 0),
mapTypeId : google.maps.MapTypeId.ROADMAP,
styles: [{“stylers”:[{“hue”:”#dd0d0d”}]},{“featureType”:”road”,”elementType”:”labels”,”stylers”:[{“visibility”:”off”}]},{“featureType”:”road”,”elementType”:”geometry”,”stylers”:[{“lightness”:100},{“visibility”:”simplified”}]}]
};
// create map
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 );
}
function add_marker( $marker, map ) {
// var
var latlng = new google.maps.LatLng( $marker.attr(‘data-lat’), $marker.attr(‘data-lng’) );
var icon = $marker.attr(‘data-icon’);
// create marker
var marker = new google.maps.Marker({ position : latlng, map : map, icon : icon });
// 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, ‘click’, function() {
infowindow.open( map, marker );
});
}
}
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(function(){
$(‘.locations-map’).each(function(){
render_map( $(this) );
});
});
})(jQuery);
</script>
<!– ====================================== –>
Thanks Again
Al
