A working dynamically loaded google map api v3

A working dynamically loaded google map api v3

just as a tip for someone looking to load google map dynamically in jqm 1.1.1. hope this help ! Cheers !

  1. in your index.html file:
  2. <div id="map_canvas"></div>
  1. in your js file:
  2. $('#map_canvas').live("pageinit", function() {

  3. $('#map_canvas').css({'width':$(window).width(),'height':$(window).height()});
  4.      
  5. });

  6. $('#location').live("pageshow", function() {

  7. if(window.navigator.onLine){

  8. $.getScript("http://www.google.com/jsapi").done(function(script, textStatus) {
  9. google.load("maps","3", {"other_params":"sensor=false","callback":"loadJqueryUiMap"});
  10. });
  11. } else {
  12. // alert user and doesn't need to continue
  13. }

  14. });


  15. function loadJqueryUiMap(){

  16. $.getScript("jquery/jquery.ui.map.full.min.js").done(function(script, textStatus) {

  17. loadMap();

  18. });

  19. }

  20. function loadMap(){

  21. var map = $('#map_canvas');

  22. map.gmap('destroy');
  23. var latLng = new google.maps.LatLng('1.222222','110.333333333');

  24. map.gmap({'center': latLng, 'zoom': 15, 'disableDefaultUI': true, 'streetViewControl': true,'callback': function() {
  25. var self = this;
  26. self.addMarker({'position': this.get('map').getCenter() }).click(function() {
  27. self.openInfoWindow({ 'content': 'Awesome Google Map' }, this);

  28. });
  29. }});
  30. map.gmap('refresh');

  31. }