Technical integration of Google Maps
Integrating Google Maps into job posting layouts
Downloading and preparing files for the job posting layout
The following ZIP file contains a complete example of a job posting layout with Google Maps integration.
- Google Maps Integration (.zip): File:InserateLayoutMitGoogleMap.zip
Note:
- All you need to set up Google Maps integration according to instructions is the directions.js file and the code snippets listed in the instructions.
- The following HTML files (among others) are also included: Blue_Carpet_4.htm and Blue_Carpet_4 -hardcoded.htm
- Blue_Carpet_4.htm contains an example in which address information is extracted using variables.
- Blue_Carpet_4 -hardcoded.htm presents another example in which the address information is simply hardcoded in the HTML.
Upload the files from the ZIP file in the order indicated below as attachments to the corresponding job posting layouts.
HTML 0 Blue_Carpet_4.htm Attachment:# 1 logo4.png 2 jqueryPlug.js 3 jquery.roundabout.js 4 bg.png 5 jolie.jpg 6 moore.jpg 7 roberts.jpg 8 directions.js 9 city.jpg
Not all attachments can be uploaded when creating the new job posting layout. Save and upload the remaining attachments in a second pass.
Configuring the Google API
Registering the Google API access key
Since June 2018, an API key is required to use Google Maps. Customers pay a fee for this access key, and must acquire it directly from Google. If you use Google Maps without a valid API key, the data will be sent with low resolution and with a watermark “For development purposes only” or the following error message: “This page can’t load Google Maps correctly”.
The Google API key is used to identify the browser application and is required when integrating Google Maps. Google counts all accesses to the API and shuts off access once a certain number of accesses is reached. You can buy more accesses if the application in question exceeds the limit set by Google for 90 days in a row.
Using the Google API access key in the layout
The following HTML snippet can be used as a template for Google Maps integration.
<!-- Google Maps Stuff--> <!-- Google API Key should be set! --> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=<GoogleAPIKey>sensor=false&libraries=places"></script> <script type="text/javascript" src="[document.attachement8]"></script>
The placeholder <GoogleAPIKey> stands for the API key issued by Google. The variable [document.attachement8] points to the JavaScript file (directions.js) that is responsible for the correct behavior of Google Maps integration.
Example of Google Maps integration
If you want to enter the Google API key in the solution, you can do this e.g. with a user-defined field. In the following HTML snippet, the variable [Niederlassung.BenutzerdefText1] is used to access the relevant field in the solution. The field [Niederlassung.BenutzerdefText1] is part of the branch office information.
<!-- Google Maps Stuff--> <!-- Google API Key should be set! --> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&[IF Niederlassung.BenutzerdefText1]key=[Niederlassung.BenutzerdefText1]&[END]sensor=false&libraries=places"></script> <script type="text/javascript" src="[document.attachement8]"></script>
The source code would then look like this:
<!-- Google Maps Stuff--> <!-- Google API Key should be set! --> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyB8PYh2EdHLwgYdkW5UO54zDClATrnlRMU&sensor=false&libraries=places"></script> <script type="text/javascript" src="/Vacancies/4/Description/1?ShowDocument=8"></script>
Configuring map location information
The location information (address) that you want to use for the Google map must be present in the job posting layout. Everything that appears in the element with id="location" is read out (using JavaScript) and used to represent the location on the map.
An additional element with id="infowindow-content" defines the information that will be shown in the info window. In other words, everything that appears in the <span id="infowindow-content">...</span> block will be displayed in the info window on the map. Entire HTML constructs can be presented in this way.
If no location information is present at all (i.e. if the id ="location" block is empty), then the HTML block marked with id="default-no-map" will be displayed by default, and Google Maps will not be displayed (i.e. the whole area marked with the element id="map-panel"; see the section on Integrating Google Maps into job posting layouts).
Notes:
For geocoding (transformation into latitude and longitude), you must enter at least a street and a city or town.
Address information can be extracted using variables (see the section on Configuring location information using variables).
If you do not want the address information to be visible in the job posting, it must be hidden via CSS. However, the address information must always be included in the job posting layout.
Example: Location and info-window definition with hardcoded address
In the following example, the address information is hardcoded in the source code.
<span id="infowindow-content">
Blue Carpet France Ltd
</span>
<span id="location">
Rue Montmartre 64
75002 Paris
France
</span>
Configuring location information using variables
Variables can be used to dynamically extract address information from Umantis. For example, if you want to display the address of a branch office, the job posting layout must first use the variable in which that information is stored.
Example: Location and info-window definition (full address)
In the following example, the address of the relevant branch office is used to find the location. The complete address of the branch office is displayed in the info window.
[IF Company.Address]
[IF Company.Municipality]
[IF Inserat.Titel7]<h2>[Inserat.Titel7]</h2>[END]
[IF Company.Name]<b>[Company.Name]</b>[END]<br>
<span id="infowindow-content">
<span id="location">
[IF Company.Address][Company.Address][END]<br>
[IF Company.Postalcode][Company.Postalcode][END]
[IF Company.Municipality][Company.Municipality][END]<br>
[IF Firma.Land][Firma.Land][END]
</span>
</span>
[END]
[END]
Example: Location and info-window definition (company name only)
In the following example, the address of the relevant branch office is used to find the location. In contrast to the previous example, however, only the name of the branch office is displayed.
<span id="infowindow-content">
[IF Company.Name][Company.Name][END]
</span>
<span id="location">
[IF Company.Address][Company.Address][END]<br>
[IF Company.Postalcode][Company.Postalcode][END]
[IF Company.Municipality][Company.Municipality][END]<br>
[IF Firma.Land][Firma.Land][END]
</span>
Integrating Google Maps in the job posting layout
The following HTML blocks can be used to integrate both Google Maps and an alternative to the map in the job posting layout.
<!--Start Google Maps -->
<div id="map-panel">
<div id="map-canvas"></div>
<div id="directionsPanel"></div>
<div id="button-panel">
<input type="text" id="startTextBox" placeholder="Start" style="width: 140px;" />
<button id = "geolocate-button" onclick="geolocateUser()">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8
/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADdYAAA3WAZBveZwAAAAZdEVYdFNvZnR3YXJlAHd3dy5pbmtzY2FwZS5vcmeb7jwaAAAB
/klEQVQ4T6WTyytEcRTHZ6yIUJQFDUUew9y58767SVlTUyykKMnCgp2xmo2dx8KSslCT2HmvZWEhZpKkiOIPIJIpeXy+t3uR7Jz69jvn+z3n/B73XM9v8
/v9ZZFIZBSshEKhNnH4q+FweIrVZyf9Yd5YLFZFwjC4B+8UnJqm6ZeIfwD3Bp5AOh6P16lGmm2Q1WAGPJL8zLpMw37WCunRaLQbfoH4DnyAdfRmu1gGMUzCI+st6AkGg5XQ3ztghmGUktOJfgEKNJ3nJOXune+dnXuU7HC9vEG9YrSxRCJRI5
/mtWgPyueKXRJHIN7BsnbWTvh74JIGhtMgB47RTcXsPoH+BjcrMUtwDjmA5iXuAzdw++5XIN4lFpdWzP1N/CP4bQXtFHc499YRG5SgYsuySsShtzhck+JkMllMg1bVKf6f0UlDckC3bsX4YyAHv+V+Kvw1uDyYduJW/B3WTRVowvQgC3pAvTb+Cbj68Yh5cq5ZOxXTeAj
/FW5R3XzgCeLWTeA0IbhJ4kbFrNPSnLtr6M5AgQ1S0tUkDTRhF/rONvmHoav4SLk0zHKSKlsIBAJ1kOugADQk41zF0I7S9RXgBtG0szY6ZAotu9gx/UzNJM6TqInUj3PoPiLcDtCdX1izwMpkMkV25U/TbGs8aTRH8ob7N8qnaAk+9XVs2zyeT9dWwuz6h9mkAAAAAElFTkSuQmCC">
</button>
<input type="text" id="endTextBox" placeholder="End" style="width: 68px; display: none;" />
<select id="mode" onchange="calcRoute();">
<option value="DRIVING" selected>Driving</option>
<option value="WALKING">Walking</option>
<option value="BICYCLING">Bicycling</option>
<option value="TRANSIT">Transit</option>
</select>
<button onclick="calcRoute();">GO!</button>
<div style="clear: both"></div>
<div id="text-panel">
<span id="text"></span>
</div>
</div>
</div>
<!-- End Google Maps -->
Notes:
All defined elements with an ID are used by JavaScript. If the IDs are modified or elements are removed, the JavaScript must also be changed accordingly.
Defining the Google Maps fallback block
If no location information is present at all (i.e. if the id ="location" block is empty), then the HTML block marked with id="default-no-map" will be displayed by default, and Google Maps will not be displayed (i.e. the whole area marked with the element id="map-panel").
In the following example, an image will be displayed instead of Google Maps if no address has been specified.
<!-- Default Div: Dieses Div wird geladen, falls kein Element mit id="location" gefunden wurde und somit keine Map geladen wird -->
<div id="default-no-map" style="z-index: 9999; width: 328px; margin: 0 auto; display: none; overflow: hidden;">
<a href="http://de.wikipedia.org/wiki/St._Gallen" target="_blank"><img src="[document.attachement9]" alt="" /></a>
</div>
<!--Ende Default Div -->
Configuring the Google Maps route calculation options
The following options define which route calculation options should be offered.
<option value"DRIVING" selected> <!-- replace this comment with your Text for Driving--> </option> <option value"WALKING"> <!-- replace this comment with your Text for Walking--> </option> <option value"BICYCLING"> <!-- replace this comment with your Text for Bicycling--> </option> <option value"TRANSIT"> <!-- replace this comment with your Text for Transit--> </option>
Notes:
Since modes of transport are not parameterized yet, they must still be modified by hand to fit the relevant language preferences.
Setting the selection value that is selected by default
The "selected" attribute can be used to specify which element should be preselected by default.
<option value"DRIVING" selected> <!-- replace this comment with your Text for Driving--> </option>
Overview of HTML elements
- id="location": Everything that appears in the element with id="location" is read out (by JavaScript) and used for geocoding.
- id="infowindow-content": Everything that appears in the element with id="infowindow-content" is displayed in the info window; entire HTML elements can be used here.
- id="map-panel": This div is where the Google Maps map is loaded with id = "map-canvas" , and it contains all other functionality in addition to the map.
- id="default-no-map": This element is loaded if no element with id="location" can be found in the layout.
Design configurations for Google Maps
Since Google Maps (e.g. its info windows with directions etc.) can disrupt the design of the rest of the job posting, it is recommended that you reconfigure its design accordingly. The following excerpt shows the 'CSS to be configured.
/* ----Google Maps Panel CSS------------------------------ */
div#map-panel {
width: 325px !important;
border: 1px solid #558BD5;
margin: 0px auto;
}
div#map-canvas {
margin-left: auto;
margin-right: auto;
width: 100%;
height: 250px;
}
div#button-panel {
padding: 6px;
}
div#button-panel input,div#button-panel select,div#button-panel button {
border: 1px solid #BBBBBB !important;
left: 0;
position: relative;
top: 0;
vertical-align: middle;
height: 20px !important;
}
div#button-panel button {
padding: 1px;
}
div#button-panel select {
padding: 1px;
}
div#button-panel input {
padding: 0 !important;
}
div#text-panel {
background-color: #FFA8A8;
padding: 4px;
display: none;
margin-top: 4px;
}
/* Google CSS for the directions window */
.adp-directions {
border-collapse: collapse;
cursor: pointer;
display: none;
}
.adp-placemark {
background: none repeat scroll 0 0 #EEEEEE;
border: 1px solid silver;
color: #000000;
cursor: pointer;
display: none;
margin: 10px 0;
vertical-align: middle;
}
.adp-summary {
font-weight: bold;
padding: 6px;
background-color: silver;
}
.adp-agencies {
font-size: 80%;
display: none;
}
.adp-details,.adp-legal {
color: #676767;
font-size: 0.8em;
text-align: right;
}
.gmnoprint a {
font-size: 0.9em;
font-weight: bold;
}
.pac-container {
width: 312px !important;
}
/* ---END Google Maps Panel CSS------------------------------- */
Notes:
- You must make sure that a height and width are assigned to the div that contains the map.
- The Input, Select and Button elements react very differently in browsers.
Integrating directions via CSS
In order for all directions and route information (e.g. public transit stops, intersections/exits for cars) to be visible, the corresponding CSS entries must be modified accordingly.
Advanced configurations
Configuring JavaScript functions
Default functionality
Displaying branch office with marker and info window
The first time the layout is loaded, the branch office is shown on the map and the info window is opened. To prevent the info window from opening automatically after loading, the following code snippet must be removed or commented out.
//open the infoWindow at the end of this function //comment this out if you don't want to open the infoWindow at end of loading infowindow.open(map, marker);
Notes:
- This code snippet occurs 3 times in the standard JavaScript code:
- 1. for the startTextBox
- 2. for the endTextBox
- 3. for geolocation
- The address of the branch office is used as text, but the text to be displayed can be placed in the HTML element with id="infowindow-content".
- Following a successful autocomplete or geolocation, the starting location is shown on the map with a marker and an info window.
Google autocomplete on the startTextBox
The startTextBox supports autocomplete. The placeholder for the startTextBox is “Start” and can be set directly in the HTML. If the placeholder= "Start" attribute is deleted in the HTML, Google generates a default text in the visitor’s browser language.
Calculating the route and displaying information
Once a starting location has been identified and the mode of transportation has been confirmed, Google calculates the time and distance from the starting location to the assigned branch office. This information is displayed below the input fields. If an error occurs, the error message will appear instead of the information message.
Geolocation
All HTML5-ready browsers allow users to share their location. The shared information is entered directly into the startTextBox. For older browsers, the geolocation button is hidden by a JavaScript function.
Notes:
- IE9 and IE10 under Windows 8 block location sharing by a default setting. (As of September 2013)
Extended functionality
Show circle
In the JavaScript code, a circle can be displayed to represent the precision of the geolocation information. However, this circle can get very large and cover the entire displayed map with its fill color. After loading the route, the color of the circle can also be changed.
The following settings can be configured for this circle:
- Show circle after geolocation
- Change circle outline color
- Change circle outline transparency
- Change circle fill color
- Change circle fill color transparency
Also worth knowing
Known Issues (as of September 2013)
- For clients with Windows 8 and IE9 / IE10, geocoding is unavailable due to insufficient permissions.
- Lines in the info window do not always wrap evenly.
- If the title uses bold formatting, for example, a scrollbar will always appear.
- Loading times may be longer when long distances are involved.