support google map

src/lib/map/googlemap.js

@@ -0,0 +1,109 @@
+import { asyncLoadAssets } from "@/lib/misc.js";
+import services from "@/lib/services.js";
+
+const googleMapHolder = {
+    googleMap: null,
+    ControlPosition: {
+        LEFT_TOP: (window.google && window.google.maps && window.google.maps.ControlPosition) ? window.google.maps.ControlPosition.LEFT_TOP : 5
+    }
+};
+
+export function loadGoogleMapAssets(language) {
+    if (googleMapHolder.googleMap) {
+        return;
+    }
+
+    if (!window.onGoogleMapCallback) {
+        window.onGoogleMapCallback = () => {
+            if (window.google) {
+                googleMapHolder.googleMap = window.google.maps;
+            }
+        };
+    }
+
+    return asyncLoadAssets('js', services.generateGoogleMapJavascriptUrl(language, 'onGoogleMapCallback'));
+}
+
+export function createGoogleMapHolder() {
+    return {
+        mapProvider: 'googlemap',
+        dependencyLoaded: !!googleMapHolder.googleMap,
+        inited: false,
+        defaultZoomLevel: 14,
+        minZoomLevel: 1,
+        googleMapInstance: null,
+        googleMapCenterMarker: null
+    };
+}
+
+export function createGoogleMapInstance(mapHolder, mapContainer, options) {
+    if (!googleMapHolder.googleMap) {
+        return null;
+    }
+
+    const googleMap = googleMapHolder.googleMap;
+
+    mapHolder.googleMapInstance = new googleMap.Map(mapContainer, {
+        zoom: options.zoomLevel,
+        center: {
+            lat: options.initCenter.latitude,
+            lng: options.initCenter.longitude
+        },
+        maxZoom: 19,
+        zoomControl: true,
+        mapTypeControl: false,
+        scaleControl: false,
+        streetViewControl: false,
+        rotateControl: false,
+        fullscreenControl: false,
+        gestureHandling: 'greedy',
+        zoomControlOptions: {
+            position: googleMapHolder.ControlPosition.LEFT_TOP
+        }
+    });
+    mapHolder.inited = true;
+}
+
+export function setGoogleMapCenterTo(mapHolder, center, zoomLevel) {
+    if (!googleMapHolder.googleMap || !mapHolder.googleMapInstance) {
+        return;
+    }
+
+    mapHolder.googleMapInstance.setCenter({
+        lat: center.latitude,
+        lng: center.longitude
+    });
+    mapHolder.googleMapInstance.setZoom(zoomLevel);
+}
+
+export function setGoogleMapCenterMaker(mapHolder, position) {
+    if (!googleMapHolder.googleMap || !mapHolder.googleMapInstance) {
+        return;
+    }
+
+    const googleMap = googleMapHolder.googleMap;
+
+    if (!mapHolder.googleMapCenterMarker) {
+        mapHolder.googleMapCenterMarker = new googleMap.Marker({
+            position: {
+                lat: position.latitude,
+                lng: position.longitude
+            },
+            map: mapHolder.googleMapInstance
+        });
+    } else {
+        mapHolder.googleMapCenterMarker.setPosition({
+            lat: position.latitude,
+            lng: position.longitude
+        });
+    }
+}
+
+export function removeGoogleMapCenterMaker(mapHolder) {
+    if (!mapHolder.googleMapInstance || !mapHolder.googleMapCenterMarker) {
+        return;
+    }
+
+    mapHolder.googleMapCenterMarker.setMap(null);
+    mapHolder.googleMapCenterMarker = null;
+}

src/lib/map/index.js

@@ -9,6 +9,15 @@ import {
     removeLeafletMapCenterMaker
 } from './openstreetmap.js';
 
+import {
+    loadGoogleMapAssets,
+    createGoogleMapHolder,
+    createGoogleMapInstance,
+    setGoogleMapCenterTo,
+    setGoogleMapCenterMaker,
+    removeGoogleMapCenterMaker
+} from './googlemap.js';
+
 import {
     loadBaiduMapAssets,
     createBaiduMapHolder,
@@ -18,17 +27,21 @@ import {
     removeBaiduMapCenterMaker
 } from './baidumap.js';
 
-export function loadMapAssets() {
+export function loadMapAssets(language) {
     if (settings.getMapProvider() === 'openstreetmap') {
-        return loadLeafletMapAssets();
+        return loadLeafletMapAssets(language);
+    } else if (settings.getMapProvider() === 'googlemap') {
+        return loadGoogleMapAssets(language);
     } else if (settings.getMapProvider() === 'baidumap') {
-        return loadBaiduMapAssets();
+        return loadBaiduMapAssets(language);
     }
 }
 
 export function createMapHolder() {
     if (settings.getMapProvider() === 'openstreetmap') {
         return createLeafletMapHolder();
+    } else if (settings.getMapProvider() === 'googlemap') {
+        return createGoogleMapHolder();
     } else if (settings.getMapProvider() === 'baidumap') {
         return createBaiduMapHolder();
     } else {
@@ -43,6 +56,8 @@ export function initMapInstance(mapHolder, mapContainer, options) {
 
     if (mapHolder.mapProvider === 'openstreetmap') {
         createLeafletMapInstance(mapHolder, mapContainer, options);
+    } else if (mapHolder.mapProvider === 'googlemap') {
+        createGoogleMapInstance(mapHolder, mapContainer, options);
     } else if (mapHolder.mapProvider === 'baidumap') {
         createBaiduMapInstance(mapHolder, mapContainer, options);
     }
@@ -55,6 +70,8 @@ export function setMapCenterTo(mapHolder, center, zoomLevel) {
 
     if (mapHolder.mapProvider === 'openstreetmap') {
         setLeafletMapCenterTo(mapHolder, center, zoomLevel);
+    } else if (mapHolder.mapProvider === 'googlemap') {
+        setGoogleMapCenterTo(mapHolder, center, zoomLevel);
     } else if (mapHolder.mapProvider === 'baidumap') {
         setBaiduMapCenterTo(mapHolder, center, zoomLevel);
     }
@@ -67,6 +84,8 @@ export function setMapCenterMarker(mapHolder, position) {
 
     if (mapHolder.mapProvider === 'openstreetmap') {
         setLeafletMapCenterMaker(mapHolder, position);
+    } else if (mapHolder.mapProvider === 'googlemap') {
+        setGoogleMapCenterMaker(mapHolder, position);
     } else if (mapHolder.mapProvider === 'baidumap') {
         setBaiduMapCenterMaker(mapHolder, position);
     }
@@ -79,6 +98,8 @@ export function removeMapCenterMarker(mapHolder) {
 
     if (mapHolder.mapProvider === 'openstreetmap') {
         removeLeafletMapCenterMaker(mapHolder);
+    } else if (mapHolder.mapProvider === 'googlemap') {
+        removeGoogleMapCenterMaker(mapHolder);
     } else if (mapHolder.mapProvider === 'baidumap') {
         removeBaiduMapCenterMaker(mapHolder);
     }