hi i have this google map code which is working fine on textchanged event but if i have value populated on textbox from database than on page load google map does not show unless textbox data change please advice ltaspTextBox ID34TextBox134 runat34server34 placeholder34Locate yourself on google map34gtltaspTextBoxgt lt ltinput type34text34 id34txtPlaces34 style34width 250px34 placeholder34Enter a location34 gtgt lt

Google Map API: Add marker in Google Map on Page Load based on TextBox value using JavaScript in ASP.Net

nauna

SOLVED CLOSED ACTIVE ANSWERED
User: nauna
Posted: on Apr 17, 2017 02:17 AM
Forum: JavaScript
Answer: 1
Views: 6657
Sample Code: Download

hi,

i have this google map code which is working fine on textchanged event but if i have value populated on textbox from database than on page load google map does not show unless textbox data change please advice

  <asp:TextBox ID="TextBox1" runat="server" placeholder="Locate yourself on google map"></asp:TextBox>
  <%--  <input type="text" id="txtPlaces" style="width: 250px" placeholder="Enter a location" />--%>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&sensor=false&key=AIzaCI2rrQ6FeYu6JvfehofKYLLKxkDxem78o"></script>
    <script type="text/javascript">
        google.maps.event.addDomListener(window, 'load', function () {
            var places = new google.maps.places.Autocomplete(document.getElementById('<%= TextBox1.ClientID %>'));
            google.maps.event.addListener(places, 'place_changed', function () {
                var geocoder = new google.maps.Geocoder();
                var place = places.getPlace();
                var address = place.formatted_address;
                geocoder.geocode({ 'address': address }, function (results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        var latitude = results[0].geometry.location.lat();
                        var longitude = results[0].geometry.location.lng();
                        var mapOptions = { center: new google.maps.LatLng(latitude, longitude), zoom: 15, mapTypeId: google.maps.MapTypeId.ROADMAP };
                        var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
                        var marker = new google.maps.Marker({ position: new google.maps.LatLng(latitude, longitude), map: map });

                    } else {
                        alert("Request failed.")
                    }
                });
            });
        });
    </script>

dharmend...

0 1

Reply
ANSWER
User: dharmendr
Replied: on Apr 17, 2017 10:00 AM
Report

Hi nauna,

Refer the below code.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&sensor=false&key=AIzaSyCI2rrQ6FeYu6JvfehofKYLLKxkDxem78o"></script>
    <script type="text/javascript">
        window.onload = function () { AddMarkerFromAddress(document.getElementById('<%= TextBox1.ClientID %>').value); }

        function AddMarkerFromAddress(address) {
            var geocoder = new google.maps.Geocoder();
            geocoder.geocode({ 'address': address }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    var location = {};
                    location.lattitude = results[0].geometry.location.lat();
                    location.longitude = results[0].geometry.location.lng();
                    var mapOptions = { center: new google.maps.LatLng(location.lattitude, location.longitude), zoom: 17, mapTypeId: google.maps.MapTypeId.ROADMAP };
                    var infoWindow = new google.maps.InfoWindow();
                    var latlngbounds = new google.maps.LatLngBounds();
                    var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
                    var myLatLng = new google.maps.LatLng(location.lattitude, location.longitude);
                    var marker = new google.maps.Marker({ position: myLatLng, map: map });
                    google.maps.event.addListener(marker, "click", function (e) {
                        var location = e.latLng;
                        //Wrap the content inside an HTML DIV in order to set height and width of InfoWindow.
                        infoWindow.setContent("<div style = 'width:200px;min-height:40px'> Latitude:" + location.lat() + "<br/> Longitude:" + location.lng() + "</div>");
                        infoWindow.open(map, marker);
                    });
                }
            });
        };
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table border="0" cellpadding="0" cellspacing="3">
            <tr>
                <td colspan="2">
                    <asp:TextBox ID="TextBox1" runat="server" placeholder="Locate yourself on google map"
                        Text="Poonam Nagar"></asp:TextBox>
                    <hr />
                </td>
            </tr>
            <tr>
                <td>
                    <div id="dvMap" style="width: 500px; height: 500px">
                    </div>
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

Google Map API: Add marker in Google Map on Page Load based on TextBox value using JavaScript in ASP.Net

Company

Explore

Follow us

Contact Us