Google Maps Custom image map
<?php
$config['verbal_address'] = "Verbal Arts Centre\nStable Lane and Mall Wall, Bishop\nStreet Within, Londonderry, BT48 6PU";
$config['verbal_map_latlng'] = '54.9940,-7.3252';
$config['verbal_map_size']['width'] = '250';
$config['verbal_map_size']['height'] = '200';
$config['verbal_map_img'] = 'http://maps.googleapis.com/maps/api/staticmap?center=' . $config['verbal_map_latlng'];
$config['verbal_map_img'] .= '&zoom=16&size=' . $config['verbal_map_size']['width'] . 'x' . $config['verbal_map_size']['height'];
$config['verbal_map_img'] .= '&sensor=true';
// this adds a custom pin to the map for you
$config['verbal_map_img'] .= '&sensor=true&markers=icon:<!-- GOOGLE_MAPS_PIN -->%7C' . $config['verbal_map_latlng'];
// remove above line to use standard pin
// get this link manually from google maps itself, so that you know its right
// could be coded, but I done it this way as it will never change on project I created
$config['verbal_map_link'] = 'https://maps.google.co.uk/maps?oe=utf-8&ie=UTF8&q=Verbal+Arts+Centre+Stable+Lane+and+Mall+Wall,+Bishop+Street+Within,+Londonderry,+BT48+6PU&hq=Verbal+Arts+Centre+Stable+Lane+and+Mall+Wall,&hnear=Bishop+Street+Within&t=m&z=16&vpsrc=0&iwloc=A&cid=8959475693930620920';
?>
<div class="google-map">
<br>
<a href="<?= $config['verbal_map_link'] ?>" title="<?= $config['verbal_address'] ?>" target="_blank">
<?php if(ENVIRONMENT == 'development'): ?>
<img src="<?= str_replace('<!-- GOOGLE_MAPS_PIN -->', 'http://f.cl.ly/items/400E2V0F3y3z2J2N3Q2t/verbal-pin.png', $config['verbal_map_img']) ?>" alt="Verbal Arts Map" class="max-img">
<?php else: ?>
<img src="<?= str_replace('<!-- GOOGLE_MAPS_PIN -->', site_url('assets/img/style/verbal-pin.png'), $config['verbal_map_img']) ?>" alt="Verbal Arts Map" class="max-img">
<?php endif; ?>
</a>
</div>