Google Maps Custom image map

example map.php

<?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>