如何在谷歌搜索位置圖

Question

我有數據在數據庫中是這樣的：

Database table 

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

在我看來

@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> 

我如何通過@ item.address谷歌搜索位置的地圖？

http://prntscr.com/8a6m4r點擊查看

我的觀點：

@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> 
     } 

哈弗腳本

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

     }); 

</script> 

可以看出U 地圖對我的看法，我想加載地圖有

Answer 1

你需要像這樣使用它r 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);