+1 vote
30 views
by (163k points)

I have a visualforce page component that loads a google map at the push of a button, but it only works by using window.onload in JavaScript which refreshes the page, yet I want to keep the focus on the map and tab without moving the focus to the parent page. If window.onload is not used I cannot initialize/render the map. I may be a little over my head here. Your help will be much appreciated.

  <!--VF component summarized-->

  <div class="col-sm-4">
    <div class="form-group">
        <button id="btn_map_searchtest" type="button" class="btn btn-primary">Go</button>
        <apex:actionFunction name="af_btn_map_search" action="{!getMapMth}" status="ajax_status" oncomplete="hideSpinner();" reRender=""/>
    </div>
  </div>

      <div id="dvMap" style="width: 100%; height: 600px">
      </div>

The js follows:

 /* js summarized */
  var mapicon = '';

  window.onload = function () {
    if ('{!appointmentJson}' !== '') {
      mapicon = JSON.parse('{!appointmentJson}');
      LoadMap();
    }
  };

  function LoadMap() {
     //map code
  }

The apex follows:

/* apex summarized */

public List<My_Schedule__c> getMap(){
    //querying and creating json data
}

public void getMapMth(){
    getMap(); //calls getMap                
} 

1 Answer

+1 vote
by (163k points)
 
Best answer

I was able to find a solution. I learned quite a few things from this and cleared some doubts.

  1. The master VF page with VF components did not cause the problem. You can put a google map on a component and refresh it without reloading the page.
  2. Rerendering an outputpanel wrapper or two around the map div had not effect on the map and it prevented the page reload and map rendering. Again, I had other issues.
  3. Assigning {!appointmentJson} directly into a js variable was causing issues with how many markers I was showing, so I used a hidden field instead and had it rerendered when needed and therefore ensuring my json string was up-to-date.
  4. I also noticed that using a string to pass to infoContent when multiple markers existed in an array was creating a problem, so I added my html string directly into infoWindow.setContent. Beware not to skip any single and double quotations, the markers may not load. Then again, I am not experienced in the subject.
  5. I solved the main problem by re-writing the js to remove/add markers on the map. Originally I was fixed on rerending the component and outputpanel, not knowing I could just manipulate the markers and div with only Javascript and/or JQuery.
  6. In short, rerendering my hidden field with the json string, clearing the markers array and the json array from the hidden field did the trick. The map loads if I have a successful search, with the right amount of markers, and it changes as the query is changed, all without reloading the page. I am resetting/reloading the map/markers from an actionfunction's onComplete every time I click my html button to search. -I was inspired after fixing a similar issue with the fullCalendar library which I fixed by using their removeEventSources, addEventSource and refetchEvents.

Last but not least, place your js/googlemap/fullCalendar/css/etc. references on the main VF page. The components seem to be able to share these resources without issues.

I hope this helps someone.

Welcome to Memory Exceeded, where you can ask questions and receive answers from other members of the community.
You can donate any amount for Orphans village using following QR Code.
...