Hi Keith,

You will need some javascript to display the map

<script>

var map;
var zoom;
var latitude;
var longitude;
var mapActive = false;

function initialize() {

    if(mapActive){
        var latlng;

        latlng = new google.maps.LatLng(latitude, longitude);

        var myOptions = {
            zoom: zoom,
            center: latlng,
            scrollwheel: false,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map"), myOptions);

        addMarker(latlng);

    }   
}

function addMarker(location) {

   marker = new google.maps.Marker({
            position: location,
            draggable: false,
            map: map
        });     
}


window.onload = function () {
    initialize();
}

</script>

Have a div on your page where you want to display the map making sure it has a width and height:

<div id="map" style="width:100%;height:300px"></div>

And you will also need a partial view to populate the zoom, latitude and longitude variables in you javascript

string mapLocation = Model.GetProperty("mapLocation").Value.ToString().Trim();

string[] mapLocationInfo = mapLocation.Split(new Char[] { ',' });

string latitude = mapLocationInfo[0];
string longitude = mapLocationInfo[1];
string zoom = mapLocationInfo[2];

string lsJavascript = String.Format("<script>mbMapActive = true;msLatitude = {0};msLongitude = {1};miZoom = {2}</script>", latitude, longitude, zoom);
@Html.Raw(lsJavascript);

Forgot to mention, you will also need the following in your page header

<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

Thanks for the above example. I have tried to implement it, however i cant get it to work. Am i missing something? I have added all the above, and i get the below values outputed on screen. How do i then translate these into a working map?

<script>mbMapActive = true;msLatitude = 54.563023655464214;msLongitude = -1.305924539733951;miZoom = 15</script>

Kind Regards

Erika

Hey Erika,

I've got this working there's a mis match on the variable names, change them to match the ones set out in the first bit of javascript.

mbMapActive = true; > mapActive
msLatitude = 54.563023655464214; > latitude
msLongitude = -1.305924539733951; > longitude
miZoom = 15</script> > zoom

Works perfect for me, GREAT extension thanks !

Kyle

Thanks for the work. With

<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

be aware to use https or http according to your server settings.

is working on a reply...