Having unspecified errors and a few issues when running google maps

Question

ISSUE 1

I tried to get the geo code after entering the address. After i clicked on the GeoCode button, it prompts me unspecified errors.

I have a page Register.aspx (no update panel) with a button "View", it will call ucGoogleMap.ascx when i clicked on the button.

Below is the javascript and html codes in ucGoogleMap.ascx.

 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> $(document).ready(function () { $get('<%=height.ClientID%>').value = $(window).height(); }); var geocoder = new google.maps.Geocoder(); function geocodePosition(pos) { debugger; geocoder.geocode({ latLng: pos }, function (responses) { if (responses && responses.length > 0) { updateMarkerAddress(responses[0].formatted_address); } else { updateMarkerAddress('Cannot determine address at this location.'); } }); } function updateMarkerStatus(str) { document.getElementById('markerStatus').innerHTML = str; } function updateMarkerPosition(latLng) { document.getElementById('info').innerHTML = [ latLng.lat(), latLng.lng() ].join(', '); } function updateMarkerAddress(str) { document.getElementById('address').innerHTML = str; } function initialize() { var latLng = new google.maps.LatLng(19.0606917, 72.83624970000005); var map = new google.maps.Map(document.getElementById('mapCanvas'), { zoom: 18, center: latLng, mapTypeId: google.maps.MapTypeId.ROADMAP }); var domainName = document.getElementById('<%=hdnDomainName.ClientID %>').value; var marker = new google.maps.Marker({ position: latLng, title: 'Point A', map: map, icon: domainName + 'Images/maker.png', draggable: true }); // Update current position info. updateMarkerPosition(latLng); geocodePosition(latLng); // Add dragging event listeners. google.maps.event.addListener(marker, 'dragstart', function () { updateMarkerAddress('Dragging...'); }); google.maps.event.addListener(marker, 'drag', function () { updateMarkerStatus('Dragging...'); updateMarkerPosition(marker.getPosition()); }); google.maps.event.addListener(marker, 'dragend', function () { updateMarkerStatus('Drag ended'); geocodePosition(marker.getPosition()); }); } function codeAddress() { debugger; var domainName = document.getElementById('<%=hdnDomainName.ClientID %>').value; var address = document.getElementById('<%= txtAddress.ClientID %>').value; geocoder.geocode({ 'address' : address }, function (results, status) { if (status == google.maps.GeocoderStatus.OK) { var map = new google.maps.Map(document.getElementById('mapCanvas'), { zoom: 18, center: results[0].geometry.location, mapTypeId: google.maps.MapTypeId.ROADMAP }); // map.setCenter(results[0].geometry.location); var marker = new google.maps.Marker({ position: results[0].geometry.location, title: 'Point A', map: map, icon: domainName + 'Images/maker.png', draggable: true }); } else { alert('Geocode was not successful for the following reason: ' + status); } // Update current position info. updateMarkerPosition(results[0].geometry.location); geocodePosition(results[0].geometry.location); // Add dragging event listeners. google.maps.event.addListener(marker, 'dragstart', function () { updateMarkerAddress('Dragging...'); }); google.maps.event.addListener(marker, 'drag', function () { updateMarkerStatus('Dragging...'); updateMarkerPosition(marker.getPosition()); }); google.maps.event.addListener(marker, 'dragend', function () { updateMarkerStatus('Drag ended'); geocodePosition(marker.getPosition()); }); }); } // Onload handler to fire off the app. google.maps.event.addDomListener(window, 'load', initialize); </script> 

 <style type="text/css"> #mapCanvas { width: 500px; height: 400px; } </style> 

 <asp:UpdatePanel runat="server" ID="upViewGoogleMap" UpdateMode="Conditional"> <ContentTemplate> <table cellpadding="0" cellspacing="0" border="0" width="100%"> <tr class="clsTBRow" style="vertical-align: top"> <td style="width: 500px;"> <div id="mapCanvas"></div> </td> <td style="padding-left: 10px;"> <div id="infoPanel"> <asp:HiddenField ID="hdnDomainName" runat="server"/> Location : <asp:TextBox ID="txtAddress" value="Rawang, Selangor" runat="server"></asp:TextBox>&nbsp; <asp:Button ID="cmdGeocode" runat="server" Text="Geocode" CausesValidation="false" /><br/><br/> <b>Marker status:</b> <div id="markerStatus"><i>Click and drag the marker.</i></div> <b>Current position:</b> <div id="info"></div> <b>Closest matching address:</b> <div id="address"></div> <br/> <asp:Button ID="cmdAddPosition" runat="server" Text="Add Position" CausesValidation="false" /> </div> </td> </tr> </table> </ContentTemplate> </asp:UpdatePanel> 

ISSUE 2 domainName = ' http://localhost:10101/project/ ' <--- LOAD RECORD IN THE CODE BEHIND to get the current domain name

For the google map marker, I uses domainName + 'Images/maker.png' and the marker won't shows up. When I uses ' http://localhost:10101/project/Images/maker.png ' and the marker shows up.

When i debug, i check both having the same results which is ' http://localhost:10101/project/Images/maker.png '

ISSUE 3

ucGoogleMap.ascx Code Behind

Currently using

cmdGeocode.Attributes.Add("onclick", "return codeAddress();")

i wan to use below code to call the javascript, but it doesn't seem like its functioning.

 Protected Sub cmdGeocode_Click(sender As Object, e As EventArgs) Handles cmdGeocode.Click
        Page.ClientScript.RegisterClientScriptBlock(Me.GetType, "codeAddress", "codeAddress();", True)
        upViewGoogleMap.Update()
    End Sub

Answer 1

I've solved ISSUE 1 unspecified errors by adding this code in the javascript.

 HTMLElement.prototype.getBoundingClientRect = (function () {
    var oldGetBoundingClientRect = HTMLElement.prototype.getBoundingClientRect;
    return function () {
        try {
            return oldGetBoundingClientRect.apply(this, arguments);
        } catch (e) {
            return {
                left: '',
                right: '',
                top: '',
                bottom: ''
            };
        }
    };
})();

For the issues 3, I've changed the code using ScriptManager.RegisterStartupScript instead of ClientScript.RegisterClientScriptBlock