This is a migrated thread and some comments may be shown as answers.

Google Map in Advanced Form

5 Answers 126 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Developer Guy
Top achievements
Rank 1
Developer Guy asked on 07 May 2010, 09:12 AM
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.

5 Answers, 1 is accepted

Sort by
0
Accepted
Veronica
Telerik team
answered on 11 May 2010, 11:40 AM
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.
0
Developer Guy
Top achievements
Rank 1
answered on 13 May 2010, 04:44 PM
Fantastic!! Thank you very much...

I'll let you know if I encounter any problems.
0
Veronica
Telerik team
answered on 14 May 2010, 09:25 AM
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.
0
Harishankar
Top achievements
Rank 1
answered on 26 Nov 2010, 01:13 PM
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
0
Dave Navarro
Top achievements
Rank 2
answered on 23 Jul 2012, 07:55 PM
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
Tags
Scheduler
Asked by
Developer Guy
Top achievements
Rank 1
Answers by
Veronica
Telerik team
Developer Guy
Top achievements
Rank 1
Harishankar
Top achievements
Rank 1
Dave Navarro
Top achievements
Rank 2
Share this question
or