Geo Map Integration

Geo Map Integration

To use the feature of Geo maps on your website and mobile apps, you need to generate API keys and use them on your website's admin panel. 

To generate a new API Key, please go to the following URL and follow the steps mentioned on the page - https://developers.google.com/maps/documentation/javascript/get-api-key#get-an-api-key 

You primarily need Google map API browser key to use maps for your website. If you want to use Google maps on mobile apps then you need to get Google maps API key generated for iOS and Android respectively. 

Make sure that you have enabled the APIs for iOS, Android and most importantly for JavaScript in Google API console, their names respectively are : 

  • Google maps SDK for iOS, 
  • Google maps Android API, and 
  • Google maps JavaScript API 

Once all the required keys have been generated you can paste them on maps config page on your website's admin panel by navigating to "Settings" > "Map". For now you can leave the "Google Map API Server Key" blank, as this is kept for future enhancements. 

The next step is to provide the settings by mapping the defined custom fields (that are there to hold the location related data) with the Geo map fields. 





You start by providing the country / region specific info this is same as country code. Address 1, Address 2, City, State, Postal Code and Country fields are straight forward. For Search field, you should select a field that you want the location search to be based on. Radius metric is related to the unit used to calculate the distance. 

Show distance on search can be selected, Show map while adding listing and allow drag drop marker to change location would let you see exact location on the map on the basis of entered location info, and you also have an option to drag the pointer shown to a desired place should you need to. 

Please do not select the same custom field for more than one map config field as it may lead to incorrect map generation and / or issues related to the way addresses are displayed on website / mobile apps.

 

Map Module

This module allows you to place Geo-maps with various listings as pointers, anywhere on the site.

1. You can set your own criteria for the listings to be shown on the map As an example you can see how we have displayed Popular 5 restaurants on home page on our demo - http://yelpclone.demos.crowdvox.com/ To create this module we created a content scope for popular restaurants first and then selected the "popular restaurant" as our filter for map module.





2. You can set the map module to show listings on a map, that are being listed on a page, automatically As an example you can see the restaurant category page of our yelp demo- http://yelpclone.demos.crowdvox.com/listings/index/category/category:Restaurants/ To create this module, in parameters tab of map module select content type- autodetect and in visibility tab select category page. You can similarly show map on search result pages too.

 

Please do not put more than one map on a single page as that would result in an error. 

Map Pointers

Crowd Vox also allows you to have custom pointers on your map.

Here's how it works:

1. Upload all your icons in directory:

/app/webroot/geo_images

2. Goto Backend > Settings > Map Icons

3. Select an icon, and check categories to assign that icon, and press submit.