Reactor allows you to add Google Maps with geolocation to your app.

Let’s say that you are building an app that shows all the restaurants in downtown San Diego, and has a map that pinpoints each restaurant location. In addition, the map will show the location of the app user, so they can see how close they are to each restaurant. In the app, you want to display all the restaurants, then show a map with both the user location and the restaurant location.

We’re using restaurants as an example, but this same method works for any location, whether it’s stores, churches, historical sites, etc. Let’s talk about how to make this app with Reactor.

The Restaurant List

These restaurants are posts in WordPress, so the first thing you can do is create an app page to list the restaurants. Just choose a list from the page type dropdown, and add a custom post type, category, or whatever you use for your restaurant posts.

The Maps

The next thing we need to do is create a map for each restaurant location.

We’ll create one map with multiple pins, and link to that same map from each restaurant post. (You could create separate maps for each restaurant, but that’s a little more time consuming)

To create the map, create a new app page, and choose Google Map as the page type. Scroll down to the “Individual Address” box, and fill out the details for the first restaurant.

Note: If you are displaying a single business with multiple locations that are all listed on Google Places, use the “Store Name” field instead of the Individual Address box. For example, “Starbucks” would show all local Starbucks locations. Do not use both the store name field and the individual address field, it’s one or the other.

Once you’re done with the first restaurant, click “Add Another Address” at the bottom left. Continue until all addresses are added, then save.

You can add any type of details you want to the Details field, including links. This will show up when the user clicks on the map pin.

Next, go to App Menus and add this page to your menu. That’s it for the map, now we need to link to this map from each restaurant listing.

We could stop here and just let people click our “Map” menu link, but it would be nice to have a link to the map inside each WordPress post. We don’t want this link to appear on our website, because it’s just for the app. We also don’t want to have to add this link manually, because there are a lot of restaurant listings.

That’s where the power of Reactor template hooks come in. We can create a custom plugin with a few lines of code that adds the Map link to all restaurant posts automatically.

Link to the map

To put a link for “View Restaurant Map” on each restaurant post, we need to create a custom plugin that uses Reactor template hooks.

Basically this allows you to dynamically insert anything into your WordPress content that only appears in the app. In our case, we’ll add a link to view our map.

Our custom plugin is just a folder with a single php file in it, that has this code:

[php]
<?php
/*
Plugin Name: Reactor maps data
Plugin URI: http://reactor.apppresser.com
Description: Custom data for the mobile app
Version: 0.0.1
Author: Reactor Team
*/

function custom_json_api_prepare_post( $post_response, $post, $context ) {

// Uncomment the lines below if you want to filter by custom post type
// if ( ‘restaurants’ != $post[‘post_type’] )
// return $post_response;

$post_response[‘do_api_action’][‘default’][‘above_content’] = ‘<a href="#" applink="Restaurant Map" class="map-link"><i class="icon ion-location"></i> View map</a>’;
}

return $post_response;
}
add_filter( ‘json_prepare_post’, ‘custom_json_api_prepare_post’, 10, 3 );
[/php]

This code adds some data to the WP-API on your WordPress site, that we pull into the app and display. With that plugin installed and activated on your WordPress site, restaurant listings in the app will now look similar to this image. Clicking on “View Map” will go to the map page that you already created.

You will want to change the applink to be your map page title, if it’s different than “Restaurant Map.” You can also filter by custom post type, or any other variable.

The Power of Template Hooks

Template hooks are incredibly powerful, they allow you to output almost anything dynamically into your app content.

In this example we used a simple link, but you could add an audioplayer with custom source based on the post, video, images, content blocks, and much more.

To learn more about template hooks, or google maps, please consult our documentation.