WP: google map + kml + fancybox , 1st

https://diane-be-unique.com/wp-google-map-kml-fancybox-1st-preview/

New page 

<div style=”display:none”>
<!– google map api –>
<script src=”https://maps.googleapis.com/maps/api/js?v=3.exp”></script>

<!–additional js –>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js”></script>–>

<!–fancy box –>
<link href=”https://diane-be-unique.com/wp-content/themes/twentytwelve-child/js/fancybox/source/jquery.fancybox.css” rel=”stylesheet” />
<script src=”https://diane-be-unique.com/wp-content/themes/twentytwelve-child/js/fancybox/source/jquery.fancybox.js”></script>

<!–Map js–>
<script type=”text/javascript” src=”https://diane-be-unique.com/wp-content/themes/twentytwelve-child/map/google-map-with-kml.js?v=0.0.3″></script>
</div>
<!–before fancy box load image in content-window –>
<div style=”display:none” id=”content-window”></div>
<!–Map embedded here–>
<div id=”map_canvas” class=”flxmap-container” data-flxmap=”flxmap_5b6aa1633a00d” style=”width: 100%; padding-top: 65%; position: relative; overflow: hidden;” ><div style=”height: 100%; width: 100%; position: absolute; top: 0px; left: 0px; background-color: rgb(229, 227, 223);”>
</div>

javascript under get_stylesheet_directory_uri() 

 

var geocoder;
var map;
var bounds = new google.maps.LatLngBounds();

function initialize() {

var WestB = new google.maps.LatLng(-22.3333916359113,116.8073593093719);//113
var EastB = new google.maps.LatLng(-24.6041080920217, 150.2761288424672);//150
var SouthB = new google.maps.LatLng(-38.80800924240722,146.5778773090496);//43
var NorthB = new google.maps.LatLng(-15.81975210476544,142.4251316350543);//10
bounds.extend(WestB);
bounds.extend(EastB);
bounds.extend(SouthB);
bounds.extend(NorthB);
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-25.363882,131.044922); // Initial position of the map
var mapOptions = {
zoom:3,
center:latlng,
disableDefaultUI:true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles:
[{ featureType: “poi”,
elementType: “labels”,
stylers: [{ visibility: “off” }]}]
};

// Attach the map to the document
map = new google.maps.Map(document.getElementById(‘map_canvas’),
mapOptions);
map.fitBounds(bounds);

var src = ‘https://diane-be-unique.com/wp-content/themes/twentytwelve-child/map/postcode-map.kml?dummy=’+(new Date()).getTime();

// KML layer
var kmlLayer = new google.maps.KmlLayer(src, {
map: map,
preserveViewport : true,
suppressInfoWindows: true
});

kmlLayer.addListener(‘click’, function(kmlEvent) {
var des = kmlEvent.featureData.description;

$.fancybox([des],{
minWidth:240,
minHeight:400,
maxWidth :700,
Width: “70%”
}
); // From description of KML, Img displays with Pop-up window

}

google.maps.event.addDomListener(window, ‘load’, initialize);

 

kml file descript part for pictures 

 

<div di=”banneton-user” style=”font-size: larger;”>By Swindells</div>
<br>
<img src=”/wp-content/themes/twentytwelve-child/map/4170_Swindells_00.jpg” width=”90%” height=”auto”/>
<img src=”/wp-content/themes/twentytwelve-child/map/4170_Swindells_01.jpg” width=”90%” height=”auto”/>
<img src=”/wp-content/themes/twentytwelve-child/map/4170_Swindells_02.jpg” width=”90%” height=”auto”/>