Google Map API Version3 教程(四):給marker標記加上自定義內容
阿新 • • 發佈:2019-02-03
lat = 23.14746;
lng = 113.34175376;
var myLatLng = new google.maps.LatLng(lat, lng);
var myOptions = {
zoom: 15,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementByIdx_x_x_xx_x("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: myLatLng,
title: "Hello World!"
});
marker.setMap(map);
然後給marker標記新增點選事件和自定義內容:
var contentString = '<div id="content">' +
'<div>' +
'</div>' +
'<h1>我的標籤</h1>' +
'<div id="bodyContent">' +
'<p class = "mapStyle">我的淘寶 <a href="http://ggydggyd.taobao.com">http://ggydggyd.taobao.com</a>' +
'</div>' +
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
infowindow是google指定的現實內容的類,你用HTML程式碼初始化它就好了
mapStyle是自己定義的樣式,在這裡可以使用網頁的css樣式表