js调用谷歌地图V3

来源：互联网发布：通州淘宝城搬迁编辑：程序博客网时间：2024/05/20 14:26

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>Google Maps JavaScript API v3 Example: Info Window Simple</title>
    <style type="text/css">
        html { height: 100%; }
        body { height: 100%; margin: 0px; padding: 0px; }
        #map_canvas { width:600px; height: 400px; margin: 50px auto; }
    </style>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
        function initialize()
        {
            var myLatlng = new google.maps.LatLng(31.192631,121.389168);
            var myOptions = {
                zoom: 15,
                center: myLatlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            var contentString = '<div id="content">' +
            '<div id="siteNotice">' +
            '<div style="font-size:9pt;">医院名称：<span style="color:green;"><a target="_blank" href="http://www.shkq120.cn/">武警上海总队医院口腔中心</a></span><br><span>免费热线：400-665-6612</span><br><span>医院地址：上海市长宁区虹许路831号（虹许路与延安西路交叉路口)</span><br><span>乘车路线：<a href="http://www.ddmap.com/map/21/bus-69.htm" target="_blank" title="查看69路公交车线路">69路</a>、<a href="http://www.ddmap.com/map/21/bus-700.htm" title="查看700路公交车线路" target="_blank">700路</a>、<a href="http://www.ddmap.com/map/21/bus-48.htm" title="查看48路公交车线路" target="_blank">48路</a>、<a href="http://www.ddmap.com/map/21/bus-925.htm" title="查看925路公交车线路" target="_blank">925路</a>、<a href="http://www.ddmap.com/map/21/bus-941.htm" title="查看941路公交车线路" target="_blank">941路</a>、<a href="http://www.ddmap.com/map/21/bus-936.htm" title="查看936路公交车线路" target="_blank">936路</a>、<a href="http://www.ddmap.com/map/21/bus-806.htm" title="查看806路公交车线路" target="_blank">806路</a>、<a href="http://www.ddmap.com/map/21/bus-519.htm" title="查看519路公交车线路" target="_blank">519路</a><br>到虹许路、古羊路或虹梅路下车</span></div>' +
            '</div>';
            var infowindow = new google.maps.InfoWindow({
                maxWidth: 200,
                content: contentString
            });
            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                title: '武警上海市总队医院口腔中心'
            });
            google.maps.event.addListener(marker, 'click', function()
            {
                infowindow.open(map, marker);
            });
        }
    </script>

</head>
<body onload="initialize()">
    <div id="map_canvas">
    </div>
</body>
</html>