Javascript 在网站中嵌入谷歌地图_Javascript_Jquery_Google Maps

Javascript 在网站中嵌入谷歌地图

javascript jquery google-maps

Javascript 在网站中嵌入谷歌地图,javascript,jquery,google-maps,Javascript,Jquery,Google Maps,我试图使用googleapi将googlemap嵌入我的网站，我获得了一个API密钥，并编写了以下jquery： function LoadMap(){ $.getScript("http://maps.googleapis.com/maps/api/js?key=AIzaSyChZeTZ-DzMW-45IUBXUSuBha9MWEiXXtI&sensor=true", function () { var myOpt

我试图使用

googleapi

将googlemap嵌入我的网站，我获得了一个

API密钥

，并编写了以下jquery：

function LoadMap(){

                $.getScript("http://maps.googleapis.com/maps/api/js?key=AIzaSyChZeTZ-DzMW-45IUBXUSuBha9MWEiXXtI&sensor=true", function () {
                   var myOptions = {
                        zoom: 8,
                        center: new google.maps.LatLng(-34.397, 150.644),
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    };
                    var map = new google.maps.Map(document.getElementById("id"), myOptions);
                });
}

但这不是在给定id的div中加载地图。有人能帮我解决这个问题吗

这是一个好项目

看看这个：

GMAPSv3中不推荐使用“密钥”。祝你好运

试试这个：）


//启动映射
函数初始化（数据）{
//为中心地图定位
var mylatng=new google.maps.LatLng（data.lng，data.lat）；
//地图选项
变量myOptions={
缩放：10，
中心：myLatLng，
mapTypeId:google.maps.mapTypeId.HYBRID
}; 
//启动映射
map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
//信息窗口元素
infowindow=new google.maps.infowindow（）；
//固定销
setPin（数据）；
} 
//显示位置
函数setPin（数据）{
var pinLatLng=新的google.maps.LatLng（data.lng，data.lat）；
var pinMarker=new google.maps.Marker（{
位置：pinLatLng，
地图：地图，
数据：数据
}); 
//侦听单击事件
google.maps.event.addListener（pinMarker，'click'，function（）{
setCenter（新的google.maps.LatLng（pinMarker.position.lat（），pinMarker.position.lng（））；
map.setZoom（18）；
onItemClick（事件、pinMarker）；
}); 
} 
//信息窗口触发功能
函数onItemClick（事件，pin）{
//创建内容
var contentString=pin.data.text+“
坐标：“+pin.data.lng+”，“+pin.data.lat；
//替换信息窗口的内容和位置
setContent（contentString）；
信息窗口设置位置（引脚位置）；
infowindow.open（地图）
}

new GMaps({
  div: '#map',
  lat: -12.043333,
  lng: -77.028333
});

<!DOCTYPE html>  
<html>  
<head>  
<meta name="viewport" content="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" />  
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>  
<script type="text/javascript"> 
// Initiate map 
function initialize(data) { 
  // Make position for center map 
  var myLatLng = new google.maps.LatLng(data.lng, data.lat); 

  // Map options  
  var myOptions = { 
    zoom: 10, 
    center: myLatLng, 
    mapTypeId: google.maps.MapTypeId.HYBRID 
  }; 

  // Initiate map 
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

  // Info window element 
  infowindow = new google.maps.InfoWindow(); 

  // Set pin 
  setPin(data); 
} 
// Show position 
function setPin(data) { 
  var pinLatLng = new google.maps.LatLng(data.lng, data.lat); 
  var pinMarker = new google.maps.Marker({ 
    position: pinLatLng, 
    map: map, 
    data: data 
  }); 

  // Listen for click event  
  google.maps.event.addListener(pinMarker, 'click', function() { 
    map.setCenter(new google.maps.LatLng(pinMarker.position.lat(), pinMarker.position.lng())); 
    map.setZoom(18); 
    onItemClick(event, pinMarker); 
  }); 
} 
// Info window trigger function 
function onItemClick(event, pin) { 
  // Create content  
  var contentString = pin.data.text + "<br /><br /><hr />Coordinate: " + pin.data.lng +"," + pin.data.lat; 

  // Replace our Info Window's content and position 
  infowindow.setContent(contentString); 
  infowindow.setPosition(pin.position); 
  infowindow.open(map) 
} 
</script>  
</head>  
<body onload="initialize({lat:-3.19332,lng:55.952366,text:'<h2>Edinburgh</h2><i>Nice city!</i>'})"> 
  <div id="map_canvas">  
</div>  
</body>  
</html>