How to search location on google maps

Question

I have data in database like this:

Database table

Name       : Jack     
mob_number : 445452454             
address    : al saada street    
country    :  dubai

In my view

@item.Name
@item.address
@item.country

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
      function initialize() {
      var latlng = new google.maps.LatLng(40.716948, -74.003563);
      var options = {
                     zoom: 14,
                     center: latlng,
                     mapTypeId: google.maps.MapTypeId.ROADMAP
                    };
      var map = new google.maps.Map(document.getElementById("map"), options); 
     }

     initialize();
</script>

How do I pass @item.address to google maps for search location ?

http://prntscr.com/8a6m4r click to view

MY view:

    @if (Model != null)
    {
        if (Model.Count() != 0)
        {
            <div class="">
                @foreach (var item in Model)
                {
                    <div class="tiptext">
                        <b style="margin-left: 0px; font-size: large;color: #1A0DB2;">@item.BusinessName</b>
                        <h3 style="margin: 5px 0px 5px 0px;color: rgb(0, 145, 0);"> @item.FirstName</h3>
                        <h3 style="margin: 8px; color:black">@item.BusinessCategory </h3>
                        <div class="description">
                            <div class="description_image">
                                <img src="~/Images/popup_pointer.jpg" />
                                <div class="POP_UP_outer">
                                    <div class="description_background">
                                        <div class="description_map">
                                            <b>Map</b>

                                        </div><hr />
                                        <div class="description_body">
                                            <b>Description </b><h4 class="des">@item.BusinessDescription</h4>
                                            <b>Address2 </b><h4 class="des">@item.Address1</h4>
                                            <b>Email </b><h4 style="color:blue; margin: 5px 0px 5px 0px;">@item.EmailID </h4>
                                            <b>WorkNumber </b><h4 class="des">@item.WorkNumber</h4>
                                            <b>MobileNumber </b><h4 class="des">@item.MobileNumber</h4>
                                            <b>City </b><h4 class="des">@item.City</h4>
                                            <b>State </b><h4 class="des">@item.State</h4>
                                            <b>ZipCode </b><h4 class="des">@item.ZipCode</h4>
                                            @Html.ActionLink("Book An Appointment", "CalendarView", "Appt", new { id = @item.UserID }, null)
                                            @*@Html.ActionLink("Book An Appointment", "Popup", "Search", new { @class = "openDialog", data_dialog_id = "aboutlDialog", data_dialog_title = "Additinal Customer" })*@
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                }
            </div>
        }
        else
        {
            <label id="lblErrorMsg" title="Record not fount...!" style="color:red;">Record not found...!</label>
        }

Hover script

 <script type="text/javascript">
        $(".tiptext").mouseover(function () {
            $(this).children(".description").show();
        }).mouseout(function () {
            $(this).children(".description").hide();

        });

</script>

u can see map on my view i want to load map there

Answer 1

You need to use it like this it work for me

function initialize() {
    // Change the latitude and longitude to your location. You can also get the coordinates here: http://itouchmap.com/latlong.html
    var myLatlng = new google.maps.LatLng(25.548710, 82.084777);
    var mapOptions = {
        zoom: 17,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map
    });

    var infowindow = new google.maps.InfoWindow({
        content:
            '<div class="map-wrap">' +
                // Company name
                '<div class="b-title">' + 'Company Name' + '</div>' +
                // Company street
                '<p>' + 'Company Street' + '</p>' +
                // Company city and state
                '<p>' + 'Company City and State' + '</p>' +
                // Clearfix with border
                '<div class="clrfx map-div">' + '</div>' +
                // Row 1
                '<div class="row">' +
                    // Phone
                    '<div class="b-info cell w-49">' + '<span class="entypo-phone">' + '</span>' + '+91-879-902-1616' + '</div>' +
                    // Email
                    '<div class="b-info cell w-49">' + '<span class="entypo-paper-plane">' + '</span>' + 'example@example.com' + '</div>' +
                '</div>' +
                // Row 2
                '<div class="row">' +
                    // Mobile
                    '<div class="b-info cell w-49">' + '<span class="entypo-mobile">' + '</span>' + '+91-879-902-1616' + '</div>' +
                    // Website
                    '<div class="b-info cell w-49">' + '<span class="entypo-monitor">' + '</span>' + 'www.example.com' + '</div>' +
                '</div>' +
                // Bottom margin clearfix
                '<div class="clrfx mt-10">' + '</div>' +
            '</div>'
    });
    makeInfoWindowEvent(map, infowindow, marker);
}

function makeInfoWindowEvent(map, infowindow, marker) {
    google.maps.event.addListener(marker, 'click', function () {
        infowindow.open(map, marker);
    });
}

google.maps.event.addDomListener(window, 'load', initialize);