Configuration

After you have added all your Locations to our WebService, we will give your the PERSONAL-REST-AUTH-TOKEN. Copy this to the Snippet below an you can start with the default Configuration an Layout. Make sure that this Code-Block is before the includes AngularJS Files.

<script type="text/javascript">
var $locationApp = {
    api_token:     'PERSONAL-REST-AUTH-TOKEN',
    region:        'de', // Search Start Country for Google
};
</script>

Map Reloads

With this Option you can say the Map, that it has check the map for refresh. It will mean if you change the country, all old marker's will be removed an the news one will be loaded. These option will be necessary for handle the country borders.

    map_refresh:    true, // Rerefesh Map Marker if Location has changed to dieferent country

Customize the Layout

With this Plugin you have different ways the Result looks like, please take a look to our DEMO You can select multiple map sizes (16:9, 4:3, full, Media-Querys) for Larger Displays Tablet and above.

  full_xs:        true, // Full Map Size on Mobile Device
  map_size:       false, // Map Size ('16:9'; '4:3'; 'full'; false)

Headmaps

If you have a lot of marker's on your map, we will put it together to an heatmap, to modify this icon you can change this parameter and replace the default icons with your one.

  map_cluster_image_path: 'https://raw.githubusercontent.com/googlemaps/js-marker-clusterer/gh-pages/images/m', // m1-5.png

Notice: The file Name need to be

m1.png

m2.png

m3.png

m4.png

m5.png

Colorize your map

If you want to style your map. You can do it with the magic of google's map styler. After you have colorized your map click the Shop JSON button and copy that JSON-string to the config.

  map_style: [
        {
          "stylers": [
            { "hue": "#005eff" }
          ]
        }
      ],

The Overlay Layout

If you use jQuery in your Project and want to use the overlay Template, you can include some dependencies Make Sure jQuery is integrated before.

Then you can configure the Scrollbar of the result list. We do it by using jQuery custom content scroller

  result_over:    true, // Display Search/Results over the map
    scrollBars: {
        theme: 'minimal-dark',
    }

Add your Own Template Files

If you want create your own template-Files hold the Folder structure of the views folder.

├── views/
|    ├── infoWindow.html
|    ├── location.html
|    ├── map.html
|    ├── result.html
|    ├── search.html

Set the Base-URL to the Views Parent folder in the $locationApp config.

  template_base:     'CUSTOM-TEMPLATE-DIR',

Note: that the Script will look into your CUSTOM-TEMPLATE-DIR for the views folder.

Multilanguage

With the Own Templates engine you can create translation for every needed language.

For Example you use German and Englisch: Copy the views folder to an Subfolder called de and repeat it for en.

Now make all your translation an take care that your $locationApp config is modified in each language.

German:

template_base: $url+'/de'

Englisch:

template_base: $url+'/en'

Now you have the Translation for all your languages.

Extend Result Filtering

Some time it can be important to extend the filtering to find special offers which only have an limited locations. If you want the take a look into the Extend Filter - Demo.

To use this you have to modify the Templates,

View Templates

First edit views/result.html for displaying that flags.

<div class="haendlericons">
    <span *ngIf="standort.standort_info.indexOf('SEARCH_NAME1') !== -1" class="" >
        Flag 1 / some HTML
    </span>
    <span *ngIf="standort.standort_info.indexOf('SEARCH_NAME2') !== -1" class="" >
        Flag 2 / some HTML
    </span>
</div>

After that lets create the the Checkboxes views/search.html

<div class="checkbox" style="background-color:red">
    <label>
        <input type="checkbox" (ngModelChange)="onSubmit()" [(ngModel)]="filter['SEARCH_NAME1']"/>
        Flag 1
    </label>
</div>
<div class="checkbox" style="background-color:yellow">
    <label>
        <input type="checkbox" (ngModelChange)="onSubmit()" [(ngModel)]="filter['SEARCH_NAME2']"/>
        Flag 2
    </label>
</div>

WebService

and last one go to our WebService and modify your Locations and extend the Information Field with the params: SEARCH_NAME1, SEARCH_NAME2