Locator

Find a location near you

All locations

<p></p>
<p>Locator</p>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script src="https://ajax.googleapis.com/ajax/libs/handlebars/4.7.7/handlebars.min.js"></script>
<style></style>
<script>// <![CDATA[
'use strict';

/**
* Defines an instance of the Locator+ solution, to be instantiated
* when the Maps library is loaded.
*/
function LocatorPlus(configuration) {
const locator = this;

locator.locations = configuration.locations || [];
locator.capabilities = configuration.capabilities || {};

const mapEl = document.getElementById('gmp-map');
const panelEl = document.getElementById('locations-panel');
locator.panelListEl = document.getElementById('locations-panel-list');
const sectionNameEl =
document.getElementById('location-results-section-name');
const resultsContainerEl = document.getElementById('location-results-list');

const itemsTemplate = Handlebars.compile(
document.getElementById('locator-result-items-tmpl').innerHTML);

locator.searchLocation = null;
locator.searchLocationMarker = null;
locator.selectedLocationIdx = null;
locator.userCountry = null;

// Initialize the map -------------------------------------------------------
locator.map = new google.maps.Map(mapEl, configuration.mapOptions);

// Store selection.
const selectResultItem = function(locationIdx, panToMarker, scrollToResult) {
locator.selectedLocationIdx = locationIdx;
for (let locationElem of resultsContainerEl.children) {
locationElem.classList.remove('selected');
if (getResultIndex(locationElem) === locator.selectedLocationIdx) {
locationElem.classList.add('selected');
if (scrollToResult) {
panelEl.scrollTop = locationElem.offsetTop;
}
}
}
if (panToMarker && (locationIdx != null)) {
locator.map.panTo(locator.locations[locationIdx].coords);
}
};

// Create a marker for each location.
const markers = locator.locations.map(function(location, index) {
const marker = new google.maps.Marker({
position: location.coords,
map: locator.map,
title: location.title,
});
marker.addListener('click', function() {
selectResultItem(index, false, true);
});
return marker;
});

// Fit map to marker bounds.
locator.updateBounds = function() {
const bounds = new google.maps.LatLngBounds();
if (locator.searchLocationMarker) {
bounds.extend(locator.searchLocationMarker.getPosition());
}
for (let i = 0; i < markers.length; i++) {
bounds.extend(markers[i].getPosition());
}
locator.map.fitBounds(bounds);
};
if (locator.locations.length) {
locator.updateBounds();
}

// Get the distance of a store location to the user's location,
// used in sorting the list.
const getLocationDistance = function(location) {
if (!locator.searchLocation) return null;

// Use travel distance if available (from Distance Matrix).
if (location.travelDistanceValue != null) {
return location.travelDistanceValue;
}

// Fall back to straight-line distance.
return google.maps.geometry.spherical.computeDistanceBetween(
new google.maps.LatLng(location.coords),
locator.searchLocation.location);
};

// Render the results list --------------------------------------------------
const getResultIndex = function(elem) {
return parseInt(elem.getAttribute('data-location-index'));
};

locator.renderResultsList = function() {
let locations = locator.locations.slice();
for (let i = 0; i < locations.length; i++) {
locations[i].index = i;
}
if (locator.searchLocation) {
sectionNameEl.textContent =
'Nearest locations (' + locations.length + ')';
locations.sort(function(a, b) {
return getLocationDistance(a) - getLocationDistance(b);
});
} else {
sectionNameEl.textContent = `All locations (${locations.length})`;
}
const resultItemContext = { locations: locations };
resultsContainerEl.innerHTML = itemsTemplate(resultItemContext);
for (let item of resultsContainerEl.children) {
const resultIndex = getResultIndex(item);
if (resultIndex === locator.selectedLocationIdx) {
item.classList.add('selected');
}

const resultSelectionHandler = function() {
selectResultItem(resultIndex, true, false);
};

// Clicking anywhere on the item selects this location.
// Additionally, create a button element to make this behavior
// accessible under tab navigation.
item.addEventListener('click', resultSelectionHandler);
item.querySelector('.select-location')
.addEventListener('click', function(e) {
resultSelectionHandler();
e.stopPropagation();
});
}
};

// Optional capability initialization --------------------------------------
initializeSearchInput(locator);
initializeDistanceMatrix(locator);

// Initial render of results -----------------------------------------------
locator.renderResultsList();
}

