title: How to add multiple markers on mobile Google Map and display the content when click?
body: <p>hello i am working on the phonegap apps which can display the location markers on google map.</p>
  
  <p>It is supposed to have a detail box pop up when i click on the marker, but it does not function.</p>
  
  <p>can anyone help me to correct the code?</p>
  
  <p>many thanks</p>
  
  <pre><code>    var mobileDemo = { 'center': '57.7973333,12.0502107', 'zoom': 8 };
  
          ////////////////////////////////////////////////////////////
  
          $('#basic_map').live('pageinit', function() {
              demo.add('basic_map', function() {
                  $('#map_canvas').gmap({'center': mobileDemo.center, 'zoom': mobileDemo.zoom, 'disableDefaultUI':true,
                   'callback': function() {
                      var self = this;
                      self.addMarker({'position': this.get('map').getCenter() }).click(function() {
                          self.openInfoWindow({ 'content': 'Hello World!' }, this);
                      });
                  }});
  
                  $('#map_canvas').gmap('addMarker', { position: new google.maps.LatLng(57.9973333,12.0502107)})
                             .click(function() {
  
                              var self = this;
                                self.openInfoWindow({ 'content': 'Hello Worl23!' }, this);
                       } )
  
                  $('#map_canvas').gmap('addMarker', { position: new google.maps.LatLng(57.373333,12.0502107)})
                             .click(function() {
  
                              var self = this;
                                self.openInfoWindow({ 'content': 'Hello Worl234!' }, this);
                       } )
  
                  }).load('basic_map');
          });
  
          $('#basic_map').live('pageshow', function() {
              demo.add('basic_map', function() { $('#map_canvas').gmap('refresh'); }).load('basic_map');
          });
  
  
  
      &lt;/script&gt;
  </code></pre>