var map; var map_infowindow; var search_infowindow; var geocoder; var default_centerLatitude = 49; var default_centerLongitude = -97; var default_startZoom = 4; var default_localZoom = 14; var default_mapType = google.maps.MapTypeId.ROADMAP; var current_centerLatitude; var current_centerLongitude; var current_zoom; var done_init = 0; //var iw_style = "overflow:hidden;line-height:1.35;white-space:nowrap;"; var location_circle = new google.maps.Circle({}); var location_marker = new google.maps.Marker({}); var location_image = new google.maps.MarkerImage('images/location_pin.png'); var layerA = 1; var layerB = 0; var layerR = 0; var layerT = 0; var layerM = 0; var layerO = 0; var pid = 0; // ===== Layer overlays // All var layerAOpts = { getTileUrl: function(tile, zoom) { var w = (tile.x + tile.y + 1) % 2; var url = "//tiles"+w+".ertyu.org/steven_nikkel/tower-tile-server.png?x="+tile.x+"&y="+tile.y+"&z="+zoom; url += "&ver=2"; return url; }, tileSize: new google.maps.Size(512, 512), minZoom: 1 }; var layerAMaps = new google.maps.ImageMapType(layerAOpts); var layerAID = 0; // Bell var layerBOpts = { getTileUrl: function(tile, zoom) { var w = (tile.x + tile.y) % 2; var url = "//tiles"+w+".ertyu.org/steven_nikkel/tower-tile-server.png?x="+tile.x+"&y="+tile.y+"&z="+zoom+"&pid=1"; url += "&ver=2"; return url; }, tileSize: new google.maps.Size(512, 512), minZoom: 1 }; var layerBMaps = new google.maps.ImageMapType(layerBOpts); var layerBID = 1; // Rogers var layerROpts = { getTileUrl: function(tile, zoom) { var w = (tile.x + tile.y + 1) % 2; var url = "//tiles"+w+".ertyu.org/steven_nikkel/tower-tile-server.png?x="+tile.x+"&y="+tile.y+"&z="+zoom+"&pid=3"; return url; }, tileSize: new google.maps.Size(512,512), minZoom: 1 }; var layerRMaps = new google.maps.ImageMapType(layerROpts); var layerRID = 2; // Telus var layerTOpts = { getTileUrl: function(tile, zoom) { var w = (tile.x + tile.y) % 2; var url = "//tiles"+w+".ertyu.org/steven_nikkel/tower-tile-server.png?x="+tile.x+"&y="+tile.y+"&z="+zoom+"&pid=4"; return url; }, tileSize: new google.maps.Size(512,512), minZoom: 1 }; var layerTMaps = new google.maps.ImageMapType(layerTOpts); var layerTID = 3; // Other var layerOOpts = { getTileUrl: function(tile, zoom) { var w = (tile.x + tile.y) % 2; var url = "//tiles"+w+".ertyu.org/steven_nikkel/tower-tile-server.png?x="+tile.x+"&y="+tile.y+"&z="+zoom+"&pid="+pid; url += "&ver=2"; return url; }, tileSize: new google.maps.Size(512,512), minZoom: 1 }; var layerOMaps = new google.maps.ImageMapType(layerOOpts); var layerOID = 4; // ===== Create custom search control function GoogleSearchControl(controlDiv, map) { controlDiv.style.padding = '5px'; var controlUI = document.createElement('DIV'); controlUI.style.backgroundColor = 'transparent'; controlUI.style.cursor = 'pointer'; controlUI.style.textAlign = 'center'; controlUI.title = "Search"; controlDiv.appendChild(controlUI); var controltxtbox = document.createElement('input'); controltxtbox.setAttribute("id", "txt_googlesearch"); controltxtbox.setAttribute("type", "text"); controltxtbox.setAttribute("value", "Search"); controltxtbox.setAttribute("placeholder", "Search"); controlUI.appendChild(controltxtbox); google.maps.event.addDomListener(controltxtbox, 'change', function() {GoogleSearchAddress();}); google.maps.event.addDomListener(controltxtbox, 'focus', function() {if(this.value=='Search'){this.value='';}}); google.maps.event.addDomListener(controltxtbox, 'blur', function() {if(this.value==''){this.value='Search';}}); var controlbtn = document.createElement('input'); controlbtn.setAttribute("id", "btn_googlesearch"); controlbtn.setAttribute("type", "button"); controlbtn.setAttribute("value", "GO"); controlUI.appendChild(controlbtn); google.maps.event.addDomListener(controlbtn, 'click', function() {GoogleSearchAddress();}); } // ===== Create custom control button function CustomControlButton(controlDiv, map, innerHTML, title, actionFunction) { // Set CSS styles for the DIV containing the control // Setting padding to 5 px will offset the control // from the edge of the map controlDiv.style.padding = '5px'; controlDiv.style.paddingBottom = '15px'; // Set CSS for the control border var controlUI = document.createElement('DIV'); controlUI.style.backgroundColor = 'white'; // controlUI.style.borderStyle = 'solid'; // controlUI.style.borderWidth = '1px'; controlUI.style.cursor = 'pointer'; controlUI.style.textAlign = 'center'; controlUI.title = title; controlDiv.appendChild(controlUI); // Set CSS for the control interior var controlText = document.createElement('DIV'); controlText.style.fontFamily = 'Arial,sans-serif'; controlText.style.fontSize = '12px'; // controlText.style.paddingLeft = '4px'; // controlText.style.paddingRight = '4px'; // controlText.style.paddingTop = '2px'; // controlText.style.paddingBottom = '2px'; controlText.innerHTML = innerHTML; controlUI.appendChild(controlText); // Setup the click event listeners google.maps.event.addDomListener(controlUI, 'click', actionFunction); } // ===== Generate "link to this map" link function mapLink() { var layers = ''; if (layerA == 1) {layers += 'a';} if (layerB == 1) {layers += 'b';} if (layerR == 1) {layers += 'r';} if (layerT == 1) {layers += 't';} // if (layerM == 1) {layers += 'm';} if (layerO == 1) {layers += 'o';} var a="cancellsites.html" + "?lat=" + map.getCenter().lat().toFixed(6) + "&lng=" + map.getCenter().lng().toFixed(6) + "&zoom=" + map.getZoom() + "&type=" + map.getMapTypeId() + "&layers=" + layers + "&pid=" + pid; return a; } function makeLink() { var a = mapLink(); document.getElementById("maplink").innerHTML = 'Link to this MapMap Link'; } function goMapLink() { var a = mapLink(); location.href = a; } // ===== Handle Search function GoogleSearchAddress() { if (!done_init) { return; } var address = document.getElementById("txt_googlesearch").value; if (address=='' || address=='Search' || address=='Location Search') { return; } var location = map.getCenter(); geocoder.geocode({'address':address, 'location':location, 'region':"CA"}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { map.setCenter(results[0].geometry.location); map.fitBounds(results[0].geometry.viewport); center = map.getCenter(); current_centerLatitude = center.lat(); current_centerLongitude = center.lng(); var content = ""; for (var i in results[0].address_components) { if (content) { content = content + ', '+results[0].address_components[i].short_name; } else { content = results[0].address_components[i].short_name; } } search_infowindow.setContent(content); search_infowindow.setPosition(results[0].geometry.location); search_infowindow.open(map); } else if (status=="ZERO_RESULTS") { alert("Could not locate: " + address); } else { //friendly error messages alert("Search: " + status); } }); } // ===== Center map by geolocation function findLocation() { // Try W3C Geolocation if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { lat = position.coords.latitude; lng = position.coords.longitude; current_centerLatitude = lat; current_centerLongitude = lng; accuracy = position.coords.accuracy; pos = new google.maps.LatLng(lat,lng); zoom = default_localZoom; location_marker.setMap(null); location_circle.setMap(null); location_marker = new google.maps.Marker({ position: pos, map: map, icon: location_image, draggable: true, title: 'Current Location' }); location_circle = new google.maps.Circle({ center: pos, map: map, radius: accuracy, strokeColor: '#4400FF', strokeOpacity: 0.6, strokeWeight: 2, fillColor: '#4400FF', fillOpacity: 0.11, clickable: false }); //hide the error circle if the marker is dragged google.maps.event.addListener(location_marker, 'dragstart', function() { location_circle.setMap(null); }); bounds = location_circle.getBounds(); map.setZoom(zoom); map.fitBounds(bounds); if (map.getZoom() > zoom) { map.setZoom(zoom); } map.panToBounds(bounds); },function() { //error function -- firefox won't currently call this if decision is deferred location_marker.setMap(null); location_circle.setMap(null); //alert("No location information available right now"); var r = confirm('No location information available right now,\nproceed with manual locating?'); if (r == true) { center = map.getCenter(); current_centerLatitude = center.lat(); current_centerLongitude = center.lng(); pos = new google.maps.LatLng(current_centerLatitude,current_centerLongitude); location_marker.setMap(null); location_circle.setMap(null); location_marker = new google.maps.Marker({ position: pos, map: map, icon: location_image, draggable: true, title: 'Current Location' }); } },{maximumAge:900000}); //options //, timeout:3000 } else { //no geolocation location_marker.setMap(null); location_circle.setMap(null); //alert("No location information available"); var r = confirm('No location information available,\nproceed with manual locating?'); if (r == true) { pos = new google.maps.LatLng(current_centerLatitude,current_centerLongitude); location_marker.setMap(null); location_circle.setMap(null); location_marker = new google.maps.Marker({ position: pos, map: map, icon: location_image, draggable: true, title: 'Current Location' }); } } return false; } // ===== Auto resize the height of the map function changeHeight() { var hght; if (typeof self.innerHeight != 'undefined') { hght = self.innerHeight*0.60; } else { hght = document.documentElement.clientHeight*0.60; } document.getElementById("map_canvas").style.height=hght+"px"; google.maps.event.trigger(map, 'resize'); } // ===== Toggle visibility of overlays function togglelayer(form) { if (!done_init) { return; } //should work for all now //TODO: mobile for (var i=0; i'+data+''; //map_infowindow.setContent(data2); map_infowindow.setContent(data); map_infowindow.setPosition(new google.maps.LatLng(tlat,tlng)); map_infowindow.open(map); } } ); } // ===== Startup initialization function init() { var latlng = new google.maps.LatLng(default_centerLatitude, default_centerLongitude); var mapStyle = [ { "featureType":"transit", "elementType":"labels", "stylers":[{"visibility":"off"}] }, { "featureType":"poi", "elementType":"labels", "stylers":[{"visibility":"off"}] } ]; var mapOpts = { center: latlng, zoom: default_startZoom, mapTypeId: default_mapType, backgroundColor: 'white', // mapTypeControlOptions: {style:google.maps.MapTypeControlStyle.DROPDOWN_MENU}, scaleControl: true, // scaleControlOptions: { // position: google.maps.ControlPosition.TOP_LEFT //seems to be forced to BOTTOM_RIGHT // }, //scrollwheel: false, streetViewControl: true, draggableCursor: 'pointer', tilt: 0, styles: mapStyle }; map = new google.maps.Map(document.getElementById("map_canvas"), mapOpts); changeHeight(); google.maps.event.addListenerOnce(map, 'tilesloaded', init2); } function init2() { var lat = default_centerLatitude; var lng = default_centerLongitude; var zoom = default_startZoom; var maptype = default_mapType; // If there are any parameters at the end of the URL // they will be in location.search // looking something like "?lat=50&lng=-3&zoom=10&type=roadmap" // skip the first character, we are not interested in the "?" var query = location.search.substring(1); // split the rest at each "&" character to give a list of // "argname=value" pairs var pairs = query.split("&"); for (var i=0; i0)) { layerA = 1; layerB = 0; layerR = 0; layerT = 0; layerM = 0; layerO = 0; } // set map properties map.setCenter(new google.maps.LatLng(lat,lng)); map.setZoom(zoom); map.setMapTypeId(maptype); current_centerLatitude = lat; current_centerLongitude = lng; // add the custom map layers map.overlayMapTypes.insertAt(layerAID, layerAMaps); map.overlayMapTypes.insertAt(layerBID, layerBMaps); map.overlayMapTypes.insertAt(layerRID, layerRMaps); map.overlayMapTypes.insertAt(layerTID, layerTMaps); map.overlayMapTypes.insertAt(layerOID, layerOMaps); // init our infowindow object map_infowindow = new google.maps.InfoWindow({}); if (!layerA) { map.overlayMapTypes.setAt(layerAID, null); // hide } if (!layerB) { map.overlayMapTypes.setAt(layerBID, null); // hide } if (!layerR) { map.overlayMapTypes.setAt(layerRID, null); // hide } if (!layerT) { map.overlayMapTypes.setAt(layerTID, null); // hide } if (!layerO) { map.overlayMapTypes.setAt(layerOID, null); // hide } // Insert our layer toggles var layerControlDiv = document.createElement('DIV'); var layerInnerHTML = '
'+ ''+ ''+ ''+ // ''+ '
'+ ''+ 'Bell'+ ''+ ''+ 'Rogers'+ ''+ ''+ 'Telus'+ ''+ // ''+ // 'Mike'+ // ''+ ''+item.name+''; } else { layerInnerHTML += ''; } } layerInnerHTML += '
'; var layerControl = new CustomControlButton(layerControlDiv, map, layerInnerHTML, 'Layer toggles', function() {}); layerControlDiv.index = 1; map.controls[google.maps.ControlPosition.BOTTOM].push(layerControlDiv); // Insert the geolocation link // var locateControlDiv = document.createElement('DIV'); // var locateControl = new CustomControlButton(locateControlDiv, map, 'Geolocation', 'Geolocation', findLocation); // locateControlDiv.index = 1; // map.controls[google.maps.ControlPosition.TOP_LEFT].push(locateControlDiv); // document.getElementById("locate").innerHTML = 'Current Location'; // Insert the Direct Map link // var mapLinkControlDiv = document.createElement('DIV'); // var mapLinkControl = new CustomControlButton(mapLinkControlDiv, map, 'Map Link', 'Link to this Map', goMapLink); // mapLinkControlDiv.index = 1; // map.controls[google.maps.ControlPosition.TOP_LEFT].push(mapLinkControlDiv); // Make the link the first time when the page opens makeLink(); // Make the link again whenever the map changes google.maps.event.addListener(map, 'idle', makeLink); google.maps.event.addListener(map, 'maptypeid_changed', makeLink); // add a googleSearch box // var googleSearchControlDiv = document.createElement('DIV'); // var googleSearchControl = new GoogleSearchControl(googleSearchControlDiv, map); // googleSearchControlDiv.index = 1; geocoder = new google.maps.Geocoder(); search_infowindow = new google.maps.InfoWindow({}); // resize map when browser is resized if (typeof window.addEventListener != 'undefined') { window.addEventListener("resize", changeHeight, false); } else if (typeof document.addEventListener != 'undefined') { document.addEventListener("resize", changeHeight, false); } else if (typeof window.attachEvent != 'undefined') { window.attachEvent("onresize", changeHeight); } // Watch for clicks to display info windows google.maps.event.addListener(map, 'click', function(event) { var url="tower-point-server.php?" +"lat="+event.latLng.lat() +"&lng="+event.latLng.lng() +"&zoom="+map.getZoom() +"&ver=2" ; //if (layerA == 1) {url += "&pid=-1";} if (layerB == 1) {url += "&pid[]=1";} if (layerR == 1) {url += "&pid[]=3";} if (layerT == 1) {url += "&pid[]=4";} if (layerO == 1) {url += "&pid[]="+pid;} downloadUrl( url, function(data,rstatus) { if ((data != "") && (data != undefined)) { //var data2 = '
'+data+'
'; //map_infowindow.setContent(data2); map_infowindow.setContent(data); map_infowindow.setPosition(event.latLng); map_infowindow.open(map); } } ); }); done_init = 1; } window.onload = init;