/** When the search input capability is enabled, initialize it. */
function initializeSearchInput(locator) {
const geocodeCache = new Map();
const geocoder = new google.maps.Geocoder();

const searchInputEl = document.getElementById('location-search-input');
const searchButtonEl = document.getElementById('location-search-button');

const updateSearchLocation = function(address, location) {
if (locator.searchLocationMarker) {
locator.searchLocationMarker.setMap(null);
}
if (!location) {
locator.searchLocation = null;
return;
}
locator.searchLocation = {'address': address, 'location': location};
locator.searchLocationMarker = new google.maps.Marker({
position: location,
map: locator.map,
title: 'My location',
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 12,
fillColor: '#3367D6',
fillOpacity: 0.5,
strokeOpacity: 0,
}
});

// Update the locator's idea of the user's country, used for units. Use
// `formatted_address` instead of the more structured `address_components`
// to avoid an additional billed call.
const addressParts = address.split(' ');
locator.userCountry = addressParts[addressParts.length - 1];

// Update map bounds to include the new location marker.
locator.updateBounds();

// Update the result list so we can sort it by proximity.
locator.renderResultsList();

locator.updateTravelTimes();
};

const geocodeSearch = function(query) {
if (!query) {
return;
}

const handleResult = function(geocodeResult) {
searchInputEl.value = geocodeResult.formatted_address;
updateSearchLocation(
geocodeResult.formatted_address, geocodeResult.geometry.location);
};

if (geocodeCache.has(query)) {
handleResult(geocodeCache.get(query));
return;
}
const request = {address: query, bounds: locator.map.getBounds()};
geocoder.geocode(request, function(results, status) {
if (status === 'OK') {
if (results.length > 0) {
const result = results[0];
geocodeCache.set(query, result);
handleResult(result);
}
}
});
};

// Set up geocoding on the search input.
searchButtonEl.addEventListener('click', function() {
geocodeSearch(searchInputEl.value.trim());
});

// Initialize Autocomplete.
initializeSearchInputAutocomplete(
locator, searchInputEl, geocodeSearch, updateSearchLocation);
}

/** Add Autocomplete to the search input. */
function initializeSearchInputAutocomplete(
locator, searchInputEl, fallbackSearch, searchLocationUpdater) {
// Set up Autocomplete on the search input. Bias results to map viewport.
const autocomplete = new google.maps.places.Autocomplete(searchInputEl, {
types: ['geocode'],
fields: ['place_id', 'formatted_address', 'geometry.location']
});
autocomplete.bindTo('bounds', locator.map);
autocomplete.addListener('place_changed', function() {
const placeResult = autocomplete.getPlace();
if (!placeResult.geometry) {
// Hitting 'Enter' without selecting a suggestion will result in a
// placeResult with only the text input value as the 'name' field.
fallbackSearch(placeResult.name);
return;
}
searchLocationUpdater(
placeResult.formatted_address, placeResult.geometry.location);
});
}

