Home/ Questions/Q 8054691
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T08:12:20+00:00

I am new in Google map and I need to save the Google Map

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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 />
    • 0