曾经做的js的谷歌地图API调用与显示

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="HotelMap.ascx.cs" Inherits="WizHotelUnion.HotelAdmin.Hotel.HotelMap" %>
<script src="http://ditu.google.cn/maps?file=api&v=2&key=abcdefg&sensor=true_or_false"
        type="text/javascript"></script>
    <script type="text/javascript">
        //页面加载完毕
        $(document).ready(function () {
            Initialize();
        });
        //页面加载完毕，显示指定坐标
        function Initialize() {
            if (GBrowserIsCompatible()) {
                var map = new GMap2(document.getElementById("map_canvas"));
                map.addControl(new GLargeMapControl()); //添加缩放控件
                map.addControl(new GMapTypeControl()); //地图类型
                map.addControl(new GScaleControl()); //添加标尺
                map.enableScrollWheelZoom(); //设置地图可以由鼠标滚轮控制缩放 
                map.addControl(new GOverviewMapControl()); //添加小地图
                //map.setCenter(new GLatLng(39.9493, 116.3975), 13);
                //单击地图后，获取经纬度
                map.addOverlay(createMarker(new GLatLng(longitude, latitude), 14));
                    map.setCenter(new GLatLng(longitude, latitude), 14);
                GEvent.addListener(map, "click", function (overlay, latlng) {
                    try {
                        document.getElementById(tbLongitude).value = latlng.y;
                        document.getElementById(tbLatitude).value = latlng.x;
                    }
                    catch (e) {
                        ;
                    }
                });
            }
        }
        //对坐标进行标注
        function createMarker(point, number) {
            var marker = new GMarker(point);
            GEvent.addListener(marker, "click", function () {
                marker.openInfoWindowHtml("<font color='blue'>酒店地址：</font>" + hotelAddress);
            });
            return marker;
        }
        /*根据地址搜索得到地图范围
        *SearchAddress 传来的（地址）参数
        */
        function SearchByAddress(SearchAddress) {
            var map = new GMap2(document.getElementById("map_canvas"));
            map.addControl(new GLargeMapControl()); //添加缩放控件
            map.addControl(new GMapTypeControl()); //地图类型
            map.addControl(new GScaleControl()); //添加标尺
            map.enableScrollWheelZoom(); //设置地图可以由鼠标滚轮控制缩放 
            map.addControl(new GOverviewMapControl()); //添加小地图
            //由地址获取经纬度  
            var geocoder = new GClientGeocoder(); //解析地址
            geocoder.getLatLng(SearchAddress, function (point) {
                //坐标不存在
                if (!point) {
                    alert(SearchAddress + " not found");
                    SearchAddress = "";
                    initialize();
                }
                else {
                    //添加标记

                    var marker = new GMarker(point, { draggable: true });
                    map.setCenter(point, 14);
                    map.addOverlay(marker);
                    marker.openInfoWindowHtml(SearchAddress);
                    //移动标点关闭信息框
                    GEvent.addListener(marker, "dragstart", function () { map.closeInfoWindow(); });
                    //获得移动后的经纬度（移动事件）
                    GEvent.addListener(marker, "dragend", function () {
                        point1 = marker.getPoint();
                        map.panTo(point1);
                        marker.openInfoWindowHtml(SearchAddress);
                        document.getElementById(tbLatitude).value = point1.x;
                        document.getElementById(tbLongitude).value = point1.y;
                    });
                    //标记单击事件
                    GEvent.addListener(marker, "click", function () {
                        marker.openInfoWindowHtml(SearchAddress);
                    });
                    document.getElementById(tbLatitude).value = point.x;
                    document.getElementById(tbLongitude).value = point.y;
                }
            });
            //获取点击点的经纬度
            GEvent.addListener(map, "click", function (overlay, latlng) {
                try {
                    document.getElementById(tbLatitude).value = latlng.x;
                    document.getElementById(tbLongitude).value = latlng.y;
                }
                catch (e) {
                    ;
                }
            });
        }
    </script>
<style type="text/css">
    #map_canvas{width:100%; height:300px; margin-bottom: 0px; border: 1px solid blue;}
</style>
<div>
    <div id="map_canvas">    
    </div>
</div>

因为要做一个酒店的信息发布网站 包含了一些 谷歌地图的制作 以上为自己总结并成功运用而写的谷歌地图  自定义控件  方便好用就把他记了下来

在调用的时候

<div style="width:100%;height:25px;">
                        <span>
                            经度：<asp:TextBox ID="tbLongitude" runat="server" />
                            纬度：<asp:TextBox ID="tbLatitude" runat="server"/>
                            输入地址可进行搜索：
                            <input type="text" id="tbSearch" value="" />
                            <input type="button" id="tbsearch" οnclick="search()" value="马上搜索" />
                            <script type="text/javascript">
                                var tbLongitude = "<%=tbLongitude.ClientID %>";
                                var tbLatitude = "<%=tbLatitude.ClientID %>";
                                //酒店ID
                                var id = "<%=Lhid %>";
                                //得到地图经纬度并拆分
                                var latLng = "<%=MapLatLng %>";
                                var latLngArray = latLng.split(',');
                                var longitude = latLngArray[0];
                                var latitude = latLngArray[1];
                                //酒店地址
                                var hotelAddress = "<%=hotelName %>";
                                //搜索
                                function search() {
                                    var searchAddress = document.getElementById("tbSearch").value;
                                    if (searchAddress == "") {
                                        alert("查询条件不能为空");
                                    }
                                    else {
                                        SearchByAddress(searchAddress);
                                    }
                                }

                            </script>
                        </span>
                    </div>
  <uc1:HotelMap ID="HotelMap2" runat="server" />
    </div>

暂时写这么多，以后有问题再更新！