Identification of script that is being used for maps - wordpress

Question

I want to create meetup groups in different countries for my mental health support website.
I've found a site that display a map within a wordpress page (http://www.cleargreen.com/community/practice-groups) where people can create events and manage them themselves, it uses a third party script you have to login to (https://www.cleargreen.com/english/tensegrity/login.cfm?dsplyLanguageID=1).
I was wondering what script they are using? and how did they integrate it so well with wordpress?

Answer 1

You can use google maps api located on https://maps.googleapis.com/maps/api/js
And then in wordpress you are probably already using ACF plugin(if not http://www.advancedcustomfields.com/)
You can create custum field for google maps OR fields with latitude and longitude
Then in your them add
<?php $location = get_field("[YOUR FIELD NAME]", $post->ID); ?>
<script>
function initialize() {
var map_canvas = document.getElementById("[YOURE CONTAINER ID]");
var map_options = {
center: new google.maps.LatLng(<?php echo $location["lat"] ?>, <?php echo $location["lng"] ?>),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options)
var marker = new google.maps.Marker({
position: new google.maps.LatLng(<?php echo $location["lat"] ?>, <?php echo $location["lng"] ?>),
map: map,
icon: '[PATH TO YOUR PIN IMAGE]'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>