Forums (Obsolete)

Member

roy.vanderploeg-gaprc - 10/10/2012 5:16:43 PM

Custom Google Maps with directions.

We have a page that is currently running a custom instance of Google maps for customers to get directions. We are calling this from a javascript window.open(Page.aspx?addr=" address variable passed in" ).

This functionality is working and giving us a google map and we have the ability to request directions. This is running in 5.5R2.

We are currently upgrading to 7 and we cannot get this functionality to work.
I upgraded the page to use the latest Google Maps functionality and it works great if I go to it out side of our kentico site. But once I try to call it from inside the custom user control, it thinks for a minute then it navigates to www.google.com. We upgraded a test server to 6 and it seemed to work.
I need Help.


Kentico Customer Success	kentico_martind2 - 10/12/2012 9:46:22 AM RE:Custom Google Maps with directions. Hi, could you please write down the code of your custom user control? After that I will be able to take a more detailed look at it. Thanks! Best regards, Martin Danko

Member

roy.vanderploeg-gaprc - 10/18/2012 10:37:56 AM

RE:Custom Google Maps with directions.

Ok I have split it into two different controls the first is working and displaying the map.

when I redirect to the other to get the directions, the page goes straight to google .com and shows a search bar.

Here is the code for the first

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="GetDrivingDirections.ascx.cs" Inherits="CMSApp.CMSWebParts.RohlWebParts.GetDrivingDirections" %>
 <script type="text/javascript">
     var directionDisplay;
     var directionsService = new google.maps.DirectionsService();
     var map;
     var map2;
     var gdir;
     var geocoder = null;
     var addressMarker;
     var name;
     var addr;
     var phone;

     function initialize() {
         geocoder = new google.maps.Geocoder();
         var latlng = new google.maps.LatLng(0, 0);
         var mapOptions = {
             zoom: 12,
             center: latlng,
             navigationControl: true,
             navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL },
             mapTypeId: google.maps.MapTypeId.ROADMAP
         }
         map = new google.maps.Map(document.getElementById('map'), mapOptions);
                  
         name = document.getElementById("p_lt_ctl00_DrivingDirections_name").value;
                  
         addr = document.getElementById("p_lt_ctl00_DrivingDirections_addr").value;
        
         phone = document.getElementById("p_lt_ctl00_DrivingDirections_phone").value;
         
         var contentstring = createHTMLNode(name + '<br/>Address: ' + addr + '<br/>Phone: ' + phone);

         var infowindow = new google.maps.InfoWindow({
             content: contentstring
         });

         geocoder = new google.maps.Geocoder();
         geocoder.geocode({ 'address': addr }, function (results, status) {
             if (status == google.maps.GeocoderStatus.OK) {
                 map.setCenter(results[0].geometry.location);
                 document.getElementById("p_lt_ctl00_DrivingDirections_addrLatLng").value = results[0].geometry.location;
                 var marker = new google.maps.Marker({
                     map: map,
                     position: results[0].geometry.location
                 });
                 infowindow.open(map, marker);
             } else {
                 alert('Geocode was not successful for the following reason: ' + status);
             }
         });
         directionsDisplay = new google.maps.DirectionsRenderer();
         directionsDisplay.setMap(map);
         directionsDisplay.setMap(map2);
         directionsDisplay.setPanel(document.getElementById('directions'))
         
         document.getElementById("showroomContainer").innerHTML = '<span class="nameSpan">' + name + '</span><br/><span class="addrSpan">Address: ' + addr + '</span>' + '</span><br/><span class="phoneSpan">Phone: ' + phone + '</span>';

         //setDirections("San Francisco", addr, "en_US");

     }
     
     function calcRoute() {
         document.getElementById("directions").innerHTML = "";
         document.getElementById("dirHeader").style.display = "";
         document.getElementById("dirBody").style.display = "";
         document.getElementById("mapBody").style.display = "none";

         directionsDisplay = new google.maps.DirectionsRenderer();
         directionsDisplay.setMap(map2);
         directionsDisplay.setPanel(document.getElementById('directions'))

         var start = document.getElementById("fromAddress").value;
         var end = document.getElementById("p_lt_ctl00_DrivingDirections_addrLatLng").value;;
         var request = {
             origin: start,
             destination: end,
             travelMode: google.maps.DirectionsTravelMode.DRIVING
         };

         directionsService.route(request, function (response, status) {
             if (status == google.maps.DirectionsStatus.OK) {
                 directionsDisplay.setDirections(response);
             }
         });
         
     }
     function createHTMLNode(text) {
         try {
             var n = document.createElement('div');
             n.setAttribute('style', 'width:250px; font-weight:bold;text-align:left;padding-top:10px; font-size:10px;')
             if (n.style) {
                 n.style.fontWeight = 'bold';
                 n.style.textAlign = 'left';
                 n.style.width = '250px';
                 n.style.paddingTop = '10px';
                 n.style.fontSize = '10px';
             }
             if (text)
                 n.innerHTML = text;
             return n;
         }
         catch (e) {
         }
     }
     function qparam(name) {
         name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
         var regexS = "[\\?&]" + name + "=([^&#]*)";
         var regex = new RegExp(regexS);
         var results = regex.exec(window.location.href);
         if (results == null)
             return "";
         else
             return results[1];
     }

     google.maps.event.addDomListener(window, 'load', initialize);
    </script>
<div style="width:100%;">
<form action="#" >
    <input type="hidden" id="name" name="name" runat="server"/>
    <input type="hidden" id="addr" name="addr" runat="server" />
    <input type="hidden" id="addrLatLng" name="addrLatLng" runat="server" />
    <input type="hidden" id="phone" name="phone" runat="server" />
  <table style="width: 100%;" cellpadding="0" cellspacing="0">

   <tbody>
   <tr >
			<td width="49%"/>
			<td nowrap="" width="610" style="color: #ffffff; font-weight: normal; font-size: 20px; text-align: left; padding-top: 5px;">
				<a name="Top"/>
				<table class="header">
				    <tr>
				        <td style="width:480px" id="showroomContainer" class="showroomContainer">
				        ROHL HOSPITALITY PROJECTS
				        </td>
				        <td>
				        <div class="non-printable">
				        <input type="button" onclick="window.print(); return false;" value="Print"/>
				        </div>
				        </td>
				        <td>
				        <div class="non-printable">
				        <input type="button" onclick="javascript: window.close(); return false;" value="Close"/>
				        </div>
				        </td>
				     </tr>
				</table>
			</td>
			<td width="49%"/>
		</tr>
		</table>
   <div style="width:600px; padding:10px 80px 0 80px;">
    <table class="directions">
    

    <tr>
    <!--<td valign="top"><div id="emptyDiv" style="width: 275px;"> </div></td>-->
    <td valign="top" align="left" style="font-family:'Times New Roman', Times, serif; font-size:16px; color:#802719; font-weight:bold;" colspan="2"><div id="fromContainer" class="non-printable" style="width: 100%;">Please enter your starting address for custom driving directions: </div></td>

    </tr>
    <tr>
        <td>
            <input class="non-printable" type="text" id="fromAddress" size="25" style="width:522px;" runat="server"/>
        </td>
        <td>
             <asp:Button ID="btnSubmit" runat="server" class="submit non-printable" OnClick="btnSubmit_Click" Text="Submit" />
             
        </td>
    </tr>
    </table>
    
  </form>

    <br/>
    <table class="directions">
    <tr id="dirHeader" style="display:none;"><th>Directions</th><th>Map</th></tr>

    <tr id="dirBody" style="display:none;">
        <td valign="top"><div id="directions" style="width: 275px"></div></td>
        <td valign="top"><div id="map_canvas" style="width: 310px; height: 400px"></div></td>

    </tr>
    <tr id="mapBody">
        <td colspan="2"><div id="map" style="width: 585px; height: 400px">
             
            </div> </td>
    </tr>
    </table>
    </div> 
    </div>

