locked
Address pin on google Map RRS feed

  • Question

  • User1429575514 posted

    Hello every one,

    i want to show pin on address at google map. In my application after fetching address from DB. i want to show its pin on map. How it will possible in Asp.net (MVC). if any one have done kindly guide me here.

    Thanks 

    Tuesday, November 15, 2016 3:47 PM

All replies

  • User-2057865890 posted

    Hi Umair,

    You could use the Google Maps JavaScript API.

    View

    @model List<Webmap.Models.Address>
    <script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
    
    
    <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>
    <br />
    <!-- This is the div that will contain the Google Map -->
    <div id="map_canvas" style="height: 550px;"></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 Tunisie = new google.maps.LatLng(36.81881, 10.16596);
    
                    // 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: 8,
                        center: Tunisie,
                        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);
    
                    // a sample list of JSON encoded data of places to visit in Tunisia
                    // you can either make up a JSON list server side, or call it from a controller using JSONResult
                    var data=@Html.Raw(Json.Encode(Model));
                    //var data = [
                    //          { "Id": 1, "PlaceName": "Zaghouan", "GeoLong": "36.401081", "GeoLat": "10.16596" },
                    //          { "Id": 2, "PlaceName": "Hammamet ", "GeoLong": "36.4", "GeoLat": "10.616667" },
                    //          { "Id": 3, "PlaceName": "Sousse", "GeoLong": "35.8329809", "GeoLat": "10.63875" },
                    //          { "Id": 4, "PlaceName": "Sfax", "GeoLong": "34.745159", "GeoLat": "10.7613" }
                    //];
    
                    // 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://maps.google.com/mapfiles/ms/icons/blue-dot.png')
    
                        // 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 + "</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>
    }
    

    Controller

    public ActionResult Index()
    {
        var model = new List<Address>
        {
             new Address { Id= 1, PlaceName = "Zaghouan", GeoLong= 36.401081, GeoLat= 10.16596 },
             new Address  { Id= 2, PlaceName= "Hammamet ", GeoLong= 36.4, GeoLat= 10.616667 },
             new Address { Id= 3, PlaceName= "Sousse", GeoLong= 35.8329809, GeoLat= 10.63875 },
             new Address  { Id= 4, PlaceName= "Sfax", GeoLong= 34.745159, GeoLat= 10.7613 }
        };
        return View(model);
    }

    Model

    public class Address
    {
        public int Id { get; set; }
        public string PlaceName { get; set; }
        public double GeoLong { get; set; }
        public double GeoLat { get; set; }
    }

    reference: https://code.msdn.microsoft.com/Google-Map-in-MVC5-21e19073 

    Best Regards,

    Chris

    Wednesday, November 16, 2016 7:55 AM
  • User1429575514 posted

    Thank you very much sir... is it possible that  it can be done through address. in my application i will extract address from data base and will show pin on map.. i have no detail of longitude and latitude.. kindly guide me about it.

    Wednesday, November 16, 2016 9:19 AM
  • User-2057865890 posted

    Hi Umair,

    You could use the "GoogleMaps.LocationServices" API to get the longitude and latitude of an address.

    reference: http://www.c-sharpcorner.com/UploadFile/99bb20/plot-multiple-location-on-google-map-dynamically-in-Asp-Net/ 

    Best Regards,

    Chris

    Wednesday, November 30, 2016 1:39 AM