Google Map in Advanced Form

6 posts, 1 answers
  1. Developer Guy
    Developer Guy avatar
    2 posts
    Member since:
    Feb 2010

    Posted 07 May 2010 Link to this post

    Hi.

    We have set up an advanced form in the scheduler and wish to include a Google Maps (or Bing Maps) map within the form. I have placed the required <div> and JavaScript in several places but it does not appear to be working. That is, the map does not appear at all (although I notice that the browser is contacting Google as the advanced form loads).

    What is the best way to go about this?

    Thanks in advance.
  2. Answer
    Veronica
    Admin
    Veronica avatar
    1213 posts

    Posted 11 May 2010 Link to this post

    Hi Glenn,

    To be able to add Bing Maps in the Advanced Edit template you'll need to use the Bing Maps Interactive SDK.

    I am editing the Advanced Templates demo and here are the needed things to add the map: 

    Add the div tag with the map in the AdvancedForm Template :

    <div id='myMap' style="position: relative; width: 400px; height: 400px;" onload="GetMap();" />

    You'll need to call the GetMap() function in the OnClientFormCreated handler:

    function schedulerFormCreated(scheduler, eventArgs) {
                // Create a client-side object only for the advanced templates
                var mode = eventArgs.get_mode();
                if (mode == Telerik.Web.UI.SchedulerFormMode.AdvancedInsert ||
                        mode == Telerik.Web.UI.SchedulerFormMode.AdvancedEdit) {
                    // Initialize the client-side object for the advanced form
                    var formElement = eventArgs.get_formElement();
                    var templateKey = scheduler.get_id() + "_" + mode;
                    var advancedTemplate = schedulerTemplates[templateKey];
                    if (!advancedTemplate) {
                        // Initialize the template for this RadScheduler instance
                        // and cache it in the schedulerTemplates dictionary
                        var schedulerElement = scheduler.get_element();
                        var isModal = scheduler.get_advancedFormSettings().modal;
                        advancedTemplate = new window.SchedulerAdvancedTemplate(schedulerElement, formElement, isModal);
                        advancedTemplate.initialize();
      
                        schedulerTemplates[templateKey] = advancedTemplate;
      
                        // Remove the template object from the dictionary on dispose.
                        scheduler.add_disposing(function() {
                            schedulerTemplates[templateKey] = null;
                        });
                    }
      
                    // Are we using Web Service data binding?
                    if (!scheduler.get_webServiceSettings().get_isEmpty()) {
                        // Populate the form with the appointment data
                        var apt = eventArgs.get_appointment();
                        var isInsert = mode == Telerik.Web.UI.SchedulerFormMode.AdvancedInsert;
                        advancedTemplate.populate(apt, isInsert);
                    }
                }
                  
                var map = null;
                GetMap();
            }
         
            function GetMap() {
                map = new VEMap('myMap');
                map.LoadMap();
            }

    Finally you'll have to register the scripts for the Map. This could be done in the ScriptManager:

    <telerik:RadScriptManager runat="server" ID="RadScriptManager1">
            <Scripts>
                <asp:ScriptReference Path="AdvancedForm.js" />
                <asp:ScriptReference Path="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2" />
            </Scripts>
        </telerik:RadScriptManager>

    Find the full code in the attached .zip file.

    Hope this helps.

    All the best,
    Veronica Milcheva
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Developer Guy
    Developer Guy avatar
    2 posts
    Member since:
    Feb 2010

    Posted 13 May 2010 Link to this post

    Fantastic!! Thank you very much...

    I'll let you know if I encounter any problems.
  5. Veronica
    Admin
    Veronica avatar
    1213 posts

    Posted 14 May 2010 Link to this post

    Hello,

    We are glad we were able to help you.

    Thank you for the interesting scenario that you requested. We will probably make a KB article about this case.

    Your Telerik points have been updated.

    Greetings,
    Veronica Milcheva
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  6. Harishankar
    Harishankar avatar
    1 posts
    Member since:
    Nov 2010

    Posted 26 Nov 2010 Link to this post

    Hi,

    I need to use Google Maps in my website which can add new place and store the Latitude and Longitude values in Database and when ever i search place i need to check it from the database.... So that user can view places from my database other places user cant view it..... so kindly help me to achieve this....


    Thanks,
    Hari
  7. Dave Navarro
    Dave Navarro avatar
    150 posts
    Member since:
    Jul 2005

    Posted 23 Jul 2012 Link to this post

    Hello Harishankar,

    I'm looking to do the same thing but with Bing Maps. Did you ever get an answer to this question?

    If you found a solution, do you have any code snippets you can share?

    Please let me know and thanks!

    ~ Dave
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017