with the backside code

 public partial class GetDrivingDirections : CMSAbstractWebPart
    {
        public string compname { get; set; }
        public string address { get; set; }
        public string phonenum { get; set; }
        protected void Page_Load(object sender, EventArgs e)
        {
            if (GetValue("name") != null)
            {
                compname = GetValue("name").ToString();
            }
            else
            {
                compname = "";
            }
            if (GetValue("address") != null)
            {
                address = GetValue("address").ToString();
            }
            else
            {
                address = "";
            }
            if (GetValue("phonenum") != null)
            {
                phonenum = GetValue("phonenum").ToString();
            }
            else
            {
                phonenum = "";
            }

            name.Value = compname;
            addr.Value = address;
            phone.Value = phonenum;
            

        }

        protected void btnSubmit_Click(object sender, EventArgs e)
        {
            Response.Redirect("GetDrivingDirections2.aspx?name=" + name.Value + "&addr=" + addr.Value + "&phone=" + phone.Value + "&destaddr=" + fromAddress.Value);
        }
    }

The second control is as follows

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="goDrivingDirections.ascx.cs" Inherits="CMSApp.CMSWebParts.RohlWebParts.goDrivingDirections" %>
 <script type="text/javascript">

     var directionsDisplay;
     var directionsService = new google.maps.DirectionsService();
     var map;
     var oldDirections = [];
     var currentDirections = null;
     var name;
     var addr;
     var phone;

     function initialize() {
         geocoder = new google.maps.Geocoder();
         var latlng = new google.maps.LatLng(0, 0);
         var mapOptions = {
             zoom: 12,
             center: latlng,
             navigationControl: true,
             navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL },
             mapTypeId: google.maps.MapTypeId.ROADMAP
         }
         map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

         name = document.getElementById("p_lt_ctl00_goDrivingDirections_name").value;

         addr = document.getElementById("p_lt_ctl00_goDrivingDirections_addr").value;

         phone = document.getElementById("p_lt_ctl00_goDrivingDirections_phone").value;

         var contentstring = createHTMLNode(name + '<br/>Address: ' + addr + '<br/>Phone: ' + phone);

         var infowindow = new google.maps.InfoWindow({
             content: contentstring
         });

         directionsDisplay = new google.maps.DirectionsRenderer();
         directionsDisplay.setPanel(document.getElementById('directions'));
         calcRoute();       

         //document.getElementById("showroomContainer").innerHTML = '<span class="nameSpan">' + name + '</span><br/><span class="addrSpan">Address: ' + addr + '</span>' + '</span><br/><span class="phoneSpan">Phone: ' + phone + '</span>';

         //setDirections("San Francisco", addr, "en_US");
     }          

    function calcRoute() {    
        var start = document.getElementById("p_lt_ctl00_goDrivingDirections_fromAddress").value;
        var end = document.getElementById("p_lt_ctl00_goDrivingDirections_addr").value;;
        var waypts = []; 
        var request = {
            origin:start,
            destination:end, 
            waypoints: waypts,
            optimizeWaypoints: true,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        };
        directionsService.route(request, function(response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
            }
        });
    }


     //function calcRoute() {
     //    document.getElementById("directions").innerHTML = "";
     //    document.getElementById("dirHeader").style.display = "";
     //    document.getElementById("dirBody").style.display = "";
     //    document.getElementById("mapBody").style.display = "none";

     //    d

         
     //    var request = {
     //        origin: start,
     //        destination: end,
     //        travelMode: google.maps.DirectionsTravelMode.DRIVING
     //    };

     //    directionsService.route(request, function (response, status) {
     //        if (status == google.maps.DirectionsStatus.OK) {
     //            directionsDisplay.setDirections(response);
     //        }
     //    });

     //}
     function createHTMLNode(text) {
         try {
             var n = document.createElement('div');
             n.setAttribute('style', 'width:250px; font-weight:bold;text-align:left;padding-top:10px; font-size:10px;')
             if (n.style) {
                 n.style.fontWeight = 'bold';
                 n.style.textAlign = 'left';
                 n.style.width = '250px';
                 n.style.paddingTop = '10px';
                 n.style.fontSize = '10px';
             }
             if (text)
                 n.innerHTML = text;
             return n;
         }
         catch (e) {
         }
     }
     function qparam(name) {
         name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
         var regexS = "[\\?&]" + name + "=([^&#]*)";
         var regex = new RegExp(regexS);
         var results = regex.exec(window.location.href);
         if (results == null)
             return "";
         else
             return results[1];
     }

     google.maps.event.addDomListener(window, 'load', initialize);
    </script>
