Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Keith R Hubbard 175 posts 403 karma points
    Oct 14, 2014 @ 23:28
    Keith R Hubbard
    0

    Example of a view or a partial.

    Do you have a good example of a view or a partial to get the datatype to display the map? Everything leads me to believe that i have to create a package manifest. Is that the case?

  • Marc Love (uSkinned.net) 447 posts 1789 karma points
    Oct 30, 2014 @ 12:03
    Marc Love (uSkinned.net)
    0

    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);

     

  • Marc Love (uSkinned.net) 447 posts 1789 karma points
    Oct 30, 2014 @ 15:14
    Marc Love (uSkinned.net)
    0

    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>

  • erika danis 13 posts 60 karma points
    Dec 01, 2014 @ 17:08
    erika danis
    0

    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

  • Kyle 24 posts 63 karma points
    Feb 15, 2015 @ 00:52
    Kyle
    0

    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

     

  • Heinz-Josef Lücking 2 posts 23 karma points
    Apr 15, 2015 @ 17:46
    Heinz-Josef Lücking
    0

    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.

Please Sign in or register to post replies

Write your reply to:

Draft