Drupalgap App My_Module Map

// Create global variables to hold coordinates and the map.
var _my_module_user_latitude = null;
var _my_module_user_longitude = null;
var _my_module_map_bounds = null;
var _my_module_map = null;

/**
 * Implements hook_menu().
 */
function my_module_menu() {
  try {
    var items = {};
    items['map'] = {
      title: 'Map',
      page_callback: 'my_module_map',
      pageshow: 'my_module_map_pageshow'
    };
    return items;
  }
  catch (error) { console.log('my_module_menu - ' + error); }
}

/**
 * The map page callback.
 */
function my_module_map() {
  try {
    var content = {};
    content['my_slider'] = {
      theme: 'range',
      attributes: {
        min: '0',
        max: '100',
        value: '10',
        'data-theme': 'b',
        id: 'my_module_distance',
      }
    };
    content['find_nearby_locations'] = {
      theme: 'button',
      text: 'Find Nearby Locations',
      attributes: {
        onclick: "_my_module_map_button_click()",
        'data-theme': 'b'
      }
    };
    var map_attributes = {
      id: 'my_module_map',
      style: 'width: 100%; height: 320px;'
    };
    content['map'] = {
      markup: '<div ' + drupalgap_attributes(map_attributes) + '></div>'
    };
    content['location_results'] = {
      theme: 'jqm_item_list',
      items: [],
      attributes: {
        id: 'location_results_list'
      }
    };
    return content;
  }
  catch (error) { console.log('my_module_map - ' + error); }
}

/**
 * The map pageshow callback.
 */
function my_module_map_pageshow() {
  try {
    navigator.geolocation.getCurrentPosition(

      // Success.
      function(position) {

        // Set aside the user's position.
        _my_module_user_latitude = position.coords.latitude;
        _my_module_user_longitude = position.coords.longitude;

        // Build the lat lng object from the user's position.
        var myLatlng = new google.maps.LatLng(
          _my_module_user_latitude,
          _my_module_user_longitude
        );

        // Set the map's options.
        var mapOptions = {
          center: myLatlng,
          zoom: 11,
          mapTypeControl: true,
          mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
          },
          zoomControl: true,
          zoomControlOptions: {
            style: google.maps.ZoomControlStyle.SMALL
          }
        };

        // Initialize the map, and set a timeout to resize properly.
        _my_module_map = new google.maps.Map(
          document.getElementById("my_module_map"),
          mapOptions
        );
        setTimeout(function() {
            google.maps.event.trigger(_my_module_map, 'resize');
            _my_module_map.setCenter(myLatlng);
        }, 500);

        // Add a marker for the user's current position.
        var marker = new google.maps.Marker({
            position: myLatlng,
            map: _my_module_map,
            icon: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png'
        });



        setTimeout(function() {
            google.maps.event.trigger(_my_module_map, 'resize');
        }, 500);

      },

      // Error
      function(error) {

        // Provide debug information to developer and user.
        console.log(error);
        drupalgap_alert(error.message);

        // Process error code.
        switch (error.code) {

          // PERMISSION_DENIED
          case 1:
            break;

          // POSITION_UNAVAILABLE
          case 2:
            break;

          // TIMEOUT
          case 3:
            break;

        }

      },

      // Options
      { enableHighAccuracy: true }



    );
  }
  catch (error) {
    console.log('my_module_map_pageshow - ' + error);
  }
}


/**
 * The "Find Nearby Locations" click handler.
 */
function _my_module_map_button_click() {
  try {
    // Build the path to the view to retrieve the results.

        //clears marker
        marker = [];

        // Build the lat lng object from the user's current position.
          _my_module_map_myLatlng = new google.maps.LatLng(
            _my_module_user_latitude,
            _my_module_user_longitude
          );

            //adds bounds variable for map center
            //_my_module_map_bounds = new google.maps.LatLngBounds();

        //adds bounds variable for map center
        _my_module_map_bounds = new google.maps.LatLngBounds();

        //Add your current location to bounds
        _my_module_map_bounds.extend(_my_module_map_myLatlng);


    var range = 5; // Search within a 5 mile radius, for illustration purposes.

    // Get Range
    range = $('input#my_module_distance').val();

    var path = 'nearby-locations.json/' +
      _my_module_user_latitude + ',' + _my_module_user_longitude + '_' + range;

    // Call the server.
    views_datasource_get_view_result(path, {
        success: function(data) {

          if (data.nodes.length == 0) {
            drupalgap_alert('Sorry, we did not find any nearby locations!');
            return;
          }

          // Iterate over each spot, add it to the list and place a marker on the map.
          var items = [];
          $.each(data.nodes, function(index, object) {

              // Render a nearby location, and add it to the item list.
              var row = object.node;
              var image_html = theme('image', { path: row.field_image.src });
              var distance =
                '<span class="ui-li-count ui-btn-up-c ui-btn-corner-all" style="top:18px;">' + row.field_geofield_distance + ' ' +
                drupalgap_format_plural(row.field_geofield_distance, 'mile', 'miles') + ' away</span>';
              var description =
                '<h2>' + row.title + '</h2>' +
                '<p>' + row.body + '</p>' +
                '<p>' + distance + '</p>';
              var link = l(image_html + description, 'node/' + row.nid);
              items.push(link);

              // Add a marker on the map for the location.
              var locationLatlng = new google.maps.LatLng(row.lat, row.lon);
              var marker = new google.maps.Marker({
                  position: locationLatlng,
                  map: _my_module_map,
                  data: row,
                  title: row.title,
              });



            //pass each lat long to the bounds extend for centering the map
            _my_module_map_bounds.extend(locationLatlng);


          });

          //Map Center
          _my_module_map.fitBounds(_my_module_map_bounds);

          setTimeout(function() {
            google.maps.event.trigger(_my_module_map, 'resize');
          }, 500);


          drupalgap_item_list_populate("#location_results_list", items);

        }
    });
  }
  catch (error) { console.log('_my_module_map_button_click - ' + error); }
}