In order to add some google feature inside an Apex page, one have just to had some piece of code in header or footer part of a static region.
Notes: It's mandatory to get before an API key from the Google developper console.
Depending tke kind of API, there are some daily quotas (not a big deal for personal user sites)
In the above MAP sample, there is not yet a resize feature.
- Add a new blank page or go the second step if there is an existing page
- Add a static region into body content
- Add the following piece of code in the HEADER TEXT part (in the right property sheet)
For a MAP
<div id="map1" style="min-height: 700px" width="100%"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map1'), {
center: {lat: -14.245413, lng: -72.477596},
zoom: 7,
mapTypeControl: false,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL,
position: google.maps.ControlPosition.TOP_RIGHT
},
scaleControl: true,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// Optionnal: Draw a circuit
circuit();
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=<YOUR KEY>&callback=initMap"
async defer>
</script>
Optionnal: Drawing of a circuit:
function circuit() {
var myCoordinates = [
new google.maps.LatLng(-12.060809,-77.014160),
new google.maps.LatLng(-16.425548,-71.520996),
.....
new google.maps.LatLng(-12.060809,-77.025146)
];
var polyOptions = {
path: myCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1,
strokeWeight: 3
}
var it = new google.maps.Polyline(polyOptions);
it.setMap(map);
}
For a BLOG
<div id="blog"></div>
<script>
function displayBlog(response) {
document.getElementById("blog").innerHTML += response.content;
}
</script>
<script src="https://www.googleapis.com/blogger/v3/blogs/<YOUR BLOG ID>/posts/<YOUR POST ID>?key=<YOUR KEY>&fields=content&callback=displayBlog"
async defer>
</script>
Notes: It's mandatory to get before an API key from the Google developper console.
Depending tke kind of API, there are some daily quotas (not a big deal for personal user sites)
In the above MAP sample, there is not yet a resize feature.
Commentaires