如何在剃刀中加载Subgurim GMap对象（MVC3 / 4）

Question

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!

Answer 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:

• The subgurim forums for the last bit about needing the form tags and the basic example.
• How to display WebForms .ascx as partial view in MVC 3 for how to load an ascx into a razor view.
• If I left anything out please go easy this is my first one.

I hope this helps - Cheers,

Anker

Answer 2

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

:(

Answer 3

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.