CODEWITHSUNDEEP
c#javascriptasp.net-mvcgoogle-maps-api-3
user3606300
user3606300

Reputation: 1

Using variables to add latitude, longitude Google Maps API, from Model in MVC

I am trying to figure out a way to pull latitude, longitude data from a Model I have in MVC and display it using the Google Maps API. I have done research and there are some different methods that have worked for people but none that I can get to work in my project. I can't figure out the best/ most efficient way to do this or if I am even close. Any sort of help or guidance would be immensely appreciated.

I have my Model class that looks like this: 

 public class Markers
{
    [Key]


    public double lat { get; set; }

    public double lon { get; set;}

    public Boolean stillActive { get; set; }

       }

}

I currently have a Controller class which is pretty bare. I am thinking this is where I need to put the logic to pass the required data to my View. I am only trying to use the lat and lon fields right now. Right now I have this after trying multiple different ways.

public class MapController : Controller {
private DBContext db = new DBContext();

public ActionResult Map() {

// Can't figure this out }

In my View I currently have the following code. What I can't figure out is am I supposed to be setting the variables in the Controller and then passing them to the View? Am I supposed to just access them in the View straight from the Model?? Is there an easy way/ hard way to do this? I want to show all the markers that are currently in the database. Here is my View:

 function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(50.0, -119.088889),
        zoom: 5,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
      mapOptions);


    *//Create Marker   //Trying to take all values in the coloumns of lat and lon and 
                       and place them in the LatLng function. //* 
        var latlng = new google.maps.LatLng(*//WANT All instances of LAT HERE, //WANT all instances of LON HERE*);
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
            title: "My Marker"        
    });
}

Sorry if this is hard to read, I am a noob to StackOverFlow. Any direction will be greatly appreciated. Thanks in advance.

Upvotes: 0

Views: 2791

Answers (2)

swazza85
swazza85

Reputation: 721

From what I understand, you are looking for an efficient way to pass data from the controller to the view. In your controller action, fetch the lat and long data from the dbContext. Once you have the data in your controller, you need to pass it along to the view. This can be done by passing a viewmodel to the view or by adding properties to the ViewBag. So your action code would look something like this if you were to use the ViewBag.

public ActionResult Map()
{
    Coordinates latLng = db.GetCoordinates();
    ViewBag.lat = latLng.lat;
    ViewBag.lng = latLng.lng;
    return View();
}

In your view, all you need to do is refer to the properties of the ViewBag.

var latlng = new google.maps.LatLng(@ViewBag.lat, @ViewBag.lng)

Hope this help.

Upvotes: 1

thealghabban
thealghabban

Reputation: 448

Did you try one of these solutions :

https://encrypted.google.com/#q=google+map+%2B+%22MVC%22

https://www.youtube.com/watch?v=rSdbWck4zWc

https://www.youtube.com/watch?v=MQsFxWztYmI

notes : that if search you will find that there's some issues with google maps and MVC ..

Upvotes: 0

Related Questions