• atmacmillan

• in reply to: Multiple Google Map Marker Icons
• September 14, 2015 at 11:49 am

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>&nbsp“><?php the_sub_field(‘phone’); ?></p>
<p><i class=”fa fa-globe”></i>&nbsp“><?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&gt;
<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

• atmacmillan

• in reply to: Multiple Google Map Marker Icons
• September 11, 2015 at 7:45 am

Thankyou @jonathan you are a dead set guru! so much thanks!

• atmacmillan

• in reply to: Multiple Google Map Marker Icons
• September 10, 2015 at 10:42 am

I accidentally was to eager on the solving of this problem, how do I un-solve the issue?

• atmacmillan

• in reply to: Multiple Google Map Marker Icons
• September 10, 2015 at 9:52 am

Thanks you @jonathan I had the repeater already set up for multiple marker addresses and actually just added an image field to the repeater which assigned the icon. But unfortunately it did not work. the parse serror says there is a syntax error, unexpected ‘?>’, expecting ‘]’

any ideas?