Basic usage of Google Map API

1. Custom information window, custom icon and custom control

// 自定义Marker标记点
var marker = new google.maps.Marker({
     position:  myLatLng,
     icon: '../car.png',  // 如果为空则显示默认的图标
     map: map
});
 
// 自定义InfoWindow信息窗口
htmlWindow = "<div class='wrapBox'>\
                   <div>IMEI: " + imei + "</div>\
                   <div>Address：<span id='map-address'>" + pointToAddress(myCenter.lat, myCenter.lng) + "</span>" + info + "</div>\
                   <div>Speed：" + speed + " km/h</div>\
                   <div>Time：" + toDate(2018-12-17 16:12:50) + "</div>\
               </div>";
 
var infowindow= new google.maps.InfoWindow({
     content: htmlWindow,
     disableAutoPan:true //设置为true时可禁用自动平移功能
});
 
//打开信息窗体
infowindow.open(map, marker);
 
//marker点事件，点击关闭信息窗体
marker.addListener('click', function() {
    infowindow.close();
});
 
//监听X关闭按钮事件
google.maps.event.addListener(infowindow,"closeclick", function(){
    infowindow.close();
});

Custom markers and custom information windows are relatively simple, and the effect is as shown in the above picture (middle). What if we want to change the default control position of the map or need to customize the control? Then look down.
The controls enabled by default on google map are:
mapTypeControl // map type control
zoomControl // map zoom-in control
streetViewControl // minion street view control
fullscreenControl // full-screen control
panControl, scaleControl, overviewMapControl, rotateControl:true, etc. are not enabled by default

// 关闭地图类型控件，打开缩小放大控件并设置其位置为坐下方
var myOptions2 = {
    zoom: 15,
    center: myLatLng,
    mapTypeControl: false,
    zoomControl: true,
    zoomControlOptions: {
        style:google.maps.ZoomControlStyle.SMALL,
        position:google.maps.ControlPosition.LEFT_BOTTOM
    }
};

Among them, all controls have a position attribute, representing the position of the control, including options: OTTOM, BOTTOM_CENTER, BOTTOM_LEFT, BOTTOM_RIGHT, CENTER, LEFT, LEFT_BOTTOM, LEFT_CENTER, LEFT_TOP, RIGHT, RIGHT_BOTTOM, RIGHT_CENTER, RIGHT_TOP, TOP, TOP_CENTER, TOP_LEFT , TOP_RIGHT. It doesn't matter if you can't remember, you might as well try console.log(google.maps.ControlPosition).

And only some controls have style attributes, and they are different.

address resolution

// 地址解析方法
function pointToAddress(lat, lng, backcall) {
    // 实例化Geocoder服务用于解析地址
    var geocoder = new google.maps.Geocoder();
    // 地理反解析过程
    // 请求数据GeocoderRequest为location,值类型为LatLng因此我们要实例化经纬度
    geocoder.geocode({ location: new google.maps.LatLng(lat, lng) }, function geoResults(results, status) {
       if (status == google.maps.GeocoderStatus.OK) {
             backcall(results[0].formatted_address);
        } else {
             console.log("：error " + status);
        }
    });
}
 
// 在需要解析的地方调用方法
pointToAddress(myCenter.lat, myCenter.lng, function (address) {
    // 获得地址
    console.log(address);
});

We see that the name of the control on the map is displayed in Chinese. If the user's mobile phone system is in English, the map will automatically switch to English.