今天我來講說一下JS的部分

<script src="http://maps.google.com/maps?file=api&v=2&key=API_KEY" type="text/javascript"></script>

這一段就是要套用googlemap API所需要的套件
其中API_KEY就是要打上自己申請來的金鑰

        var geocoder;
        var map;
        var address = "@ViewBag.Gmap";

這一部分是宣告變數
那address的部分就是使用controller 傳進來的地址

 public ActionResult CompanyDetail(EmployerCompany emp, int id)
        {
            JobNameID jnd = new JobNameID(id);
            ViewBag.Gmap = db.EmployerCompany.Find(job.GetById(id).CompanyID).CompanyAdress.ToString();
            ViewBag.job = jnd;

            return View(_Emp.GetById(job.GetById(id).CompanyID));
        }

這邊就是我controller的部分(這是我學生時期的專案,獻醜了= =
大家可以看到ViewBag.Gmap
是用LinQ語法
從DB撈action的地址
對了大家一定會很疑惑
為什麼

var address = "@ViewBag.Gmap";

@ViewBag.Gmap這個東西要加""
這是因為傳進地址的要求
不然它傳進來會變成純文字
而不是字串(當初我就有在這邊卡關，卡了很久= =

        map=new GMap2(document.getElementById("map"));
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
        geocoder=new GClientGeocoder();
        
        geocoder.getLocations(address,addtoMap);

        function addtoMap(response){
            place=response.Placemark[0];
            point = new GLatLng(place.Point.coordinates[1],place.Point.coordinates[0]);
            map.setCenter(point, 13);
            marker = new GMarker(point);
            map.addOverlay(marker);
            marker.openInfoWindow(place.address);
        }

這邊就都是google API內的方法
GMap2:就是定位網頁上位置(要設置大小
給大家看一下它的HTML

            <div class="form-group">
                @Html.LabelFor(e => e.CompanyAdress, new { @class = "col-lg-2 control-label" })
                <div class="col-lg-10" id="map" style="width:600px;height:400px">
                </div>
            </div>

getLocations:就是抓取實際地理位置，並以google map顯示在網頁上

下面就是我完工的圖
給大家看看
那時候還沒套值，所以東西是寫死的= =

但上面程式是動態的，所以有興趣的話可以自己回家時做看看

哈哈
那我們明天見囉