/** Initialize Distance Matrix for the locator. */
function initializeDistanceMatrix(locator) {
const distanceMatrixService = new google.maps.DistanceMatrixService();

// Annotate travel times to the selected location using Distance Matrix.
locator.updateTravelTimes = function() {
if (!locator.searchLocation) return;

const units = (locator.userCountry === 'USA') ?
google.maps.UnitSystem.IMPERIAL :
google.maps.UnitSystem.METRIC;
const request = {
origins: [locator.searchLocation.location],
destinations: locator.locations.map(function(x) {
return x.coords;
}),
travelMode: google.maps.TravelMode.DRIVING,
unitSystem: units,
};
const callback = function(response, status) {
if (status === 'OK') {
const distances = response.rows[0].elements;
for (let i = 0; i < distances.length; i++) {
const distResult = distances[i];
let travelDistanceText, travelDistanceValue;
if (distResult.status === 'OK') {
travelDistanceText = distResult.distance.text;
travelDistanceValue = distResult.distance.value;
}
const location = locator.locations[i];
location.travelDistanceText = travelDistanceText;
location.travelDistanceValue = travelDistanceValue;
}

// Re-render the results list, in case the ordering has changed.
locator.renderResultsList();
}
};
distanceMatrixService.getDistanceMatrix(request, callback);
};
}
// ]]></script>
<script>// <![CDATA[
const CONFIGURATION = {
"locations": [
{"title":"FotoHub @ Forum","address1":"583 Orchard Road, Forum The Shopping Mall #B1-22","address2":"Singapore","coords":{"lat":1.3062073,"lng":103.8285818},"placeId":"ChIJQe8Ik4wZ2jERrxDZyqCDghI"},
{"title":"FotoHub @ Jurong Point","address1":"1 Jurong West Central 2, JP1, #B1-03B","address2":"Singapore","coords":{"lat":1.3399326,"lng":103.7061039},"placeId":"ChIJG31aNJMP2jERSl0cfGIVQc0"},
{"title":"FotoHub @ Raffles City","address1":"252 North Bridge Road","address2":"Singapore","coords":{"lat":1.2939211,"lng":103.8533887},"placeId":"ChIJp4zYJ6QZ2jER1T79i2P6eTs"},
{"title":"FotoHub @ Nex","address1":"23 Serangoon Central, NEX","address2":"Singapore","coords":{"lat":1.350896,"lng":103.8719571},"placeId":"ChIJ____r6YX2jER6K5pusHS6-I"},
{"title":"Fotohub @ Change Alley Mall","address1":"Raffles Place","address2":"Singapore","coords":{"lat":1.2841089,"lng":103.852015},"placeId":"ChIJkVfAkUAZ2jER7AcM29AGojw"},
{"title":"FotoHub @ Tampines Mall","address1":"4 Tampines Central 5","address2":"Singapore","coords":{"lat":1.3524522,"lng":103.9449768},"placeId":"ChIJpxRJuRE92jERAxCRa871FSA"},
{"title":"FotoHub @ ARK (HQ)","address1":"7 Gambas Crescent","address2":"Singapore","coords":{"lat":1.4451027,"lng":103.8128413},"placeId":"ChIJHYPAynsT2jER1VYeOWrSXyc"},
{"title":"FotoHub @ Westgate","address1":"3","address2":"Singapore","coords":{"lat":1.3343784,"lng":103.7427835},"placeId":"ChIJRWuRqA8Q2jERWqv8LDR7Ku0"}
],
"mapOptions": {"center":{"lat":38.0,"lng":-100.0},"fullscreenControl":true,"mapTypeControl":false,"streetViewControl":false,"zoom":4,"zoomControl":true,"maxZoom":17},
"mapsApiKey": "AIzaSyCyD5fBVYhvdORCGnMh9Yi0Dz8YpwNOLu4",
"capabilities": {"input":true,"autocomplete":true,"directions":false,"distanceMatrix":true,"details":false}
};

function initMap() {
new LocatorPlus(CONFIGURATION);
}
// ]]></script>
<script id="locator-result-items-tmpl" type="text/x-handlebars-template">// <![CDATA[
{{#each locations}}
<li class="location-result" data-location-index="{{index}}">
<button class="select-location">
<h2 class="name">{{title}}</h2>
</button>
<div class="address">{{address1}}<br>{{address2}}</div>
{{#if travelDistanceText}}
<div class="distance">{{travelDistanceText}}</div>
{{/if}}
</li>
{{/each}}
// ]]></script>
<div id="map-container">
<div id="locations-panel">
<div id="locations-panel-list"><header>
<h1 class="search-title"><img src="https://fonts.gstatic.com/s/i/googlematerialicons/place/v15/24px.svg" /> Find a location near you</h1>
<div class="search-input"><input id="location-search-input" placeholder="Enter your address or zip code" type="text" />
<div id="search-overlay-search" class="search-input-overlay search"><button id="location-search-button"> <img class="icon" src="https://fonts.gstatic.com/s/i/googlematerialicons/search/v11/24px.svg" alt="Search" /> </button></div>
</div>
</header>
<div class="section-name" id="location-results-section-name">All locations</div>
<div class="results"></div>
</div>
</div>
<div id="gmp-map"></div>
</div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCyD5fBVYhvdORCGnMh9Yi0Dz8YpwNOLu4&callback=initMap&libraries=places,geometry&solution_channel=GMP_QB_locatorplus_v4_cABD" async="" defer="defer"></script>

Photobook Collection

PhotoBook Collection

Collection

PhotoBook Voucher

Themes

Customer Favourites

Blog

Prints

Photo Prints

Blog

Related Products

Metal Print

Home Decor

Home Decor

Related Products

Blog

FotoAcrylic

FotoMini

Personalised

Greeting Card Collection

Mugs Collection

Voucher

FotoStrip

Calendar

Calendars

Themes

Calendar

Passport & Visa

More Countries

More Countries

Special Collections

About

Travel Memories

Find a location near you