javascript调用google地图

http://www.google.com/intl/zh-CN/apis/maps/demo/index.html

可以查看源代码，firbug更好查看

这位朋友你好，我前段时间，学习flex的时候，成功调用Google Map Api,不过我的代码是ActionScription脚本代码，不知对你有帮助否？
代码如下：<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%" height="100%" initialize="init()" viewSourceURL="srcview/index.html">

    <mx:Script>
        <![CDATA[

            import com.google.maps.Map;
            import com.google.maps.MapEvent;
            import com.google.maps.MapType;
            import com.google.maps.LatLng;

            private var gMap:Map;

            private function init():void
            {
                gMap = new Map();
                gMap.key = "你申请的key";
                gMap.width = 600;
                gMap.height = 400;
                gMap.addEventListener(MapEvent.MAP_READY, mapReadyHandler);

                mapContainer.addChild(gMap);
            }

            private function mapReadyHandler(e:MapEvent):void
            {
                gMap.setCenter(new LatLng(42.334184,-71.018372), 13, MapType.HYBRID_MAP_TYPE);
                gMap.setSize(new Point(mapContainer.width, mapContainer.height));
            }

        ]]>
    </mx:Script>

    <mx:UIComponent id="mapContainer" width="100%" height="100%"/>

</mx:Application>

<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ditu.google.com/maps?file=api&v=2&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA&hl=zh-CN"></script>
<script type="text/javascript">
    var map; //声明一个GMap2全局变量
    function load() {
        //检查浏览器的兼容性.
        if (GBrowserIsCompatible()) {
            map = new GMap2(document.getElementById("map")); //加载地图
            map.addControl(new GLargeMapControl()); //增加全功能控件
            map.addControl(new GMapTypeControl()); //设置地图类型
            map.enableScrollWheelZoom(); //设置地图支持滚轮
            map.setCenter(new GLatLng(39.990168, 116.295304), 10); //设置地图的中心坐标
            map.enableDoubleClickZoom(); //开启双击google map会自动放大.
            map.enableScrollWheelZoom(); //开启滚动鼠标自动放大和缩小.
            //==============================================================
            var icon = new GIcon(G_DEFAULT_ICON);
            var point = new GPoint(116.429114, 39.934322);
            var html = '<div ><font color="blue">HelloWorld!</font></div>';
            var er = createMarker(icon, point, html);
            map.addOverlay(er);
            //==============================================================
        }
    }
    function createMarker(baseIcon, point, html) {
        var icon = new GIcon(baseIcon);
        var er = new GMarker(point, icon);
        GEvent.addListener(er, "click", function() { er.openInfoWindowHtml(html); });
        return er;
    }
    </script>
</head>
<body onload="load()" onunload=" GUnload();">
<table border="2" id="table1" bordercolor="#FF0000">
<tr>
<td>

<div id="map" style=" text-align:center; width:800px; height:480px"></div>
</td>
</tr>
</table> </body>
</html>

把你的key值替换掉我的就行了。

昨天刚给一个坛友改好的程序（但还是建议你称看GMAP手册，否则你连经纬度范围恐怕都搞不清）：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
  <meta http-equiv="content-type" content="text/html; charset=gbk"/>
  <title>Google 地图 JavaScript API 示例: 定制图标</title>
  <script src="http://ditu.google.cn/maps?file=api&v=2&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA&hl=zh-CN"
  type="text/javascript"></script>
<style type=text/css>
ul{
float:left;
}
</style>
<script type="text/javascript">
var map = null;
var geocoder = null;
function showAddress(address, html, level) {
if (geocoder) {
geocoder.getLatLng(address,
function(point) {
if (!point) {
alert("不能解析: " + address);
} else {
map.setCenter(point, level);
var er = new GMarker(point);
map.clearOverlays();
map.addOverlay(er);
er.openInfoWindowHtml(html);
GEvent.addListener(er, "click",
function() {
er.openInfoWindowHtml(html);
});
}
});
}
}
function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(1111111, 2222222), 8);
var mapControl = new GMapTypeControl();
map.addControl(new GLargeMapControl());
geocoder = new GClientGeocoder();
showAddress("北京", '我老家在这里', 8);
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
经度：<input type=text id="jd">　纬度：<input type=text id="wd"><input type=button value="设置指定坐标" onclick="map.setCenter(new GLatLng(document.getElementById('jd').value,document.getElementById('wd').value), 8);">
  <div id="map_canvas" style="width: 600px; height: 300px"></div>

http://code.google.com/intl/zh-CN/apis/maps/documentation/premier/guide.html
这个详细！

<html>
<head>
<title>Google Maps Test1</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css"></link>
<script
src="http://ditu.google.com/maps?file=api&v=2&
key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-
i1QfUnH94QxWIa6N4U6MouMmBA&hl=zh-CN"
type="text/javascript">
</script>
<script type="text/javascript">
function load(){
if(GBrowserIsCompatible()){
//加载地图
var map=new GMap2(document.getElementById("map_canvas"));
//设置地图的中心坐标
map.setCenter(new GLatLng(39.990168,116.295304),4);
map.enableContinuousZoom();//连续缩放
map.enableScrollWheelZoom();//滚轮缩放
map.enableDoubleClickZoom();//双击缩放
map.enableGoogleBar()//设置搜索栏可用
//map.setMapType(G_SATELLITE_MAP);//设置地图类型为卫星地图
map.setMapType(G_NORMAL_MAP);//设置地图类型为混合地图
//添加控件
map.addControl(new GLargeMapControl());//地图全功能缩放控件 map.addControl(new GMapTypeControl());
}
}
</script>
</head>
<body onload="load()" onunload="GUnload()">

<div id="map_canvas" style="width:1024px;height:768px"></div>
</body>
</html>
把我的key换掉就可以了,如果你只是本地测试不发布的话都没关系
什么都没有只有地图其实7楼和9楼的都蛮不错的

code.google.com 页面左下不是有个 Code Playground 的页面吗????

LZ想用google的哪种地图呢？
先给你一份V2版的简单的地图吧。自己把红色部分替换成自己的key就可以了！！
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Control Initialization</title>
    <script src="//maps.google.com/maps?file=api&v=2&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA" type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[    function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"),
            { size: new GSize(640,320) } );
        map.setCenter(new GLatLng(42.366662,-71.106262), 11);
        var customUI = map.getDefaultUI();
        // Remove MapType.G_HYBRID_MAP
        customUI.maptypes.hybrid = false;
        map.setUI(customUI);
      }
    }
    //]]>
    </script>
  </head>  <body onload="initialize()" onunload="GUnload()">
    <div id="map_canvas" style="width: 640px; height: 320px"></div>
  </body>
</html>

把ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA替换成自己需要的KEY就可以了！
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Control Initialization</title>
    <script src="//maps.google.com/maps?file=api&v=2&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA" type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[    function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"),
            { size: new GSize(640,320) } );
        map.setCenter(new GLatLng(42.366662,-71.106262), 11);
        var customUI = map.getDefaultUI();
        // Remove MapType.G_HYBRID_MAP
        customUI.maptypes.hybrid = false;
        map.setUI(customUI);
      }
    }
    //]]>
    </script>
  </head>  <body onload="initialize()" onunload="GUnload()">
    <div id="map_canvas" style="width: 640px; height: 320px"></div>
  </body>
</html>

调试易

javascript调用google地图

解决方案 »