<div style="width:100%;">
<form action="#" >
    <input type="hidden" id="name" name="name" runat="server"/>
    <input type="hidden" id="addr" name="addr" runat="server" />
    <input type="hidden" id="addrLatLng" name="addrLatLng" runat="server" />
    <input type="hidden" id="phone" name="phone" runat="server" />
    <input type="hidden" id="destaddr" name="destaddr" runat="server" />
  <table style="width: 100%;" cellpadding="0" cellspacing="0">

   <tbody>
   <tr >
			<td width="49%"/>
			<td nowrap="" width="610" style="color: #ffffff; font-weight: normal; font-size: 20px; text-align: left; padding-top: 5px;">
				<a name="Top"/>
				<table class="header">
				    <tr>
				        <td style="width:480px" id="showroomContainer" class="showroomContainer">
				        ROHL HOSPITALITY PROJECTS
				        </td>
				        <td>
				        <div class="non-printable">
				        <input type="button" onclick="window.print(); return false;" value="Print"/>
				        </div>
				        </td>
				        <td>
				        <div class="non-printable">
				        <input type="button" onclick="javascript: window.close(); return false;" value="Close"/>
				        </div>
				        </td>
				     </tr>
				</table>
			</td>
			<td width="49%"/>
		</tr>
		</table>
   <div style="width:600px; padding:10px 80px 0 80px;">
    <table class="directions">
    

    <tr>
    <!--<td valign="top"><div id="emptyDiv" style="width: 275px;"> </div></td>-->
    <td valign="top" align="left" style="font-family:'Times New Roman', Times, serif; font-size:16px; color:#802719; font-weight:bold;" colspan="2"><div id="fromContainer" class="non-printable" style="width: 100%;">Please enter your starting address for custom driving directions: </div></td>

    </tr>
    <tr>
        <td>
            <input class="non-printable" type="text" id="fromAddress" size="25" style="width:522px;"/>
        </td>
        <td>
             <input class="submit non-printable" id="submit" type="submit" value="Submit"/>
        </td>
    </tr>
    </table>
    
  </form>

    <br/>
    <table class="directions">
    <tr id="dirHeader" ><th>Directions</th><th>Map</th></tr>

    <tr id="dirBody" >
        <td valign="top"><div id="directions" style="width: 275px"></div></td>
        <td valign="top"><div id="map_canvas" style="width: 310px; height: 400px"></div></td>

    </tr>
    
    </table>
    </div> 
    </div>

and the backside code


    public partial class goDrivingDirections : CMSAbstractWebPart
    {
        public string compname { get; set; }
        public string address { get; set; }
        public string phonenum { get; set; }
        public string destAddr { get; set; }
        protected void Page_Load(object sender, EventArgs e)
        {
            if (GetValue("name") != null)
            {
                compname = GetValue("name").ToString();
            }
            else
            {
                compname = "";
            }
            if (GetValue("address") != null)
            {
                address = GetValue("address").ToString();
            }
            else
            {
                address = "";
            }
            if (GetValue("phonenum") != null)
            {
                phonenum = GetValue("phonenum").ToString();
            }
            else
            {
                phonenum = "";
            }
            if (GetValue("destaddr") != null)
            {
                destAddr = GetValue("destaddr").ToString();
            }
            else
            {
                destAddr = "";
            }

            name.Value = compname;
            addr.Value = address;
            phone.Value = phonenum;
            destaddr.Value = destAddr;
            

        }
    }

Again I am able to see the Map in the first page but I am unable to get directions.

Thanks,
Roy VanderPloeg

Kentico Customer Success

kentico_martind2 - 10/29/2012 2:02:57 PM

RE:Custom Google Maps with directions.

Hello Roy,

I'm very sorry, but I'm not able to help you at this point. I've discussed this issue also with our developer, but your code is too complex and customized so I would recommend you to try to debug with firebux or another javascript debugging tool. I don't see any problem with Kentico maps, this is probably Google maps issue not Kentico. Maybe Google has changed some security rules.

Best regards,
Martin Danko