正如@geocodezip 所说,您正在寻找Google Maps Javascript v3。
这是使用它的简单示例(从我的旧答案中挑选),这不需要任何键。
HTML:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<div id="map-canvas"></div>
CSS:
#map-canvas {
margin: 0;
padding: 0;
height: 100%;
}
Javascript:
function initialize() {
var myLatlng = new google.maps.LatLng(43.565529, -80.197645);
var mapOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
//=====Initialise Default Marker
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'marker'
//=====You can even customize the icons here
});
//=====Initialise InfoWindow
var infowindow = new google.maps.InfoWindow({
content: "<B>Skyway Dr</B>"
});
//=====Eventlistener for InfoWindow
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
我创建了一个简单的小提琴供您参考。
希望你有一些想法。
由于您对使用密钥不感兴趣,因此请注意限制。
Google Maps Javascript API:每项服务每天最多加载 25,000 个地图。
这包括:
由网页或应用程序加载时使用 Maps JavaScript API(V2 或 V3)显示地图;
- 未显示地图的网页或应用程序使用 Maps JavaScript API(V2 或 V3)显示街景全景图;
- 加载 Maps API for Flash 的 SWF 由网页或应用程序加载;或者
- 来自静态地图 API 的地图图像的单个请求。
- 从 Street View Image API 发出一个全景图像请求。
从您的评论中,
我也尝试过使用canvas
,它不起作用。
var mapCanvas = document.createElement("canvas");
但这对div
元素很有效。
var mapCanvas = document.createElement("div");
mapCanvas.style.width = "200px";
mapCanvas.style.height = "200px";
更新了 JSFiddle
不要忘记设置宽度和高度属性。