Google Maps Shortcode with Multiple & Custom Markers and Info Window

google-maps-shortcode.php

<?php
function store_map_enqueue_scripts(){
    global $cmb_booking, $cmb_review, $cmb_store, $cmb_user, $contentLang;

    //load full version or minified version of javascript
    //$prefix = WP_DEBUG ? '' : '.min';
    $prefix = NULL;

    // Google Fonts
    //wp_enqueue_style( 'natosans', '//fonts.googleapis.com/css?family=Noto+Sans:400,700');
    // Theme CSS files
    $GoogleMapsSRC = "https://maps.googleapis.com/maps/api/js";
    //key=YOUR_API_KEY&callback=initMap
    //http_build_query()
    $GoogleMapsQuery = array();
    $GoogleMepsApi = GetAdminOptions("google_maps_api");
    if($GoogleMepsApi != FALSE)
        $GoogleMapsQuery["key"] = $GoogleMepsApi;
        $GoogleMapsQuery["libraries"] = "geometry";
        $GoogleMapsQuery["language"] = $contentLang;
        $GoogleMapsQuery = http_build_query(apply_filters("googlemapsapi", $GoogleMapsQuery));
        $GoogleMapsSRC .= (!empty($GoogleMapsQuery))? "?".$GoogleMapsQuery : "";

				$query = new WP_Query(array(
						'post_type' => 'store',
						'posts_per_page' => -1
				));
				$places = array();
				while ($query->have_posts()) {
						$query->the_post();
						$store_ID = get_the_ID();
						$item = array(
								'ID' 		=> $store_ID,
								'title' => get_the_title(),
								'address' => get_post_meta( $store_ID, $cmb_store . "address", true),
								'open' => get_post_meta( $store_ID, $cmb_store . "openingTime", true),
								'close' => get_post_meta( $store_ID, $cmb_store . "closingTime", true),
								'location' => array(
										'lat' => (float)get_post_meta( $store_ID, $cmb_store . "latitude", true ),
										'lng' => (float)get_post_meta( $store_ID, $cmb_store . "longitude", true ),
								),
								'image' => get_the_post_thumbnail_url($store_ID,'thumbnail'),
								'url'  => get_the_permalink(),
						);
						array_push($places, $item);
				} wp_reset_query();

        $storeCode = array(
            'ajaxurl' => admin_url('admin-ajax.php'),
            'home_url' => site_url(),
            'map_center' => array( "latitude" => 34.695094, "longitude" => 135.193806),
            'marker_store' => TemplateURL . "/img/marker-store.png",
            'marker_user' => TemplateURL . "/img/marker-user.png",
            'close_btn' => TemplateURL . "/cycle_assets/btn_close.gif",
            'tip' => TemplateURL . "/cycle_assets/tipbox.png",
            'bookingButtonText' => __("Click here to book now.", 'tebura'),
            'stores' => $places
        );

				if (!wp_script_is( "GoogleMaps2", "enqueued" )) {
						wp_register_script("GoogleMaps2", $GoogleMapsSRC, false, THEME_VERSION );
						wp_enqueue_script( "GoogleMaps2" );
				}
        wp_localize_script( 'GoogleMaps2', 'storeLocations', $storeCode );

}
add_action( 'wp_enqueue_scripts', 'store_map_enqueue_scripts', 12);

