Place search pagination not working correctly (using gelocation template)

Patrick_H_4 · ‎12-07-2015

Hi guys

I am trying to get local store to appear around my current location (using reverse GEO location), I dont know where I am going wrong as I have the correct google api to carry out this function

My function is as follows
/*jslint browser:true, devel:true, white:true, vars:true */
/*global $:false, intel:false */
var _map = null;
var _seconds = 30;
var _llbounds = null;
var myLatLng;
var oldLatLng = "";
var boolTripTrack = true;
var currentLatitude;
var currentLongitude;
var latlng;
var google;
//Create the google Maps and LatLng object

function drawMap() {
//Creates a new google maps object
latlng = new google.maps.LatLng(currentLatitude, currentLongitude);
myLatLng = latlng;
var mapOptions = {
center: latlng,
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.LEFT_TOP
}
};
if (boolTripTrack === true) {
_map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}
}


function initMap() {
var pyrmont = {lat: currentLatitude, lng: currentLongitude};

_map = new google.maps.Map(document.getElementById('map_canvas'), {
center: myLatLng,
zoom: 17
});

var service = new google.maps.places.PlacesService(_map);
service.nearbySearch({
location: myLatLng,
radius: 500,
types: ['store']
}, processResults);
}

function processResults(results, status, pagination) {
if (status !== google.maps.places.PlacesServiceStatus.OK) {
return;
} else {
createMarkers(results);

if (pagination.hasNextPage) {
var moreButton = document.getElementById('more');

moreButton.disabled = false;

moreButton.addEventListener('click', function() {
moreButton.disabled = true;
pagination.nextPage();
});
}
}
}

function createMarkers(places) {
var bounds = new google.maps.LatLngBounds();
var placesList = document.getElementById('places');
var i;
for (null; i < places.length; i++) {
var place;
place = places;
var image = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};

var marker = new google.maps.Marker({
map: _map,
icon: image,
title: place.name,
position: place.geometry.location
});

placesList.innerHTML += '<li>' + place.name + '</li>';

bounds.extend(place.geometry.location);
function callback(results, status) {


if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
var place = results;
createMarkers(results);
}
}
}
}

_map.fitBounds(bounds);
}

var options = {
timeout: 10000,
maximumAge: 11000,
enableHighAccuracy: true
};
//Success callback
var suc = function(p) {
console.log("geolocation success", 4);
//Draws the map initially
if (_map === null) {
currentLatitude = p.coords.latitude;
currentLongitude = p.coords.longitude;
drawMap();
getCurrentAddress(currentLatitude, currentLongitude);
} else {
myLatLng = new google.maps.LatLng(p.coords.latitude, p.coords.longitude);
}
//Creates a new google maps marker object for using with the pins
if ((myLatLng.toString().localeCompare(oldLatLng.toString())) !== 0) {
//Create a new map marker
var Marker = new google.maps.Marker({
position: myLatLng,
map: _map
});

}
oldLatLng = myLatLng;
};
var fail = function() {
console.log("Geolocation failed. \nPlease enable GPS in Settings.", 1);
};
var getLocation = function() {
console.log("in getLocation", 4);
};
//Execute when the DOM loads

function onDeviceReady() {
try {
if (navigator.geolocation !== null) {
document.getElementById("map_canvas").style.height = screen.height + "px";
navigator.geolocation.watchPosition(suc, fail, options);
}
} catch (e) {
alert(e.message);
}

try {
//hide splash screen
navigator.splashscreen.hide();
} catch (e) {}
}
document.addEventListener("deviceready", onDeviceReady, false);


function getCurrentAddress(currentLatitude, currentLongitude){
var latlng = new google.maps.LatLng(currentLatitude, currentLongitude);
var geocoder = new google.maps.Geocoder();
geocoder.geocode({'latLng': latlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
alert(results[1].formatted_address);
} else {
alert('No results found');
}
} else {
alert('Geocoder failed due to: ' + status);
}
});
}
var infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(_map);


function click_button_home() {
window.location.replace('index.html');
}

My api keys are as follow

PaulF_IntelCorp · ‎12-07-2015

Since your app does not appear to depend on any Cordova-specific APIs, I recommend that you first try to make it work in a browser. Then, from there, try to make it work in the Emulate tab. Once you've got it working in those two places, try to make it work in App Preview, using the Test tab or with the Debug tab.

We're not manned to debug pure JavaScript and HTML issues...

Patrick_H_4 · ‎12-08-2015

Well Ive tried this code on other IDEs and ot works fine, maybe its down to intel's poor layout