JSFiddle - React, Tailwind, and code Playground
HTML
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&language=zh-TW"></script>
<script type="text/javascript" src="http://web.systemlead.com/EasyCartAdmin/Scripts/ELabels3.js"></script>
<script type="text/javascript">
//<![CDATA[
var geocoder;
var map = null;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(22.6253654, 120.36345639999993);
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 13,
center: latlng, //new google.maps.LatLng(25.036772, 121.520269), // 設定地圖中心點
mapTypeId: google.maps.MapTypeId.ROADMAP // HYBRID,ROADMAP,SATELLITE,TERRAIN
});
map.setOptions({ draggable: false,
// zoomControl: false,
scrollwheel: false,
// disableDoubleClickZoom: true,
// streetViewControl: false,//街景
// scaleControl: false,//縮放
// panControl: false //平移功能
disableDefaultUI: true
});
//顯示中心點
ShowCenterPoint();
//顯示外送點
ShowPoint();
}
function ShowPoint() {
try {
$("[id*=address]").filter(function () {
ShowPointByAddr($(this).val(), $(this).attr('alt'));
});
}
catch (err)
{ }
}
var arySite = new Array();
function addSite(map, siteCode, siteDesc, lat, lng, address) {
var pt = new google.maps.LatLng(lat, lng);
var label = new ELabel(map,
pt,
'<div id="arrowCanvas" >' + siteDesc +...
CSS
<link href="https://developers.google.com/maps/documentation/javascript/examples/default.css"
rel="stylesheet" />
<style type="text/css">
.site
{
border: solid 1px #000000;
padding-left: 1em;
display: block;
width: 60px;
cursor: pointer;
margin: 5px;
}
div.markerLabel
{ /*markerLabeldisplay: block;*/
text-align: center; /*background-color:white;*/ /*border:1px;*/
width: 32px;
letter-spacing: 0px;
font-size: 16px;
font-family: Arial;
color: white;
}
</style>