function store_map_shortcode() {
		$a = shortcode_atts( array(
			'show' => true
		), $atts );

		if($a['show']===false)
			return '';

		ob_start();
	?>
			<div id="store_map_canvas" style="width:100%;height:500px"></div>
			<script>
				var geocoder;
				var map;
				var marker;
				var bounds = new google.maps.LatLngBounds();

				function initialize() {
					  map = new google.maps.Map(
					    document.getElementById("store_map_canvas"), {
					      center: new google.maps.LatLng(storeLocations.map_center.latitude, storeLocations.map_center.longitude),
								zoom: 14,
				        scrollwheel: false,
								navigationControl: true,
								navigationControlOptions: {
									position: google.maps.ControlPosition.TOP_LEFT
								},
								streetViewControl: false,
								backgroundColor: "#ffffff",
						    disableDefaultUI: false,
								mapTypeControl: false,
								scaleControl: true,
								styles: [{
										"stylers": [{
											"lightness": 40
										}, {
											"saturation": -40
										}]
									}, {
										featureType: "poi",
										elementType: "labels",
										stylers: [{
											"visibility": "off"
										}]
									}]
					    });
					  geocoder = new google.maps.Geocoder();
					  for (i = 0; i < storeLocations.stores.length; i++) {
							var contentString = '<div class="marker"><div class="tip"><div class="header"><h4 class="name">'+storeLocations.stores[i].title+'</h4><div class="portimg"><img src="'+storeLocations.stores[i].image+'" alt="'+storeLocations.stores[i].title+'"></div></div><div class="detials"><dl class="dtl"><dt><span>Address	</span></dt><dd>'+storeLocations.stores[i].address+'</dd></dl><dl class="dtl"><dt><span>Opening Hours:</span></dt><dd>'+storeLocations.stores[i].open+'</dd></dl><dl class="dtl"><dt><span>Closing Hours:</span></dt><dd>'+storeLocations.stores[i].close+'</dd></dl></div></div></div>';
							var infowindow = new google.maps.InfoWindow({
				          content: contentString,
				          maxWidth: 350
			        });

							marker = new google.maps.Marker({
														map: map,
														draggable: false,
														animation: google.maps.Animation.DROP,
														position: storeLocations.stores[i].location,
														icon: storeLocations.marker_store,
														content: contentString,
												});
												google.maps.event.addListener(marker, 'click', (function(marker, i) {
				                    return function() {
				                        var html = marker.content;
				                        infowindow.setContent(html);
				                        infowindow.open(map, marker, html);
				                    }
				                })(marker, i));
												bounds.extend(marker.getPosition());
											  map.fitBounds(bounds);
					  }
				}
				google.maps.event.addDomListener(window, "load", initialize);

				function geocodeAddress(locations, i) {
					  var title = locations[i][1];
					  var address = locations[i][2];
						var ImgURL = locations[i][7];
					  var url = locations[i][8];
					  geocoder.geocode({
					      'address': locations[i][2]
					    },

					    function(results, status) {
					      if (status == google.maps.GeocoderStatus.OK) {
					        var marker = new google.maps.Marker({
					          icon: storeLocations.marker_store,
					          map: map,
					          position: results[0].location,
					          title: title,
					          animation: google.maps.Animation.DROP,
					          address: address,
					          url: url
					        })
					        infoWindow(marker, map, title, address, url);
					        bounds.extend(marker.getPosition());
					        map.fitBounds(bounds);
					      } else {
					        console.log("geocode of " + address + " failed:" + status);
					      }
					    });
				}

				function infoWindow(marker, map, title, address, url) {
				  google.maps.event.addListener(marker, 'click', function() {
				    var html = '<div class="marker"><div class="tip"><div class="header"><h4 class="name">'+contents.title+'</h4><div class="portimg"><img src="'+contents.ImgURL+'" alt="'+contents.title+'"></div></div><div class="detials"><dl class="dtl"><dt><span>【住所】	</span></dt><dd>'+contents.Address+'</dd></dl><dl class="dtl"><dt><span>【ご利用時間】</span></dt><dd>'+'Open Time'+'</dd></dl><dl class="dtl"><dt><span>【収容台数】</span></dt><dd>'+'Close Time'+'</dd></dl></div><div class="btm"><img src="'+ImgURL+'" width="26" height="26"></div></div></div>';
				    var iw = new google.maps.InfoWindow({
				      content: html,
				      maxWidth: 350
				    });
				    iw.open(map, marker);
				  });
				}

				function createMarker(results) {
					  var marker = new google.maps.Marker({
					    icon: storeLocations.marker_store,
					    map: map,
					    position: results[0].location,
					    title: title,
					    animation: google.maps.Animation.DROP,
					    address: address,
					    url: url
					  })
					  bounds.extend(marker.getPosition());
					  map.fitBounds(bounds);
					  infoWindow(marker, map, title, address, url);
					  return marker;
				}
			</script>
	<?php
	return ob_get_clean();
}
add_shortcode( 'store_map', 'store_map_shortcode' );