Code

Some of the features on our website took a large amount of research (Google is definitely our friend) and trial-and-error to create. The advice and suggestions on many a community forum, blog and reference page have been invaluable.

In return for the excellent help, samples of the code that we've used are freely available here for others in the coding community to use - we hope you'll find them useful.

Google Map object with various markers.

<html>
<head>

// load the Google Maps API
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">
// create the function, name as you wish
function LoadGM()
{
    // coordinates of map central point
    var MapCentrePos = new google.maps.LatLng(53.76,-2.7045);
    // coordinates of marker positions
    var MapShopPos = new google.maps.LatLng(53.76083,-2.704553);
    var MapCarParkPos1 = new google.maps.LatLng(53.76085,-2.7058);
    var MapCarParkPos2 = new google.maps.LatLng(53.7614,-2.7031);
    var MapCarParkPos3 = new google.maps.LatLng(53.76,-2.7053);
    // customisable options of the markered map:
    // http://code.google.com/apis/maps/documentation/javascript/reference.html
    var MapOptions =
    {
        zoom:15,
        center:MapCentrePos,
        mapTypeId:google.maps.MapTypeId.ROADMAP
    };
    // generate the map
    var BaseMap = new google.maps.Map(document.getElementById("LocationMap"),MapOptions);
    // load the marker images:
    // http://code.google.com/apis/chart/image/docs/gallery/dynamic_icons.html
    var ShopMarkerImage = new google.maps.MarkerImage('http://chart.apis.google.com/chart?chst=d_map_xpin_icon&chld=pin_star|computer|F33|FF3');
    var CarParkMarkerImage1 = new google.maps.MarkerImage('http://chart.apis.google.com/chart?chst=d_map_xpin_icon&chld=pin_sleft|parking|44F');
    var CarParkMarkerImage2 = new google.maps.MarkerImage('http://chart.apis.google.com/chart?chst=d_map_xpin_icon&chld=pin_sright|parking|44F');
    // generate the markers
    var WorkShopMarker1 = new google.maps.Marker
    ({
        position:MapShopPos,
        animation:google.maps.Animation.BOUNCE,
        map:BaseMap,
        icon: ShopMarkerImage,
        title:"1st Direct Computer Services"
    });
    var CarParkMarker1 = new google.maps.Marker({
        position: MapCarParkPos1,
        map: BaseMap,
        icon: CarParkMarkerImage1,
        title:"St Mary's"
    });
    var CarParkMarker2 = new google.maps.Marker({
        position: MapCarParkPos2,
        map: BaseMap,
        icon: CarParkMarkerImage2,
        title:"NCP"
    });
    var CarParkMarker3 = new google.maps.Marker({
        position: MapCarParkPos3,
        map: BaseMap,
        icon: CarParkMarkerImage1,
        title:"Corporation"
    });
}
</script>
</head>

// load the function here
<body onload=LoadGM()>
// create, size and position your markered map accordingly
    <div id=LocationMap style=""></div>
</body>
</html>

Google Map object with a highlighted area of custom shape.

<html>
<head>

// load the Google Maps API
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">
// create the function, name as you wish
function LoadGM()
{
    // coordinates of the map centre point
    var MapCentre = new google.maps.LatLng(53.735,-2.70);
    // coordinates of all points to draw the area
    // in order, either clockwise or anti
    var MapCoords = 
    [
        new google.maps.LatLng(53.803,-2.72),
        new google.maps.LatLng(53.795,-2.67),
        new google.maps.LatLng(53.78,-2.645),
        new google.maps.LatLng(53.74,-2.65),
        new google.maps.LatLng(53.725,-2.63),
        new google.maps.LatLng(53.675,-2.627),
        new google.maps.LatLng(53.67,-2.655),
        new google.maps.LatLng(53.688,-2.745),
        new google.maps.LatLng(53.765,-2.775),
        new google.maps.LatLng(53.785,-2.765)
    ];
    // customisable options of the area map:
    // http://code.google.com/apis/maps/documentation/javascript/reference.html
    var MapOptions =
    {
        zoom:11,
        center:MapCentre,
        mapTypeId:google.maps.MapTypeId.ROADMAP
    };
    // generate the map
    var BaseMap = new google.maps.Map(document.getElementById("CoverageMap"),MapOptions);
    // generate the area
    var CoverageArea = new google.maps.Polygon
    ({
        paths:MapCoords,
        strokeColor:"#00FF00",
        strokeOpacity:0.5,
        strokeWeight:2,
        fillColor:"#00FF00",
        fillOpacity:0.20,
        map:BaseMap
    });
}
</script>
</head>
// load the function here
<body onload=LoadGM()>
// create, size and position your area map accordingly
    <div id=CoverageMap style=""></div>
</body>
</html>

Google Map Street View object with marker.

<html>
<head>

// load the Google Maps API
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">
// create the function, name as you wish
function loadGM()
{
    // coordinates of the focal point
    var MapShopPos = new google.maps.LatLng(53.76083,-2.704553);
    // customisable options of the street view panorama:
    // http://code.google.com/apis/maps/documentation/javascript/reference.html
    var PanOptions = 
    {
        position:MapShopPos,
        addressControl:false,
        panControl:false,
    
        // configure the camera direction, angle and zoom
        pov:
        {
            heading:247.5,
            pitch:+2.125,
            zoom:-3
        }
    };
    // generate as map first
    var BasePan = new google.maps.StreetViewPanorama(document.getElementById("PanoramaView"),PanOptions);
    // load a marker image:
    // http://code.google.com/apis/chart/image/docs/gallery/dynamic_icons.html
    var ShopMarkerImage = new google.maps.MarkerImage('http://chart.apis.google.com/chart?chst=d_map_xpin_icon&chld=pin_star|computer|F33|FF3');
    // generate the marker:
    var WorkShopMarker2 = new google.maps.Marker
    ({
        position: MapShopPos,
        animation:google.maps.Animation.BOUNCE,
        map: BasePan,
        icon: ShopMarkerImage,
        title:"1st Direct Computer Services2"
    });
    // now change the map to street view:
    map.setStreetView(BaseMap2);
}
</script>
</head>

// load the function here
<body onload=LoadGM()>
    // create, size and position your street view accordingly
    <div id=PanoramaView style=""></div>
</body>
</html>