0

Checking my understanding of Google maps:

I am developing a web page that displays a number of different types of information for my employer's facilities. I have been using a multiview, and activating the proper view depending on user input (button toolbar). When I add a view to be a map to the selected building, I run into problems. I can make the map appear when the user navigates to the building map view. But when the user navigates away from that view, the maps api gives me the error

0x800a138f - JavaScript runtime error: Unable to get property 'offsetWidth' of undefined or null reference

As I understand it, this is because when another view becomes active, the view that contains the map is no longer rendered. The api is trying to access an object that no longer exists.

I could try to clean off the object - remove all listeners, delete the object, even delete the div that contains it. But I have just read through the related question on how to destroy a map instance and listened to Chris Broadfoot and Luke Mahe's discussion on the topic.

From this, my understanding is that the google maps api was not designed for this kind of handling. So, it is really not designed to be compatible with something like multi-views.

Is this right? If not, what am I missing? If so, any suggestions for a web app newbie on what to use instead of multiviews (I am thinking panels and hide/show as needed)?

Community
  • 1
  • 1
  • The maps are all contained in the same browser window and are switched on and off by the selection on the toolbar? and the error occurs when a map is hidden and another displays? – ScaisEdge May 26 '15 at 14:31
  • @scaisEdge - Single page app - single map object updated when user selects different buildings. For a building, the user can select to show the rooms available in the building, a picture of the building, or a map to the building. One view within the multi-view displays rooms, another for the pic, and another for the map. Everything works ok, until the user selects to show the map (which displays correctly), and then selects to display something else, which deactivates the view that contains the map (all still in the same page) - that gives the error. –  May 26 '15 at 14:39
  • How do you make the deactivation, what you mean by off? The map is hidden? in what way? – ScaisEdge May 26 '15 at 14:49
  • @scaisEdge - In an ASP Multiview control, you add multiple views. You select which view is actually seen by the user by setting the ActiveViewIndex. Only that currently active view is rendered. When you change the index, the previously active view gets "deactivated" - that is, it is no longer rendered. –  May 26 '15 at 15:06

1 Answers1

0

Update and kind of an answer...
I switched to using multiple panels and hiding all the panels, except the one with the information the user chooses to use. The map then displayed blank unless I did one of two things: set the map to be created as an endRequest...

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(myInitMap);

If I understand that correctly, it means my handler (myInitMap) gets executed (map recreated) after every postback. Also, this seems to be a bit unstable - sometimes IE would give me errors, and I could not figure out a pattern or reason. Chrome would work ok every time.

The other way that worked was to not call the map creation on any particular event, but rather to register my map init script from the code-behind page_load event. My panels and my multi-view had been encased in an Update Panel, and I needed to register the script under that Update Panel...

ScriptManager.RegisterStartupScript(DataUpdatePanel, DataUpdatePanel.GetType(), "ShowGoogleMap", "myInitMap();", true);

This is because what is causing problems, I think, is that my panels (and my multi-view in the earlier version) were inside that UpdatePanel. The map creation script and API calls were not happening in the right sequence with everything else as the UpdatePanel performed a partial page update. Registering the map init scrip with the Script Manager basically told it to put it in the right place (at the end?) of that partial page update.

Also, I could not figure out how to update the map. The script is basically regenerating the map every time. I tried keeping a var pointer to the map so that I could test if that had already been created, and then just update it, but that did not work. The UpdatePanel partial page update is, I presume, working much like a whole page refresh, but for only what is contained in the UpdatePanel. So when the partial update happens, the previous contents are disposed of and recreated, so the map has to be recreated as well.

If anyone understands this differently, I would love some redirection.