mardi 5 mai 2015

Integreting Google Maps to ASP.NET MVC 5 Framework using JavaScript

Hi everybody I have a question about Asp.Net Mvc 5. I want to show to user the closest pharmacies, markets, gyms etc. I have found an example about this but it is for just Liverpool. And this version is just for Liverpool I want this: A user will create his/her profile and certainly address. from his/her address, My website should find closest places like markets, restaurants etc.

     @{
    ViewBag.Title = "Home Page";
    }


     <script src="http://ift.tt/UE5hJi" type="text/javascript"></script>

     <!-- This css is to ensure that the google map contols (zoom bar etc) show and size correctly. -->
     <style>
     #map_canvas img{max-width:none}
     </style>

     <!-- This css is to give a nice big popup "info window" when a marker is clicked on the map -->
     <style>
     .infoDiv {
     height: 200px;    
     width: 300px; 
    -webkit-user-select: none; 
    background-color: white; 
    }
    </style>

    <!-- This is the div that will contain the Google Map -->
    <div id="map_canvas" style="height: 600px;"></div>

     <!-- Enclose the Javascript in a "section" so that it is rendered in the correct order after scripts have been loaded etc -->
     @section scripts {
    <section class="scripts">

    <script type="text/javascript">

    <!-- This code tells the browser to execute the "Initialize" method only when the complete document model has been loaded. -->
    $(document).ready(function () {
        Initialize();
    });

    // Where all the fun happens 
    function Initialize() {

        // Google has tweaked their interface somewhat - this tells the api to use that new UI
        google.maps.visualRefresh = true;
        var Liverpool = new google.maps.LatLng(53.408841, -2.981397);

        // These are options that set initial zoom level, where the map is centered globally to start, and the type of map to show
        var mapOptions = {
            zoom: 14,
            center: Liverpool,
            mapTypeId: google.maps.MapTypeId.G_NORMAL_MAP
        };

        // This makes the div with id "map_canvas" a google map
        var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

        // This shows adding a simple pin "marker" - this happens to be the Tate Gallery in Liverpool!
        var myLatlng = new google.maps.LatLng(53.40091, -2.994464);

        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: 'Tate Gallery'
        });

        // You can make markers different colors...  google it up!
        marker.setIcon('http://ift.tt/1dEZgVV')

        // a sample list of JSON encoded data of places to visit in Liverpool, UK
        // you can either make up a JSON list server side, or call it from a controller using JSONResult
        var data = [
                  { "Id": 1, "PlaceName": "Liverpool Museum", "OpeningHours":"9-5, M-F","GeoLong": "53.410146", "GeoLat": "-2.979919" },
                  { "Id": 2, "PlaceName": "Merseyside Maritime Museum ", "OpeningHours": "9-1,2-5, M-F", "GeoLong": "53.401217", "GeoLat": "-2.993052" },
                  { "Id": 3, "PlaceName": "Walker Art Gallery", "OpeningHours": "9-7, M-F", "GeoLong": "53.409839", "GeoLat": "-2.979447" },
                  { "Id": 4, "PlaceName": "National Conservation Centre", "OpeningHours": "10-6, M-F", "GeoLong": "53.407511", "GeoLat": "-2.984683" }
               ];

        // Using the JQuery "each" selector to iterate through the JSON list and drop marker pins
        $.each(data, function (i, item) {
            var marker = new google.maps.Marker({
                'position': new google.maps.LatLng(item.GeoLong, item.GeoLat),
                'map': map,
                'title': item.PlaceName
            });

            // Make the marker-pin blue!
            marker.setIcon('http://ift.tt/1kglguQ')

            // put in some information about each json object - in this case, the opening hours.
            var infowindow = new google.maps.InfoWindow({
                content: "<div class='infoDiv'><h2>" + item.PlaceName + "</h2>" + "<div><h4>Opening hours: " + item.OpeningHours + "</h4></div></div>"
            });

            // finally hook up an "OnClick" listener to the map so it pops up out info-window when the marker-pin is clicked!
            google.maps.event.addListener(marker, 'click', function () {
                infowindow.open(map, marker);
            });

        })
    }


</script>
</section>
     }

I have no idea about JavaScript and I do not know how to modify this code. Please help me. If there are other ways please inform me.

Aucun commentaire:

Enregistrer un commentaire