`

网页嵌入Google Map地图

 
阅读更多
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Google Map</title>
     <%= stylesheet_link_tag 'jquery-ui.css', :media => 'screen' %>
     <%= javascript_include_tag "jquery.js" %>
    <script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
// require jquery

var App = {};

App.Maps = {
    centerLatLng: null,
    googleMap: null,
    markerOptions: null,
    infoWindow: null,
    defaultOptions: null,
    hotel_icon: null,
    place_icon: null,
    init: function () {
        this.defaultOptions = $.extend(this.defaultOptions, {
            zoom: 13,
            center: null,
            scaleControl: true,
            navigationControl: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        this.hotel_icon = new google.maps.MarkerImage('2.png',
            new google.maps.Size(27, 31),
            new google.maps.Point(0, 0),
            new google.maps.Point(14, 29));
        this.place_icon = new google.maps.MarkerImage('1.png',
            new google.maps.Size(27, 31),
            new google.maps.Point(27, 0),
            new google.maps.Point(14, 29));
        this.centerLatLng = new google.maps.LatLng(39.983421, 116.337769);
        this.defaultOptions.center = this.centerLatLng;
        this.googleMap = new google.maps.Map(document.getElementById("map_canvas"), this.defaultOptions);
        this.infoWindow = new google.maps.InfoWindow({ content: '' });


        this.markerFactory($.extend(this.markerOptions, {}));
        for (var i = 0; i < 5; i++) {
            this.markerFactory($.extend(this.markerOptions, {latLng: new google.maps.LatLng(39.993421, 116.307769 + i * 0.01), title: 'ss' + i, content: 'cc' + i, i: i}));
        }

    }, markerFactory: function (options) {
        var marker = new google.maps.Marker({
            position: options.latLng || this.centerLatLng,
            map: this.googleMap,
            icon: options.icon,
            title: options.title
        });
        if (options.latLng) {
            google.maps.event.addListener(marker, 'click', function () {
                App.Maps.infoWindow.setContent(options.content);
                App.Maps.infoWindow.setPosition(options.latLng);
                App.Maps.infoWindow.open(App.Maps.googleMap);
            });
        }
    }

};
 </script>
<style type="text/css">
   #google_map_div {
    height: 300px;
    width: 300px;
    }
</style>
 </head>
<body onload="initialize()">
  <div id="google_map_div" ></div>
</body>
</html>

 

 

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css"
        rel="stylesheet" type="text/css" />
    <style>
       #map_canvas {
        margin: 0;
        padding: 0;
        width:600px;
        height:400px;
        border: 1px solid black;
      }
    </style>
    <title>Google Maps JavaScript API v3 Example: Map Simple</title>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"> </script>

    <script type="text/javascript">
        function initialize() {
            var latlng = new google.maps.LatLng(39.993421,116.337769);
            var options = {
                zoom: 15,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                mapTypeControl: true,
                mapTypeControlOptions:
                { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
                    poistion: google.maps.ControlPosition.TOP_RIGHT,
                    mapTypeIds: [google.maps.MapTypeId.ROADMAP,
                  google.maps.MapTypeId.TERRAIN,
                   google.maps.MapTypeId.HYBRID,
                   google.maps.MapTypeId.SATELLITE]
                },
                navigationControl: true,
                navigationControlOptions: { style: google.maps.NavigationControlStyle.ZOOM_PAN },
                scaleControl: true,
                disableDoubleClickZoom: true,
                draggable: false,
                streetViewControl: true,
                draggableCursor: 'move'
            };
            var map = new google.maps.Map(document.getElementById("map_canvas"), options);
            var marker = new google.maps.Marker(
            {
                position: latlng,
                map: map,
                title: 'Click me'
            });

            var infowindow = new google.maps.InfoWindow({ content: 'Location info: Country Name: LatLng:' });
            google.maps.event.addListener(marker, 'click', function () {
                // Calling the open method of the infoWindow          
                infowindow.open(map, marker);
            });
        }
        window.onload = initialize;

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

 

 

        if ($('#map-canvas .gmnoprint').length > 0) {

            var str, test = '<div style="float: left;">' +

                '<div id="testDis" draggable="false" title="">' +

                '<label class="checkbox" >测距</label></div ></div>'

            var gmnoprints = $('#map-canvas .gmnoprint');

            for (var i = 0, k = gmnoprints.length; i < k; i++) {

                if (gmnoprints[i].style['right'] == '0px' && gmnoprints[i].style['top'] == '0px') {

                    str = gmnoprints[i];

                    break;

                }

            }

 

   google map API      https://developers.google.com/maps/documentation/javascript/tutorial?hl=zh-CN

分享到:
评论

相关推荐

    谷歌地图Google Map API V3中文开发文档

    谷歌地图 Google Map API V3 中文开发文档是 Google 公司提供的一种基于 Web 的地图应用程序接口,允许开发者在自己的网站或应用程序中嵌入谷歌地图,以提供地图检索、路线规划、地标显示等功能。本文档旨在为开发者...

    GoogleMap地图控件应用源码_googlemapcontrol.zip

    【标题】:GoogleMap地图控件应用源码 在IT领域,GoogleMap地图控件是开发者常用的一个工具,它允许我们在应用程序中集成谷歌地图的功能,包括定位、导航、路线规划等。GoogleMap地图控件通常以API的形式提供,...

    google map应用实例

    Google Map API是Google提供的一套接口,允许开发者在自己的应用程序或网站上嵌入Google Maps的功能。通过API,开发者可以获取地图数据、设置自定义标记、创建路线、添加图层以及实现地理位置服务等多种功能。 二、...

    Ext Google Map 简易开发框架

    其次,**Google Maps API**是谷歌提供的一套JavaScript接口,允许开发者在网页上嵌入地图,执行各种地图操作,如定位、导航、标记、图层管理等。通过调用Google Maps API提供的函数和方法,我们可以将动态地图集成到...

    Google map 谷歌地图 Google地图 V3 第三版

    谷歌地图API(Google Maps API)是谷歌提供的一套用于在网页上嵌入交互式地图的开发工具。V3版本是其一个重要的更新,旨在提高性能、简化API接口并减少对JavaScript库的依赖。这篇博文将深入探讨Google Maps V3的...

    Google Map API 使用示例

    Google Map API 是一款强大的工具,它允许开发者在自己的网站或应用程序中嵌入地图功能,提供定位、导航、地理编码、路线规划等多种服务。本示例将深入探讨如何使用 Google Map API,帮助你理解和掌握其核心概念及...

    google map 谷歌地图joomla!插件

    内容中插入地图的短代码或标签,例如,在文章中插入`{googlemap}`,然后指定相关坐标,即可在文章中生成地图。 6. **兼容性**:此插件适用于Joomla! 1.0x和1.5+版本,这意味着它可能不兼容较新的Joomla!版本。随着...

    ASP.NET版谷歌地图GoogleMap

    使用ASP.NET版谷歌地图GoogleMap控件,开发者可以轻松地在网页上嵌入地图,通过设置不同的属性和方法来控制地图的行为。例如,可以设置地图的初始中心点、缩放级别、地图类型(卫星、地形、道路图等),还可以添加...

    谷歌MAP_V3中文详解以及一个简单例子

    谷歌地图API V3是Google提供的一套用于在网页上嵌入地图、进行地理位置处理的JavaScript接口。这个API允许开发者在自己的网站上创建交互式地图,包括但不限于定位、标记、信息窗口、路线规划等功能。本教程将对谷歌...

    vc谷歌地图开发_googlemap

    开发者可以通过JavaScript API在网页中嵌入交互式地图,然后通过Webview或者自定义的浏览器控件在VC++应用中展示这些地图。 要实现VC++与谷歌地图API的交互,你需要以下几个步骤: 1. **注册并获取API密钥**:在...

    3.(leaflet篇)leaflet接入高德、openstreetmap、google地图.zip

    例如,加载OpenStreetMap地图的代码如下: ```javascript var map = L.map('map').setView([51.505, -0.09], 13); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '&copy; ...

    基于SuperMap Objects写的GoogleMap地图切割程序

    标题中的“基于SuperMap Objects写的GoogleMap地图切割程序”指的是使用SuperMap Objects这一GIS(地理信息系统)开发组件来实现对Google Map地图数据的处理和切割功能。SuperMap Objects是SuperMap公司提供的一套...

    GoogleMap地图控件应用源码

    在Asp.net开发中,GoogleMap地图控件是一种常见的工具,它能够帮助开发者在网页上集成强大的地图功能,包括但不限于展示地图、定位、导航、标注等功能。本源码是针对GoogleMap API进行封装的C#实现,旨在提供一个...

    Google 地图 google map api / 地图有关

    标题"Google 地图 google map api / 地图有关"表明了这个压缩包可能包含与Google地图API相关的代码示例或教程,Google Map API是Google提供的一项服务,允许开发者在自己的网站或应用中嵌入交互式地图,实现定位、...

    VC++/MFC 对话框嵌入Google Map测试程序

    在这个特定的项目中,“VC++/MFC 对话框嵌入Google Map测试程序”尝试在MFC对话框中集成Google Maps服务,以便用户可以在应用内部查看和操作地图。 **Google Maps API** Google Maps API 是一套Web服务,允许...

    GoogleMap地图搜索(Silverlight版)源码201291

    【GoogleMap地图搜索(Silverlight版)源码详解】 GoogleMap地图搜索(Silverlight版)是一款基于Microsoft Silverlight技术开发的应用程序,它允许用户通过Silverlight客户端与Google Maps API进行交互,实现对地理...

    google地图api文档

    Google 地图 API 是一款功能强大且广泛应用的 Web 服务,允许开发者在自己的网站中嵌入 Google 地图,添加丰富的功能和交互性,提供更好的用户体验。下面是 Google 地图 API 的基础知识点和重要概念: 1. Google ...

    网页嵌套地图 嵌套地图 谷歌地图 web开放

    下面我们将深入探讨嵌套地图的概念、如何在网页中嵌入谷歌地图以及相关的控制功能。 嵌套地图是指在一个更大的地图区域内,插入一个或多个小的地图视图,这些小视图通常用于展示特定区域的详细信息。这种设计模式在...

Global site tag (gtag.js) - Google Analytics