CODEWITHSUNDEEP
asp.net-mvcgoogle-maps
mans
mans

Reputation: 18178

saving and retrieving GoogleMap view to sql in mvc

I am new in Google map and I need to save the Google Map view into database (long + lat +zoom). I know MVC but I don't know how to get Google Map view information (long + Lat +zoom) when it is shown on a view.

Also when I am retrieving data from database, how can I change the view of Google Map in a razor view?

Any help, including some reference to read is very appreciated.

One way that I am thinking of doing this, is to create three hidden inputs that their value is changes when user play with map and changing Google Map view. But I don't know how to do this using JS and Google Map.

Upvotes: 0

Views: 2331

Answers (1)

Aleksej Vasinov
Aleksej Vasinov

Reputation: 2797

Let's say you have model Map in your code, smth like:

    public class MapModel
{
    /// <summary>
    /// Lattitude on map
    /// </summary>
    public decimal Lat { get; set; }

    /// <summary>
    /// Longtidute on map
    /// </summary>
    public decimal Lon { get; set; }

    /// <summary>
    /// Map zoom level
    /// </summary>
    public int Zoom { get; set; }
}

Place Google Maps script in your view:

<head runat="server">
<title>Index</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

  function initialize()
  {
    var mapDiv = document.getElementById('MapDiv');
    var map = new google.maps.Map(mapDiv, {
      center: new google.maps.LatLng(<%= Model.Lat %>, <%= Model.Lon %>),
      zoom: <%= Model.Zoom %>,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    google.maps.event.addListener(map, 'click', function(event)
    {
        // Puts coordinates to form (then pass to DB using Ajax, etc)
        document.getElementById("Lat").value = event.latLng.lat();
        document.getElementById("Lon").value = event.latLng.lng();
        document.getElementById("Zoom").value = map.getZoom();
    });
  }
  google.maps.event.addDomListener(window, 'load', initialize);


<div id="MapDiv" style="width: 500px; height: 500px"></div>
<input type="text" id="Lat" value="0" /><br />
<input type="text" id="Lon" value="0" /><br />
<input type="text" id="Zoom" value="0" /><br />

Upvotes: 2

Related Questions