jxycms
6/19/2017 - 5:21 AM
google map application in kentico
google map application in kentico
Reference:
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.11.3.min.js"><\/script>')</script>
<script src='app_themes/ecobud/js/bootstrap.min.js'></script>
<script src='app_themes/ecobud/js/vendor/jquery-ui.min.js'></script>
<script src='app_themes/ecobud/js/vendor.min.js'></script>
<script src='app_themes/ecobud/js/main.min.js'></script>
<script src='app_themes/ecobud/js/vendor/jquery-storelocator-plugin/libs/handlebars.min.js'></script>
<script src='https://maps.google.com/maps/api/js?key=AIzaSyC09QCbC3PDuqGsJ_8wlV2BwKDreg04958&region=AU'></script>
<script src='app_themes/ecobud/js/vendor/jquery-storelocator-plugin/plugins/storeLocator/jquery.storelocator.js'></script>
<script src='app_themes/ecobud/js/maps.js'></script>
<link href='app_themes/ecobud/css/storelocator.min.css' rel='stylesheet' type='text/css'>
1. map.js:
$(function () {
$('#bh-sl-map-container').storeLocator({
//'maxDistance': true,
'slideMap': false,
//'pagination': true,
'locationsPerPage': 4,
'lengthUnit': 'km',
'fullMapStart': true,
'autoGeocode': true,
// 'defaultLoc': true,
// 'defaultLat': '-33.8885673',
// 'defaultLng' : '151.0896862',
'markerImg': 'app_themes/ecobud/images/stockistPin.png',
'dataLocation': 'CMSPages/EcobudOffices.aspx',
//'dataLocation': 'app_themes/ecobud/data/locations.xml',
'infowindowTemplatePath': 'app_themes/ecobud/js/vendor/jquery-storelocator-plugin/plugins/storeLocator/templates/infowindow-description.html',
'listTemplatePath': 'app_themes/ecobud/js/vendor/jquery-storelocator-plugin/plugins/storeLocator/templates/location-list-description.html',
'KMLinfowindowTemplatePath': 'app_themes/ecobud/js/vendor/jquery-storelocator-plugin/plugins/storeLocator/templates/kml-infowindow-description.html',
'KMLlistTemplatePath': 'app_themes/ecobud/js/vendor/jquery-storelocator-plugin/plugins/storeLocator/templates/kml-location-list-description.html',
'mapSettings': {
zoom: 10,
//mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDoubleClickZoom: true,
scrollwheel: false,
navigationControl: false,
//draggable: false
}
// catMarkers : {
// 'BeoStore' : ['app_themes/ecobud/images/storeMarker.png', 38, 38],
// 'Store in Store' : ['app_themes/ecobud/images/dealerMarker.png', 38, 38]
// }
});
});
2. create a custom web part
aspx file:
<%@ Control Language="C#" AutoEventWireup="true" Inherits="CMSWebParts_Ecobud_OfficesLocatorNoForm" CodeFile="~/CMSWebParts/Ecobud/OfficesLocatorNoForm.ascx.cs" %>
<div class='bh-sl-container'>
<div class='bh-sl-form-container text-center'>
<div class='form-input'>
<input id='bh-sl-address' name='bh-sl-address' placeholder='Enter your post code or suburb' type='text'>
</div>
<button id='bh-sl-submit' type='submit'>Find a Stockist</button>
</div>
<div class='bh-sl-map-container' id='bh-sl-map-container'>
<div class='bh-sl-map' id='bh-sl-map'></div>
<div class='bh-sl-loc-list'>
<ul class='list'></ul>
</div>
</div>
</div>
aspx.cs file:
keep default
3. create a custom table to store location information
4. put the files below in CMSPages, this file is used to transfer custom table data to xml file which is same as locations.xml
aspx file:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="EcobudOffices.aspx.cs" Inherits="CMSPages_EcobudOffices" %>
<%@ OutputCache Duration="180" VaryByParam="None" Location="Server"%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>
aspx.cs file:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Text;
using System.Web.UI.WebControls;
using System.Data;
using System.Xml;
using CMS.Helpers;
using CMS.CustomTables;
public partial class CMSPages_EcobudOffices : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
HttpResponse response = Context.Response;
// Render XML
response.Clear();
response.ClearContent();
response.ContentType = "text/xml";
response.ContentEncoding = Encoding.UTF8;
XmlDocument doc = GenerateXML();
doc.Save(response.Output);
RequestHelper.EndResponse();
}
XmlDocument GenerateXML()
{
XmlDocument doc = new XmlDocument();
XmlNode docNode = doc.CreateXmlDeclaration("1.0", "UTF-8", null);
doc.AppendChild(docNode);
XmlElement markersNode = doc.CreateElement("markers");
doc.AppendChild(markersNode);
(var query = CustomTableItemProvider.GetItems("Ecobud.EcobudOffices");) -- custom table
( TreeProvider treeProvider = new TreeProvider(SiteContext.CurrentUser);
DocumentQuery query = treeProvider.SelectNodes("Ecobud.StoreLocation");) -- page type
foreach (CustomTableItem item in query)
{
XmlElement markerNode = doc.CreateElement("marker");
markerNode.SetAttribute("name", item.GetStringValue("OfficeName", ""));
markerNode.SetAttribute("lat", item.GetStringValue("OfficeLatitude", ""));
markerNode.SetAttribute("lng", item.GetStringValue("OfficeLongtitude", ""));
markerNode.SetAttribute("address", item.GetStringValue("OfficeAddress", ""));
markerNode.SetAttribute("city", item.GetStringValue("OfficeCity", ""));
markerNode.SetAttribute("country", item.GetStringValue("OfficeCountry", ""));
markerNode.SetAttribute("postal", item.GetStringValue("OfficePostcode", ""));
markerNode.SetAttribute("phone", item.GetStringValue("OfficePhone", ""));
markerNode.SetAttribute("web", item.GetStringValue("OfficeWebsite", ""));
markerNode.SetAttribute("logo-image", URLHelper.ResolveUrl(item.GetStringValue("OfficeLogo", "")));
markersNode.AppendChild(markerNode);
}
return doc;
}
}
** make autocomplete could only recognize post code and suburb
var options = {
types: ['(regions)'],
componentRestrictions: { country: "au" }
};