There are two ways you can achieve this by mixing Razor mark up with Javascript.

The first way I located was this and you have to wrap your Javascript in the <text> tags that you see below:

@foreach (var item in Model) {
<text>
addMarker(map, 
            '@(@Html.DisplayFor(modelItem => item.Latitude))', 
            '@(@Html.DisplayFor(modelItem => item.Longitude))', 
            '@(@Html.DisplayFor(modelItem => item.Title))', 
            '@(@Html.DisplayFor(modelItem => item.Summary))', 
            '@(@Html.DisplayFor(modelItem => item.Postcode))');
</text>
}

The second method is much cleaner and easier to read:

function addMarkers(map) {
@foreach (var item in Model) {
@:addMarker(map, '@item.Latitude', '@item.Longitude', '@item.Title', '@item.Summary', '@item.Postcode');
} 
}

Having plotted my points successfully I merged in my findings for centring the map on your current location. So far this has been tested on PC in Mozilla Firefox and Google Chrome.

Oddly it didn't place me where I thought it might. Using the W3C API as the priority it was placing my centred location around Salisbury, Wiltshire.

Using this website I could understand a little more about my browser's location: http://whatismyipaddress.com/w3c-geolocation - here you're placed on the map to see where you’re actually located at that point in time.

I also found this website which gives a greater understanding of how Google Maps uses the W3C Geolocation API: http://apb.directionsmag.com/entry/how-google-maps-uses-the-w3c-geolocation-api-and-google-location-services/161053

This page from Mozilla also adds to the understanding: http://www.mozilla.org/en-US/firefox/geolocation/

It turned out that the W3C Geolocation API was issuing co-ordinates of: 50.719411, -1.981129, where as the Creative Jar office co-ordinates are: 51.477481, -0.868413

The next test has to be to get this up to a demo space and see what happens on a mobile and see how well supported the javascript is.