Login to the 42Windmills.com designer.
Create a new form, or select a form you wish to edit.
Add a new section to the form by selecting the green plus symbol next to the form name.
In the New Section pane, choose Yes for custom section (The red arrow in the screenshot)
Next, add the fields Street1, Street2, PostalCode, City and Country (all of type Text) to the form. It doesn't matter in which section you place these.
However, take notice that adding fields to a custom section is not possible.
You can change the names of the fields above, if you do so, you have to change these names in the code under step 3 accordingly.
The generator has automatically created a custom form control (.ascx) within the solution.
This provides an easy way for you to add your customizations to the 42Windmills platform.
First, locate the ascx in your Visual Studio project.
The control can be found in App.Web project in the ‘Controls’ map.
The name of your custom control will be “ctl<entityname>_<sectionname>Section.ascx, which in our case is: “ctlnewBuilding_LocationcustomSection.ascx”
Open up the .ascx file in Visual Studio (make sure you open it in Source view, not the Design view) and add the following just below the comments section:
Copy code<![CDATA[
<!-- Javascript includes -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="../scripts/Custom/maps.js"></script>
<!-- This is the Google Map -->
<div id="map_canvas" style="width:100%; height:400px"></div>
]]>
The code behind of the ascx contains some empty pre-generated methods.
Locate the
OnLoaded method and paste the following code into its body:
Copy code
<![CDATA[
if (newbuilding.IsNew)
{
// First time use, so no address info therefore we hide the map control.
Page.ClientScript.RegisterStartupScript(this.GetType(), "LoadGoogleMap", "hideMap();", true);
}
else
{
// Loading the Google Map with Javascript
Page.ClientScript.RegisterStartupScript(this.GetType(), "LoadGoogleMap", "initialize();", true);
// Collecting relevant address information
StringBuilder address = new StringBuilder();
address.Append(newbuilding.Street1);
address.Append(" ");
address.Append(newbuilding.Street2);
address.Append(" ");
address.Append(newbuilding.PostalCode);
address.Append(" ");
address.Append(newbuilding.City);
address.Append(" ");
address.Append(newbuilding.Country);
// Directing Google Maps to the location of newBuilding
Page.ClientScript.RegisterStartupScript(this.GetType(), "FindGoogleMapLocation",
"codeAddress('" + address.ToString() + "');", true);
}
]]>
Under App.Web locate the folder “scripts”.
Create a new folder “Custom”.
Create a new Javascript file named “maps.js”
Paste the following code into this file:
Copy code
<![CDATA[
// This is the Google Maps js object.
var map;
// Load the Google Maps.
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 16,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: true
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
// Hide the map from the form.
function hideMap()
{
document.getElementById("map_canvas").style.display = 'none';
}
// Show the map.
function showMap()
{
document.getElementById("map_canvas").style.display = 'block';
}
// Navigate to the specified address.
function codeAddress(address) {
var geocoder = new google.maps.Geocoder();
if (geocoder) {
geocoder.geocode({ 'address': address }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
}
]]>
You are now finished!
To test the application, start up the application and navigate to Buildings.
After you've created a new building, as soon as it is saved, the Google Maps
will show up and show you the location of the entered building address.