Google Map in Advanced Form

[Developer Guy]

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.

[Veronica]

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.

[Developer Guy]

Fantastic!! Thank you very much...

I'll let you know if I encounter any problems.

[Veronica]

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.

[Harishankar]

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

[Dave Navarro]

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