How to load Subgurim GMap object in razor(MVC3/4)

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!

Answers


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


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

:(


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.


Need Your Help

A Template engine written in PHP that use JSON format as data?

php json template-engine mustache.php

I need a Template engine written in PHP that use JSON file as it's data. The popular engine that I love it's template format was Mustache.php but what I understood from it's documentation, data for...

Gson, TypeToken, getting array of objects from JSON, field values are not set

json gson

I'm trying to get an array of objects from a JSON string, using Gson and its TypeToken class.