Show google map in single template from Address list

[James]

Hi!

Can anyone help me? I have a list of addresses where I am displaying them in a single template and supposed to be showing them respectively in google map. The problem is that, it only renders the map of the first viewed address. Succeeding addresses will not.

Here is a jsbin for the issue
http://jsbin.com/asigeq/5/edit

Thanks,
James

[James]

Just in case. I fixed the issue already by using jQuery remove() method to the view itself upon view hide. That will do the trick.

Ex:
function onViewHide(arguments) {
    $('#view-map').remove();
}

James

[Steve]

Hello James,

The problem is that you invoke the destroy method of the view, which detaches all events and basically nothing happens after the initial load of the view. Commenting out that line of code in your example seems to make it work as expected:

function legevaktShow(arguments) {
    var nr = arguments.view.params.nr;
    legevakter_obj = JSON.parse(window.localStorage.getItem("legevakter"));
    legevakt_obj    = getObjects(legevakter_obj, 'nr', nr);

    legevaktViewModel.setValues.call(legevaktViewModel, nr, legevakt_obj);
    var doc_height              = $(document).height();
    var map_canvas_height = doc_height - 120;
    $('#map_canvas_' + nr).height(map_canvas_height);

    initialize_map(legevakt_obj[0].lat, legevakt_obj[0].lon, nr);
    arguments.view.scroller.reset(); // reset to page top
    //arguments.view.destroy();
}

You could also use the suggestion of Petyo from this kendo forum i.e. use jQuery remove method in the hide event of the view.

All the best,
Steve
the Telerik team

Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Pluralsight.

[James]

Thanks! I forgot to remove that code. Petyo's suggestions works perfectly. So, for now, it is a sort of a hack since I read that you will be supporting the functionality natively with kendo ui. Can't wait for that. It will be more maintainable.

James