Back to API : Property School Locator (PSL) Html Control V3.0 - Demo Page

API : Property School Locator (PSL) Html Control V3.0 - Instruction Page

Our PSL API is a html controller with features that can be easily embedded to your own webpage. Choose one of the following two methods that fits your website needs.

Method 1: Standard Instruction

Step 1: You need to reference GoogleMap and API(Javascript and CSS) in HTML page. Please use your own google map app id.

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBIyNR2uZCRGVNchYzh9HLwH2oi9S0EYW8"></script>

<link href="https://www.findschool.ca/web/ApiV3/css?appid=apiv3demo&fid=1" type="text/css" rel="stylesheet"/>
<script src="https://www.findschool.ca/web/ApiV3/js?appid=apiv3demo&fid=1" type="text/javascript"></script>

If developers want to try this API, please send an email to support@findschool.ca. We will create a new AppID for you. 'fid' is feature ID which is always 1 for this API.

Step 2: Define a div to show PSL

<div id="schlocator" ></div>

Step 3: Create PSL and Done!

            var myOptions = {
                SID: "",
                DivMainID: "schlocator"
            }
            var schLocator = new sysparts.schlocator(myOptions);
            schLocator.searchAddress("3412 Marmac Crescent, Mississauga");

Yes, we just created a workable PSL in the page. By default it works in public mode because the SID is empty. If you'd like to see the member mode and you can try to give SID a value.(like: "psldemoclientid" ). If you are a web site provider, usually the SID is your client ID. We can separate API usage from each of your clients if you are interested in. You can charge more if a client has a high traffic web site. For the PSL object, developers can define a page level variable to store the instance of sysparts.schlocator(). It is reusable. The Div ID should be passed in while creating the object. Also developers can check the source code of this page to see how the API gets reused and how the resources gets cleaned for each refresh.

Step 4: Make it better.

            //event handler
            schLocator.onEvent = function (nEventCode, sMessage) {
                if ((nEventCode == 10) || (nEventCode == -1))
                    alert(nEventCode.toString() + ":" + sMessage);
            };

The API could fire several events. Developers can handle the events by creating a handler as above. Here are the event codes and their meanings.

			//-1: error.
			//1: search successful, return schools
			//2: search successful, not found schools
			//10: register event.

Register Event will be fired in public mode. When guest users reach school data access limit. The API fires this event. Web Site code can handle this event and redirect guest users to registration web page.

Step Extra: Use optimized Google Map Object.
Developers can create their own Google Map object and pass it into the API control including the optimized google map object. Below is an example of creating a google map object out side of PSL control and pass the map instance to API. If no map is passed into PSL control, it will create a google map object using default map settings. If the map is created out side of PSL control, developer has the responsibility to clean up or refresh relative resources.

        var myOptions = {
                SID: "",
                DivMainID: "schlocator",
                IsInnerMap: 0  //if you want to create google map object in your script, set it to 0;
        }
	schLocator = new sysparts.schlocator(myOptions);
	//event handler
        schLocator.onEvent = function (nEventCode, sMessage) {
                if ((nEventCode == 10) || (nEventCode == -1))
                    alert(nEventCode.toString() + ":" + sMessage);
         };
         if (myOptions.IsInnerMap == 0) {
                //to use the map you created, first you need to know the container div object in school locator.
                //then create the map in the container
                //the last is calling school locator control to do updates according to the map you pass in.
                var mapDiv = schLocator.getMapDiv();
                var myMap = createMySiteMap(mapDiv);
                //set your own map object
                schLocator.setMap(0, myMap);
         }
         //control is ready, let's search.
         schLocator.searchAddress(valadress);

        function createMySiteMap(mapDivObj) {
            var myLatLng = new google.maps.LatLng(43.644363478452504, -79.3758230805397);
            var myOptions = {
                maxZoom: 15,
                minZoom: 10,
                zoom: 13,
                center: myLatLng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            var myMap = new google.maps.Map(mapDivObj, myOptions);
            return myMap;
        }

Method 2: Bootstrap + jQuery

Give a Property Address or Geo Location:

Change Mode:

Code Difference between Standard API and This (Bootstrap + jQuery) Version

The only difference is adding a style flag in CSS and JS referencing lines.
Same as standard one you still need to reference GoogleMap, also (Bootstrap + jQuery) as the additional JS libraries, and PSL API(Javascript and CSS) in web page.

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
                <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>
                <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>

                <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBIyNR2uZCRGVNchYzh9HLwH2oi9S0EYW8" type="text/javascript"></script>
    
                <link rel="stylesheet" href= "https://www.findschool.ca/web/ApiV3/css?appid=apiv3demo&fid=1&style=1" type="text/css"/>
                <script src="https://www.findschool.ca/web/ApiV3/js?appid=apiv3demo&fid=1&style=1" type="text/javascript"></script>

NOTE: In findschool code referencing line there is a flag named style (style=1) which make the API using bootstrap styles. Without providing the flag API uses default standard style(0). Same as standard API feature ID is always 1 (fid=1).