0

I'm using ASP.NET MVC 4 and I'm trying to load a Google Map on my page.

I'm using Subgurim lib and already have the map object, but I don't know how to load it into the page.

Here's what I got so far:

 @model Subgurim.Controles.GMap
 @{    
      ViewBag.Title = "Pesquisa Carona";
 }
<h2>PesquisaCarona</h2>
<h4>Diga o endereço</h4>
<input type="text" name="txEndereco" />
<input type="submit" />
<cc1:GMap ID="googleMap" runat="server" /> <!-- This doesnt work!!!--!>

I know that normally I would add the map accessing it directly like:

For the serverside:

GMap1.addGMarker(oMarker);

And for the page:

<cc1:GMap ID="GMap1" runat="server" Height="300px" Width="300px" />

But with MVC I can't do that.

Cheers!

Marc Climent
  • 9,434
  • 2
  • 50
  • 55
Raphael
  • 171
  • 1
  • 3
  • 12

3 Answers3

1

I was able to the the basic example to work using .NET 4.5, MVC 5 (razor), GMaps 4.1.0.6, and Visual Studio 2013 by rendering an ascx user control as a partial in the cshtml. Here is what I did to get it to work:

  • Add the Subgurim.Maps package from NuGet.
  • Add an ascx control: In my case it was Gmap.ascx placed in the same folder as the cshtml I wanted to use. Your code should end up looking like the following:

  • In the ascx:

    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Gmap.ascx.cs" Inherits="YourApp.Views.Gmap" %>  
<%@ Register Assembly="GMaps" Namespace="Subgurim.Controles" TagPrefix="gmaps" %>
<form id="form1" runat="server">
    <gmaps:GMap
        ID="GMap1"
        runat="server"
        Width="500px"
        Height="250px"
        EnableViewState="False" />
</form>

  • In the ascx.cs:

    namespace YourAPP.Views
{
    using System;
    using System.Drawing;
    using System.Web.Mvc;

    public partial class Gmap : ViewUserControl
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            GMap1.enableDragging = false;
            GMap1.Language = "en";
            GMap1.BackColor = Color.White;
            GMap1.Key = "YOUR GOOGLE KEY";
            GMap1.CommercialKey="YOUR COMMERCIAL KEY";
        }
    }
}

  • In the cshtml:

    @Html.Partial("Gmap")

** A couple of things to note:

  • The form tag in the ascx is required it won't work without it.

  • The control needs to inherit from ViewUserControl instead of UserControl to work with razor.

  • Make sure you have your keys for the control (Google, Commercial). See the control site for details on those.

  • If you didn't put the control in the same folder as your cshtml you will need to adjust the path given to the Partial helper.

Thank you to:

I hope this helps - Cheers,

Anker

Community
  • 1
  • 1
Anker
  • 11
  • 3
0

I've got the same problem.

On my project (made with MVC3) I've added a partial view in aspx engine (the rest of my website is with razor). I followed the subgurim tutorial site. Then I added the google api key but I get a gray rectangle even if everything seems ok! Then I found this post on google: http://it.googlemaps.subgurim.net/Foro/general-discussions-perm5956-5963.aspx

:(

G10
  • 555
  • 1
  • 5
  • 15
  • A possible solution: http://stackoverflow.com/questions/6359793/web-forms-within-an-asp-net-mvc-project – G10 Jul 27 '12 at 10:55
0

I'm one of the developers of the project and we are working on a new version suitable for MVC (Razor or other view engine of choice). I'll update this response when it's ready for production.

Marc Climent
  • 9,434
  • 2
  • 50
  • 55