Display map

functions.php

<?php /* Template Name: Carte */

function page_content() {
	?>
	<div class="map">
		<?php 
			$args = array(
				'post_type' => 'poi'
			);
			$the_query = new WP_Query( $args );

			if ( $the_query->have_posts() ) {
				while ( $the_query->have_posts() ) : $the_query->the_post(); 
					$location = get_field('address');
					$title = get_the_title();

					?>
						<div class="marker" data-lat="<?php echo esc_attr($location['lat']); ?>" data-lng="<?php echo esc_attr($location['lng']); ?>">

							<h2><?php echo esc_html( $title ); ?></h2>
							<p><?php echo esc_html( $location['address'] ); ?></p>
						</div>
					<?php
				endwhile;
			} else {
				// no posts found
			}
			wp_reset_postdata(); 
		?>
	</div>
	<?php
}
add_action('genesis_entry_content', 'page_content');

function add_scripts() {
	wp_enqueue_script( 'gmapsapi', 'https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap', array(), '1.0.0', true );
  	?>

	<style>
		.map {
			height: 600px;
			width: 100%;
		}
		.marker {
			display: none;
		}
		.entry-header {
			display: none;
		}
		h2 {
			font-size: 2rem;
		}
		.gm-style .gm-style-iw-c { 
			border-radius: 0;
			padding: 20px;
		}
		p {
			margin-bottom: 0 !important;
		}
		
		button.gm-ui-hover-effect img {
		 	width: 25px !important;
		 	height: 25px !important;
			margin: 0 !important;

		}
		
		button.gm-ui-hover-effect {
		 	top: -2px !important;
			right: -6px !important;
		}

    </style>

	<script>
	(function($) {
		var map;
		var infoWindow;
		
		function initMarker( $marker, map ) {
			// Get position from marker.
			var lat = $marker.data('lat');
			var lng = $marker.data('lng');
			var latLng = {
				lat: parseFloat( lat ),
				lng: parseFloat( lng )
			};

			// Create marker instance.
			var marker = new google.maps.Marker({
				position : latLng,
				map: map,
				icon: {
				  url: "https://maps.google.com/mapfiles/ms/icons/pink-dot.png"
				}
			});

			// Append to reference for later use.
			map.markers.push( marker );

			// If marker contains HTML, add it to an infoWindow.
			if( $marker.html() ){
				var infoWindowHtml = $marker.html();

				// Show info window when marker is clicked.
				google.maps.event.addListener(marker, 'click', function() {
					infoWindow.close();
					infoWindow.setContent(infoWindowHtml);
					infoWindow.open(map, marker);
				});
			}
		}
	
		function initMap($el) {
			infoWindow = new google.maps.InfoWindow();
			// Find marker elements within map.
			var $markers = $el.find('.marker');
			var mapArgs = {
				zoom : 3,
				center: new google.maps.LatLng(45.3156506, 16.6260921),
				mapTypeId : google.maps.MapTypeId.ROADMAP,
				styles : [
						{
							"featureType": "landscape",
							"elementType": "labels",
							"stylers": [
								{
									"visibility": "off"
								}
							]
						},
						{
							"featureType": "transit",
							"elementType": "labels",
							"stylers": [
								{
									"visibility": "off"
								}
							]
						},
						{
							"featureType": "poi",
							"elementType": "labels",
							"stylers": [
								{
									"visibility": "off"
								}
							]
						},
						{
							"featureType": "water",
							"elementType": "labels",
							"stylers": [
								{
									"visibility": "off"
								}
							]
						},
						{
							"featureType": "road",
							"elementType": "labels.icon",
							"stylers": [
								{
									"visibility": "off"
								}
							]
						},
						{
							"stylers": [
								{
									"hue": "#00aaff"
								},
								{
									"saturation": -100
								},
								{
									"gamma": 2.15
								},
								{
									"lightness": 12
								}
							]
						},
						{
							"featureType": "road",
							"elementType": "labels.text.fill",
							"stylers": [
								{
									"visibility": "on"
								},
								{
									"lightness": 24
								}
							]
						},
						{
							"featureType": "road",
							"elementType": "geometry",
							"stylers": [
								{
									"lightness": 57
								}
							]
						}
					]
			};
			var map = new google.maps.Map( $el[0], mapArgs );

			// Add markers.
			map.markers = [];
			$markers.each(function(){
				initMarker( $(this), map );
			});

			// Return map instance.
			return map;
		}
		
		$(document).ready(function($) {
			$('.map').each(function() {
				var map = initMap($(this));
			});
		});
	})(jQuery);
    </script>
	<?php
}
add_action( 'wp_head', 'add_scripts' );

?>