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() {

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

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

  10. if(window.navigator.onLine){

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

  24. });


  27. function loadJqueryUiMap(){

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

  31. loadMap();

  33. });

  35. }

  37. function loadMap(){

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

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

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

  53. });
  55. }});
  57. map.gmap('refresh');

  59. }