Dynamic App Connect Google Maps

We've created a database query which returns our addresses from a database table using Server Connect and DMXzone Database Connector.

Click the add new component button(1) and add server connect (2-3).

Select your server action containing the query with locations (1-4). 

Click on your page where you want to add the maps(1) and add a new component (2). Under display (3), select google maps (4).

Setup your API key by clicking the info button. This will take you to Google's API keys site, so just follow the instructions there (1). Then just paste the code here (2). Setup the map properties, navigation and controls options (3).

Enable the dynamic markers option (1). Select your data source (2). This is the database query, returned by your server action (3-5). 

Select the marker ID binding (1). Select the address or geo coordinates bindings. We store the locations in our database using their geo coordinates (2-3). If you store some information, like title and info in your database, you can bind them here as well (4-5). If you have custom marker icons, you can bind their dynamic URL in the custom image field. We leave this empty, as we want to use the default markers (6). 

Let's setup the map centering options.

Add a new dynamic attribute (1). Select address or latitude and longitude for map centering. Open google maps (2). We'd like to use latitude and longitude (3). 

Bind the dynamic data for the latitude (1). We select the latitude binding from our database query This returns the first record's latitude from the query (2-3). We do the same for longitude (4-5). 

And we are done! Our map is now displaying the records from our database and it is also centered on the first marker.

You can click the markers in order to see the info popup. That's how easy it is to add dynamic markers to App Connect Google Maps.