Displaying a Google Map using co-ordinates from a Record

Google Maps API provide several methods to display a map tile on your website.

This document explains how to use co-ordinate values from a Table record to control the viewport of a Google Map embedded in the page, including the display of a marker in the middle of the map at the actual co-ordinate position.

To use this you do not need to register your application with the Google Maps API.

Note: If you need to display multiple markers, see Using GeoRSS to show multiple markers on an embedded Google Map

Method

We assume you have a Table with two fields:

Latitude
Longitude

and these fields are included in your Query.

Note: This data could have been manually entered, or automatically pulled into the site using XML feeds from external sites.

Make a Custom View of your Query (or use an existing one) and edit it, to add the two fields.

Then click to edit in Source View.

Find the part which shows the two embeds for the latitude and longitude. They will look like this (albeit with slightly different numbers):

<img class="ncEmbed" alt="" data="Embed.14.6" src="../v/nc/GetEmbedImage.nc?t=Field%20%2D%20Latitude" />

<img class="ncEmbed" alt="" data="Embed.14.7" src="../v/nc/GetEmbedImage.nc?t=Field%20%2D%20Longitude" />

Now add the markup, shown highlighted below, around them:

<p style="display: none">
<span id="HiddenLat">

<img class="ncEmbed" alt="" data="Embed.14.6" src="../v/nc/GetEmbedImage.nc?t=Field%20%2D%20Latitude" />

</span>

<span id="HiddenLong">

<img class="ncEmbed" alt="" data="Embed.14.7" src="../v/nc/GetEmbedImage.nc?t=Field%20%2D%20Longitude" />

</span>
</p>

<div id="map_canvas" style="width: 400px; height: 500px">[map]</div>

This works by hiding the embeds by enclosing them in a P tag styled to be hidden, and then names the two embeds by wrapping them in individual SPAN tags.

Finally the 'map_canvas' DIV tag acts as a placeholder for where the map will be displayed.

This DIV is shown here for convenience, but could be embedded anywhere else on the constructed page.

Get a key

To use the Google Maps JavaScript API, you must register your app project on the Google API Console and get a Google API key which you can add to your app. Get your key here...

Now go to the Page where the Custom View will be embedded, and in the BE / Settings / Head Tags / Scripts, paste in the following:

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE&callback=initialize"
  type="text/javascript"></script>

<script type="text/javascript">
function initialize() {
var d = document;
var lLat = d.getElementById("HiddenLat").innerHTML;
var lLong = d.getElementById("HiddenLong").innerHTML;

var myLatlng = new google.maps.LatLng(lLat, lLong);
var myOptions = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({ position: myLatlng, map: map, title:""})
}
</script>

Translate: