FEATURE Introducing the map component
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
This commit is contained in:
parent
0a7f77568f
commit
da65a622b4
18
plugins/carhop-blocks/blocks/localisation-map/.editorconfig
Normal file
18
plugins/carhop-blocks/blocks/localisation-map/.editorconfig
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
# This file is for unifying the coding style for different editors and IDEs
|
||||||
|
# editorconfig.org
|
||||||
|
|
||||||
|
# WordPress Coding Standards
|
||||||
|
# https://make.wordpress.org/core/handbook/coding-standards/
|
||||||
|
|
||||||
|
root = true
|
||||||
|
|
||||||
|
[*]
|
||||||
|
charset = utf-8
|
||||||
|
end_of_line = lf
|
||||||
|
insert_final_newline = true
|
||||||
|
trim_trailing_whitespace = true
|
||||||
|
indent_style = tab
|
||||||
|
|
||||||
|
[*.{yml,yaml}]
|
||||||
|
indent_style = space
|
||||||
|
indent_size = 2
|
||||||
30
plugins/carhop-blocks/blocks/localisation-map/.gitignore
vendored
Normal file
30
plugins/carhop-blocks/blocks/localisation-map/.gitignore
vendored
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
|
||||||
|
# Coverage directory used by tools like istanbul
|
||||||
|
coverage
|
||||||
|
|
||||||
|
# Compiled binary addons (https://nodejs.org/api/addons.html)
|
||||||
|
build/Release
|
||||||
|
|
||||||
|
# Dependency directories
|
||||||
|
node_modules/
|
||||||
|
|
||||||
|
# Optional npm cache directory
|
||||||
|
.npm
|
||||||
|
|
||||||
|
# Optional eslint cache
|
||||||
|
.eslintcache
|
||||||
|
|
||||||
|
# Output of `npm pack`
|
||||||
|
*.tgz
|
||||||
|
|
||||||
|
# Output of `wp-scripts plugin-zip`
|
||||||
|
*.zip
|
||||||
|
|
||||||
|
# dotenv environment variables file
|
||||||
|
.env
|
||||||
|
|
@ -0,0 +1,26 @@
|
||||||
|
<?php
|
||||||
|
// This file is generated. Do not modify it manually.
|
||||||
|
return array(
|
||||||
|
'localisation-map' => array(
|
||||||
|
'$schema' => 'https://schemas.wp.org/trunk/block.json',
|
||||||
|
'apiVersion' => 3,
|
||||||
|
'name' => 'carhop-blocks/localisation-map',
|
||||||
|
'version' => '0.1.0',
|
||||||
|
'title' => 'Localisation Map',
|
||||||
|
'category' => 'carhop-blocks',
|
||||||
|
'icon' => 'smiley',
|
||||||
|
'description' => 'Example block scaffolded with Create Block tool.',
|
||||||
|
'example' => array(
|
||||||
|
|
||||||
|
),
|
||||||
|
'supports' => array(
|
||||||
|
'html' => false
|
||||||
|
),
|
||||||
|
'textdomain' => 'localisation-map',
|
||||||
|
'editorScript' => 'file:./index.js',
|
||||||
|
'editorStyle' => 'file:./index.css',
|
||||||
|
'style' => 'file:./style-index.css',
|
||||||
|
'viewScript' => 'file:./view.js',
|
||||||
|
'render' => 'file:./render.php'
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://schemas.wp.org/trunk/block.json",
|
||||||
|
"apiVersion": 3,
|
||||||
|
"name": "carhop-blocks/localisation-map",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"title": "Localisation Map",
|
||||||
|
"category": "carhop-blocks",
|
||||||
|
"icon": "smiley",
|
||||||
|
"description": "Example block scaffolded with Create Block tool.",
|
||||||
|
"example": {},
|
||||||
|
"supports": {
|
||||||
|
"html": false
|
||||||
|
},
|
||||||
|
"textdomain": "localisation-map",
|
||||||
|
"editorScript": "file:./index.js",
|
||||||
|
"editorStyle": "file:./index.css",
|
||||||
|
"style": "file:./style-index.css",
|
||||||
|
"viewScript": "file:./view.js",
|
||||||
|
"render": "file:./render.php"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-server-side-render'), 'version' => '5bed954e24f5013c97aa');
|
||||||
|
|
@ -0,0 +1,646 @@
|
||||||
|
/******/ (() => { // webpackBootstrap
|
||||||
|
/******/ var __webpack_modules__ = ({
|
||||||
|
|
||||||
|
/***/ "./src/localisation-map/block.json":
|
||||||
|
/*!*****************************************!*\
|
||||||
|
!*** ./src/localisation-map/block.json ***!
|
||||||
|
\*****************************************/
|
||||||
|
/***/ ((module) => {
|
||||||
|
|
||||||
|
"use strict";
|
||||||
|
module.exports = /*#__PURE__*/JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":3,"name":"carhop-blocks/localisation-map","version":"0.1.0","title":"Localisation Map","category":"carhop-blocks","icon":"smiley","description":"Example block scaffolded with Create Block tool.","example":{},"supports":{"html":false},"textdomain":"localisation-map","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","viewScript":"file:./view.js","render":"file:./render.php"}');
|
||||||
|
|
||||||
|
/***/ }),
|
||||||
|
|
||||||
|
/***/ "./src/localisation-map/edit.js":
|
||||||
|
/*!**************************************!*\
|
||||||
|
!*** ./src/localisation-map/edit.js ***!
|
||||||
|
\**************************************/
|
||||||
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
||||||
|
|
||||||
|
"use strict";
|
||||||
|
__webpack_require__.r(__webpack_exports__);
|
||||||
|
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
||||||
|
/* harmony export */ "default": () => (/* binding */ Edit)
|
||||||
|
/* harmony export */ });
|
||||||
|
/* harmony import */ var _wordpress_server_side_render__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/server-side-render */ "@wordpress/server-side-render");
|
||||||
|
/* harmony import */ var _wordpress_server_side_render__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_server_side_render__WEBPACK_IMPORTED_MODULE_0__);
|
||||||
|
/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/block-editor */ "@wordpress/block-editor");
|
||||||
|
/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__);
|
||||||
|
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
|
||||||
|
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
function Edit(props) {
|
||||||
|
return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("div", {
|
||||||
|
...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps)(),
|
||||||
|
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)((_wordpress_server_side_render__WEBPACK_IMPORTED_MODULE_0___default()), {
|
||||||
|
block: "carhop-blocks/localisation-map",
|
||||||
|
attributes: props.attributes
|
||||||
|
})
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/***/ }),
|
||||||
|
|
||||||
|
/***/ "./src/localisation-map/index.js":
|
||||||
|
/*!***************************************!*\
|
||||||
|
!*** ./src/localisation-map/index.js ***!
|
||||||
|
\***************************************/
|
||||||
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
||||||
|
|
||||||
|
"use strict";
|
||||||
|
__webpack_require__.r(__webpack_exports__);
|
||||||
|
/* harmony import */ var _wordpress_blocks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/blocks */ "@wordpress/blocks");
|
||||||
|
/* harmony import */ var _wordpress_blocks__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_blocks__WEBPACK_IMPORTED_MODULE_0__);
|
||||||
|
/* harmony import */ var _style_scss__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./style.scss */ "./src/localisation-map/style.scss");
|
||||||
|
/* harmony import */ var _edit__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./edit */ "./src/localisation-map/edit.js");
|
||||||
|
/* harmony import */ var _block_json__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./block.json */ "./src/localisation-map/block.json");
|
||||||
|
/* harmony import */ var _view_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./view.js */ "./src/localisation-map/view.js");
|
||||||
|
/* harmony import */ var _view_js__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_view_js__WEBPACK_IMPORTED_MODULE_4__);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// Import the view script to load map handling on the backend
|
||||||
|
|
||||||
|
(0,_wordpress_blocks__WEBPACK_IMPORTED_MODULE_0__.registerBlockType)(_block_json__WEBPACK_IMPORTED_MODULE_3__.name, {
|
||||||
|
edit: _edit__WEBPACK_IMPORTED_MODULE_2__["default"]
|
||||||
|
});
|
||||||
|
|
||||||
|
/***/ }),
|
||||||
|
|
||||||
|
/***/ "./src/localisation-map/style.scss":
|
||||||
|
/*!*****************************************!*\
|
||||||
|
!*** ./src/localisation-map/style.scss ***!
|
||||||
|
\*****************************************/
|
||||||
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
||||||
|
|
||||||
|
"use strict";
|
||||||
|
__webpack_require__.r(__webpack_exports__);
|
||||||
|
// extracted by mini-css-extract-plugin
|
||||||
|
|
||||||
|
|
||||||
|
/***/ }),
|
||||||
|
|
||||||
|
/***/ "./src/localisation-map/view.js":
|
||||||
|
/*!**************************************!*\
|
||||||
|
!*** ./src/localisation-map/view.js ***!
|
||||||
|
\**************************************/
|
||||||
|
/***/ (() => {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Google Maps initialization for Carhop Localisation Map block
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Configuration
|
||||||
|
const GOOGLE_MAPS_CONFIG = {
|
||||||
|
apiKey: "AIzaSyBs-owKPe4qiYLb2baCTAptLeNNJX7bTQk",
|
||||||
|
center: {
|
||||||
|
lat: 50.61036915572659,
|
||||||
|
lng: 4.151529499893204
|
||||||
|
},
|
||||||
|
zoom: 11,
|
||||||
|
marker: {
|
||||||
|
title: "Carhop",
|
||||||
|
// Options de couleur : 'red', 'blue', 'green', 'yellow', 'purple', 'orange'
|
||||||
|
color: "green"
|
||||||
|
},
|
||||||
|
styles: [{
|
||||||
|
featureType: "administrative",
|
||||||
|
elementType: "geometry",
|
||||||
|
stylers: [{
|
||||||
|
color: "#19464b"
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
featureType: "administrative",
|
||||||
|
elementType: "labels.text.fill",
|
||||||
|
stylers: [{
|
||||||
|
color: "#ffffff"
|
||||||
|
}, {
|
||||||
|
gamma: "1.00"
|
||||||
|
}, {
|
||||||
|
lightness: "0"
|
||||||
|
}, {
|
||||||
|
saturation: "0"
|
||||||
|
}, {
|
||||||
|
visibility: "on"
|
||||||
|
}, {
|
||||||
|
weight: "1.5"
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
featureType: "administrative",
|
||||||
|
elementType: "labels.text.stroke",
|
||||||
|
stylers: [{
|
||||||
|
color: "#003237"
|
||||||
|
}, {
|
||||||
|
weight: "2"
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
featureType: "administrative.land_parcel",
|
||||||
|
elementType: "geometry",
|
||||||
|
stylers: [{
|
||||||
|
color: "#19464b"
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
featureType: "landscape",
|
||||||
|
elementType: "all",
|
||||||
|
stylers: [{
|
||||||
|
color: "#003237"
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
featureType: "landscape",
|
||||||
|
elementType: "geometry",
|
||||||
|
stylers: [{
|
||||||
|
color: "#003237"
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
featureType: "landscape.man_made",
|
||||||
|
elementType: "geometry",
|
||||||
|
stylers: [{
|
||||||
|
color: "#003237"
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
featureType: "landscape.natural",
|
||||||
|
elementType: "labels.text.fill",
|
||||||
|
stylers: [{
|
||||||
|
color: "#ffffff"
|
||||||
|
}, {
|
||||||
|
visibility: "on"
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
featureType: "landscape.natural.landcover",
|
||||||
|
elementType: "geometry",
|
||||||
|
stylers: [{
|
||||||
|
color: "#003237"
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
featureType: "landscape.natural.terrain",
|
||||||
|
elementType: "geometry",
|
||||||
|
stylers: [{
|
||||||
|
color: "#19464b"
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
featureType: "poi",
|
||||||
|
elementType: "all",
|
||||||
|
stylers: [{
|
||||||
|
visibility: "off"
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
featureType: "poi.attraction",
|
||||||
|
elementType: "all",
|
||||||
|
stylers: [{
|
||||||
|
visibility: "off"
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
featureType: "poi.business",
|
||||||
|
elementType: "all",
|
||||||
|
stylers: [{
|
||||||
|
visibility: "off"
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
featureType: "poi.government",
|
||||||
|
elementType: "all",
|
||||||
|
stylers: [{
|
||||||
|
visibility: "off"
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
featureType: "poi.park",
|
||||||
|
elementType: "all",
|
||||||
|
stylers: [{
|
||||||
|
visibility: "off"
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
featureType: "poi.school",
|
||||||
|
elementType: "all",
|
||||||
|
stylers: [{
|
||||||
|
visibility: "off"
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
featureType: "poi.medical",
|
||||||
|
elementType: "all",
|
||||||
|
stylers: [{
|
||||||
|
visibility: "off"
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
featureType: "poi.place_of_worship",
|
||||||
|
elementType: "all",
|
||||||
|
stylers: [{
|
||||||
|
visibility: "off"
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
featureType: "poi.sports_complex",
|
||||||
|
elementType: "all",
|
||||||
|
stylers: [{
|
||||||
|
visibility: "off"
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
featureType: "road.highway",
|
||||||
|
elementType: "geometry.fill",
|
||||||
|
stylers: [{
|
||||||
|
color: "#136f63"
|
||||||
|
}, {
|
||||||
|
lightness: "0"
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
featureType: "road.highway",
|
||||||
|
elementType: "geometry.stroke",
|
||||||
|
stylers: [{
|
||||||
|
visibility: "off"
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
featureType: "road.highway",
|
||||||
|
elementType: "labels",
|
||||||
|
stylers: [{
|
||||||
|
visibility: "off"
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
featureType: "road.highway",
|
||||||
|
elementType: "labels.text.fill",
|
||||||
|
stylers: [{
|
||||||
|
color: "#ffffff"
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
featureType: "road.highway",
|
||||||
|
elementType: "labels.text.stroke",
|
||||||
|
stylers: [{
|
||||||
|
color: "#0a1f14"
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
featureType: "road.arterial",
|
||||||
|
elementType: "geometry",
|
||||||
|
stylers: [{
|
||||||
|
color: "#136f63"
|
||||||
|
}, {
|
||||||
|
lightness: 18
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
featureType: "road.arterial",
|
||||||
|
elementType: "geometry.fill",
|
||||||
|
stylers: [{
|
||||||
|
color: "#136f63"
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
featureType: "road.arterial",
|
||||||
|
elementType: "labels",
|
||||||
|
stylers: [{
|
||||||
|
visibility: "off"
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
featureType: "road.arterial",
|
||||||
|
elementType: "labels.text.fill",
|
||||||
|
stylers: [{
|
||||||
|
color: "#ffffff"
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
featureType: "road.arterial",
|
||||||
|
elementType: "labels.text.stroke",
|
||||||
|
stylers: [{
|
||||||
|
color: "#2c2c2c"
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
featureType: "road.local",
|
||||||
|
elementType: "geometry",
|
||||||
|
stylers: [{
|
||||||
|
color: "#136F63"
|
||||||
|
}, {
|
||||||
|
lightness: -20
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
featureType: "road.local",
|
||||||
|
elementType: "labels",
|
||||||
|
stylers: [{
|
||||||
|
visibility: "off"
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
featureType: "road.local",
|
||||||
|
elementType: "labels.text.fill",
|
||||||
|
stylers: [{
|
||||||
|
color: "#ffffff"
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
featureType: "transit",
|
||||||
|
elementType: "geometry",
|
||||||
|
stylers: [{
|
||||||
|
color: "#136F63"
|
||||||
|
}, {
|
||||||
|
lightness: -20
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
featureType: "water",
|
||||||
|
elementType: "geometry",
|
||||||
|
stylers: [{
|
||||||
|
color: "#136F63"
|
||||||
|
}, {
|
||||||
|
lightness: -20
|
||||||
|
}]
|
||||||
|
}]
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Initialize Google Maps for all map containers on the page
|
||||||
|
*/
|
||||||
|
function initializeCarhopMaps() {
|
||||||
|
// Find all map containers
|
||||||
|
const mapContainers = document.querySelectorAll(".carhop-localisation-map");
|
||||||
|
mapContainers.forEach(container => {
|
||||||
|
const mapElement = container.querySelector(".map-container");
|
||||||
|
if (!mapElement || mapElement.dataset.initialized === "true") {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create map
|
||||||
|
const map = new google.maps.Map(mapElement, {
|
||||||
|
zoom: GOOGLE_MAPS_CONFIG.zoom,
|
||||||
|
center: new google.maps.LatLng(GOOGLE_MAPS_CONFIG.center.lat, GOOGLE_MAPS_CONFIG.center.lng),
|
||||||
|
styles: GOOGLE_MAPS_CONFIG.styles,
|
||||||
|
// Contrôles de zoom
|
||||||
|
zoomControl: true,
|
||||||
|
zoomControlOptions: {
|
||||||
|
position: google.maps.ControlPosition.RIGHT_TOP,
|
||||||
|
style: google.maps.ZoomControlStyle.DEFAULT
|
||||||
|
},
|
||||||
|
// Autres contrôles utiles
|
||||||
|
mapTypeControl: false,
|
||||||
|
// Masquer le sélecteur de type de carte
|
||||||
|
streetViewControl: false,
|
||||||
|
// Contrôle Street View
|
||||||
|
fullscreenControl: false // Bouton plein écran
|
||||||
|
});
|
||||||
|
const image = "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png";
|
||||||
|
// Add marker with custom color
|
||||||
|
new google.maps.Marker({
|
||||||
|
position: new google.maps.LatLng(GOOGLE_MAPS_CONFIG.center.lat, GOOGLE_MAPS_CONFIG.center.lng),
|
||||||
|
map: map,
|
||||||
|
title: GOOGLE_MAPS_CONFIG.marker.title,
|
||||||
|
icon: image
|
||||||
|
});
|
||||||
|
|
||||||
|
// Mark as initialized
|
||||||
|
mapElement.dataset.initialized = "true";
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Load Google Maps API and initialize maps
|
||||||
|
*/
|
||||||
|
function loadGoogleMapsAPI() {
|
||||||
|
// Check if Google Maps is already loaded
|
||||||
|
if (typeof google !== "undefined" && google.maps) {
|
||||||
|
initializeCarhopMaps();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check if script is already loading
|
||||||
|
if (window.carhopMapsLoading) {
|
||||||
|
window.carhopMapsCallbacks = window.carhopMapsCallbacks || [];
|
||||||
|
window.carhopMapsCallbacks.push(initializeCarhopMaps);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Mark as loading
|
||||||
|
window.carhopMapsLoading = true;
|
||||||
|
window.carhopMapsCallbacks = [initializeCarhopMaps];
|
||||||
|
|
||||||
|
// Create callback function
|
||||||
|
window.carhopMapsReady = function () {
|
||||||
|
window.carhopMapsLoading = false;
|
||||||
|
if (window.carhopMapsCallbacks) {
|
||||||
|
window.carhopMapsCallbacks.forEach(callback => callback());
|
||||||
|
window.carhopMapsCallbacks = [];
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Load Google Maps API
|
||||||
|
const script = document.createElement("script");
|
||||||
|
script.src = `https://maps.googleapis.com/maps/api/js?key=${GOOGLE_MAPS_CONFIG.apiKey}&callback=carhopMapsReady`;
|
||||||
|
script.async = true;
|
||||||
|
script.defer = true;
|
||||||
|
document.head.appendChild(script);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize when DOM is ready
|
||||||
|
if (document.readyState === "loading") {
|
||||||
|
document.addEventListener("DOMContentLoaded", loadGoogleMapsAPI);
|
||||||
|
} else {
|
||||||
|
loadGoogleMapsAPI();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Also initialize on window load as fallback
|
||||||
|
window.addEventListener("load", loadGoogleMapsAPI);
|
||||||
|
|
||||||
|
/***/ }),
|
||||||
|
|
||||||
|
/***/ "@wordpress/block-editor":
|
||||||
|
/*!*************************************!*\
|
||||||
|
!*** external ["wp","blockEditor"] ***!
|
||||||
|
\*************************************/
|
||||||
|
/***/ ((module) => {
|
||||||
|
|
||||||
|
"use strict";
|
||||||
|
module.exports = window["wp"]["blockEditor"];
|
||||||
|
|
||||||
|
/***/ }),
|
||||||
|
|
||||||
|
/***/ "@wordpress/blocks":
|
||||||
|
/*!********************************!*\
|
||||||
|
!*** external ["wp","blocks"] ***!
|
||||||
|
\********************************/
|
||||||
|
/***/ ((module) => {
|
||||||
|
|
||||||
|
"use strict";
|
||||||
|
module.exports = window["wp"]["blocks"];
|
||||||
|
|
||||||
|
/***/ }),
|
||||||
|
|
||||||
|
/***/ "@wordpress/server-side-render":
|
||||||
|
/*!******************************************!*\
|
||||||
|
!*** external ["wp","serverSideRender"] ***!
|
||||||
|
\******************************************/
|
||||||
|
/***/ ((module) => {
|
||||||
|
|
||||||
|
"use strict";
|
||||||
|
module.exports = window["wp"]["serverSideRender"];
|
||||||
|
|
||||||
|
/***/ }),
|
||||||
|
|
||||||
|
/***/ "react/jsx-runtime":
|
||||||
|
/*!**********************************!*\
|
||||||
|
!*** external "ReactJSXRuntime" ***!
|
||||||
|
\**********************************/
|
||||||
|
/***/ ((module) => {
|
||||||
|
|
||||||
|
"use strict";
|
||||||
|
module.exports = window["ReactJSXRuntime"];
|
||||||
|
|
||||||
|
/***/ })
|
||||||
|
|
||||||
|
/******/ });
|
||||||
|
/************************************************************************/
|
||||||
|
/******/ // The module cache
|
||||||
|
/******/ var __webpack_module_cache__ = {};
|
||||||
|
/******/
|
||||||
|
/******/ // The require function
|
||||||
|
/******/ function __webpack_require__(moduleId) {
|
||||||
|
/******/ // Check if module is in cache
|
||||||
|
/******/ var cachedModule = __webpack_module_cache__[moduleId];
|
||||||
|
/******/ if (cachedModule !== undefined) {
|
||||||
|
/******/ return cachedModule.exports;
|
||||||
|
/******/ }
|
||||||
|
/******/ // Create a new module (and put it into the cache)
|
||||||
|
/******/ var module = __webpack_module_cache__[moduleId] = {
|
||||||
|
/******/ // no module.id needed
|
||||||
|
/******/ // no module.loaded needed
|
||||||
|
/******/ exports: {}
|
||||||
|
/******/ };
|
||||||
|
/******/
|
||||||
|
/******/ // Execute the module function
|
||||||
|
/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
|
||||||
|
/******/
|
||||||
|
/******/ // Return the exports of the module
|
||||||
|
/******/ return module.exports;
|
||||||
|
/******/ }
|
||||||
|
/******/
|
||||||
|
/******/ // expose the modules object (__webpack_modules__)
|
||||||
|
/******/ __webpack_require__.m = __webpack_modules__;
|
||||||
|
/******/
|
||||||
|
/************************************************************************/
|
||||||
|
/******/ /* webpack/runtime/chunk loaded */
|
||||||
|
/******/ (() => {
|
||||||
|
/******/ var deferred = [];
|
||||||
|
/******/ __webpack_require__.O = (result, chunkIds, fn, priority) => {
|
||||||
|
/******/ if(chunkIds) {
|
||||||
|
/******/ priority = priority || 0;
|
||||||
|
/******/ for(var i = deferred.length; i > 0 && deferred[i - 1][2] > priority; i--) deferred[i] = deferred[i - 1];
|
||||||
|
/******/ deferred[i] = [chunkIds, fn, priority];
|
||||||
|
/******/ return;
|
||||||
|
/******/ }
|
||||||
|
/******/ var notFulfilled = Infinity;
|
||||||
|
/******/ for (var i = 0; i < deferred.length; i++) {
|
||||||
|
/******/ var [chunkIds, fn, priority] = deferred[i];
|
||||||
|
/******/ var fulfilled = true;
|
||||||
|
/******/ for (var j = 0; j < chunkIds.length; j++) {
|
||||||
|
/******/ if ((priority & 1 === 0 || notFulfilled >= priority) && Object.keys(__webpack_require__.O).every((key) => (__webpack_require__.O[key](chunkIds[j])))) {
|
||||||
|
/******/ chunkIds.splice(j--, 1);
|
||||||
|
/******/ } else {
|
||||||
|
/******/ fulfilled = false;
|
||||||
|
/******/ if(priority < notFulfilled) notFulfilled = priority;
|
||||||
|
/******/ }
|
||||||
|
/******/ }
|
||||||
|
/******/ if(fulfilled) {
|
||||||
|
/******/ deferred.splice(i--, 1)
|
||||||
|
/******/ var r = fn();
|
||||||
|
/******/ if (r !== undefined) result = r;
|
||||||
|
/******/ }
|
||||||
|
/******/ }
|
||||||
|
/******/ return result;
|
||||||
|
/******/ };
|
||||||
|
/******/ })();
|
||||||
|
/******/
|
||||||
|
/******/ /* webpack/runtime/compat get default export */
|
||||||
|
/******/ (() => {
|
||||||
|
/******/ // getDefaultExport function for compatibility with non-harmony modules
|
||||||
|
/******/ __webpack_require__.n = (module) => {
|
||||||
|
/******/ var getter = module && module.__esModule ?
|
||||||
|
/******/ () => (module['default']) :
|
||||||
|
/******/ () => (module);
|
||||||
|
/******/ __webpack_require__.d(getter, { a: getter });
|
||||||
|
/******/ return getter;
|
||||||
|
/******/ };
|
||||||
|
/******/ })();
|
||||||
|
/******/
|
||||||
|
/******/ /* webpack/runtime/define property getters */
|
||||||
|
/******/ (() => {
|
||||||
|
/******/ // define getter functions for harmony exports
|
||||||
|
/******/ __webpack_require__.d = (exports, definition) => {
|
||||||
|
/******/ for(var key in definition) {
|
||||||
|
/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
|
||||||
|
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
|
||||||
|
/******/ }
|
||||||
|
/******/ }
|
||||||
|
/******/ };
|
||||||
|
/******/ })();
|
||||||
|
/******/
|
||||||
|
/******/ /* webpack/runtime/hasOwnProperty shorthand */
|
||||||
|
/******/ (() => {
|
||||||
|
/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
|
||||||
|
/******/ })();
|
||||||
|
/******/
|
||||||
|
/******/ /* webpack/runtime/make namespace object */
|
||||||
|
/******/ (() => {
|
||||||
|
/******/ // define __esModule on exports
|
||||||
|
/******/ __webpack_require__.r = (exports) => {
|
||||||
|
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
|
||||||
|
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
||||||
|
/******/ }
|
||||||
|
/******/ Object.defineProperty(exports, '__esModule', { value: true });
|
||||||
|
/******/ };
|
||||||
|
/******/ })();
|
||||||
|
/******/
|
||||||
|
/******/ /* webpack/runtime/jsonp chunk loading */
|
||||||
|
/******/ (() => {
|
||||||
|
/******/ // no baseURI
|
||||||
|
/******/
|
||||||
|
/******/ // object to store loaded and loading chunks
|
||||||
|
/******/ // undefined = chunk not loaded, null = chunk preloaded/prefetched
|
||||||
|
/******/ // [resolve, reject, Promise] = chunk loading, 0 = chunk loaded
|
||||||
|
/******/ var installedChunks = {
|
||||||
|
/******/ "localisation-map/index": 0,
|
||||||
|
/******/ "localisation-map/style-index": 0
|
||||||
|
/******/ };
|
||||||
|
/******/
|
||||||
|
/******/ // no chunk on demand loading
|
||||||
|
/******/
|
||||||
|
/******/ // no prefetching
|
||||||
|
/******/
|
||||||
|
/******/ // no preloaded
|
||||||
|
/******/
|
||||||
|
/******/ // no HMR
|
||||||
|
/******/
|
||||||
|
/******/ // no HMR manifest
|
||||||
|
/******/
|
||||||
|
/******/ __webpack_require__.O.j = (chunkId) => (installedChunks[chunkId] === 0);
|
||||||
|
/******/
|
||||||
|
/******/ // install a JSONP callback for chunk loading
|
||||||
|
/******/ var webpackJsonpCallback = (parentChunkLoadingFunction, data) => {
|
||||||
|
/******/ var [chunkIds, moreModules, runtime] = data;
|
||||||
|
/******/ // add "moreModules" to the modules object,
|
||||||
|
/******/ // then flag all "chunkIds" as loaded and fire callback
|
||||||
|
/******/ var moduleId, chunkId, i = 0;
|
||||||
|
/******/ if(chunkIds.some((id) => (installedChunks[id] !== 0))) {
|
||||||
|
/******/ for(moduleId in moreModules) {
|
||||||
|
/******/ if(__webpack_require__.o(moreModules, moduleId)) {
|
||||||
|
/******/ __webpack_require__.m[moduleId] = moreModules[moduleId];
|
||||||
|
/******/ }
|
||||||
|
/******/ }
|
||||||
|
/******/ if(runtime) var result = runtime(__webpack_require__);
|
||||||
|
/******/ }
|
||||||
|
/******/ if(parentChunkLoadingFunction) parentChunkLoadingFunction(data);
|
||||||
|
/******/ for(;i < chunkIds.length; i++) {
|
||||||
|
/******/ chunkId = chunkIds[i];
|
||||||
|
/******/ if(__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) {
|
||||||
|
/******/ installedChunks[chunkId][0]();
|
||||||
|
/******/ }
|
||||||
|
/******/ installedChunks[chunkId] = 0;
|
||||||
|
/******/ }
|
||||||
|
/******/ return __webpack_require__.O(result);
|
||||||
|
/******/ }
|
||||||
|
/******/
|
||||||
|
/******/ var chunkLoadingGlobal = globalThis["webpackChunklocalisation_map"] = globalThis["webpackChunklocalisation_map"] || [];
|
||||||
|
/******/ chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));
|
||||||
|
/******/ chunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal));
|
||||||
|
/******/ })();
|
||||||
|
/******/
|
||||||
|
/************************************************************************/
|
||||||
|
/******/
|
||||||
|
/******/ // startup
|
||||||
|
/******/ // Load entry module and return exports
|
||||||
|
/******/ // This entry module depends on other loaded chunks and execution need to be delayed
|
||||||
|
/******/ var __webpack_exports__ = __webpack_require__.O(undefined, ["localisation-map/style-index"], () => (__webpack_require__("./src/localisation-map/index.js")))
|
||||||
|
/******/ __webpack_exports__ = __webpack_require__.O(__webpack_exports__);
|
||||||
|
/******/
|
||||||
|
/******/ })()
|
||||||
|
;
|
||||||
|
//# sourceMappingURL=index.js.map
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,13 @@
|
||||||
|
<?php
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Render template for Carhop Localisation Map block
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Generate unique ID for this map instance
|
||||||
|
$unique_id = 'carhop-map-' . uniqid();
|
||||||
|
?>
|
||||||
|
|
||||||
|
<div class="carhop-localisation-map" id="<?php echo esc_attr($unique_id); ?>">
|
||||||
|
<div class="map-container"></div>
|
||||||
|
</div>
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
/*!********************************************************************************************************************************************************************************************************************************************************!*\
|
||||||
|
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/localisation-map/style.scss ***!
|
||||||
|
\********************************************************************************************************************************************************************************************************************************************************/
|
||||||
|
.carhop-localisation-map .map-container a:after {
|
||||||
|
content: none !important;
|
||||||
|
}
|
||||||
|
.carhop-localisation-map .map-container {
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 800px;
|
||||||
|
height: 500px;
|
||||||
|
background-color: var(--wp--preset--color--primary);
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.carhop-localisation-map .map-container:not([data-initialized=true]) {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.carhop-localisation-map .map-container:not([data-initialized=true])::before {
|
||||||
|
content: "Chargement de la carte...";
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
/*!********************************************************************************************************************************************************************************************************************************************************!*\
|
||||||
|
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/localisation-map/style.scss ***!
|
||||||
|
\********************************************************************************************************************************************************************************************************************************************************/
|
||||||
|
.carhop-localisation-map .map-container a:after {
|
||||||
|
content: none !important;
|
||||||
|
}
|
||||||
|
.carhop-localisation-map .map-container {
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 800px;
|
||||||
|
height: 500px;
|
||||||
|
background-color: var(--wp--preset--color--primary);
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.carhop-localisation-map .map-container:not([data-initialized=true]) {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.carhop-localisation-map .map-container:not([data-initialized=true])::before {
|
||||||
|
content: "Chargement de la carte...";
|
||||||
|
}
|
||||||
|
|
||||||
|
/*# sourceMappingURL=style-index.css.map*/
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
{"version":3,"file":"localisation-map/style-index.css","mappings":";;;AAEE;EACC;AADH;AADC;EAIC;EACA;EACA;EACA;EACA;EACA;AAAF;AAGE;EACC;EACA;EACA;EACA;AADH;AAGG;EACC;AADJ,C","sources":["webpack://localisation-map/./src/localisation-map/style.scss"],"sourcesContent":[".carhop-localisation-map {\n\t.map-container {\n\t\ta:after {\n\t\t\tcontent: none !important;\n\t\t}\n\t\tmargin: 0 auto;\n\t\twidth: 800px;\n\t\theight: 500px;\n\t\tbackground-color: var(--wp--preset--color--primary);\n\t\tborder-radius: 8px;\n\t\toverflow: hidden;\n\n\t\t// Loading state\n\t\t&:not([data-initialized=\"true\"]) {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\tcolor: white;\n\n\t\t\t&::before {\n\t\t\t\tcontent: \"Chargement de la carte...\";\n\t\t\t}\n\t\t}\n\t}\n}\n"],"names":[],"sourceRoot":""}
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
<?php return array('dependencies' => array(), 'version' => 'ad74bc94ee25998466c6');
|
||||||
|
|
@ -0,0 +1,346 @@
|
||||||
|
/******/ (() => { // webpackBootstrap
|
||||||
|
/*!**************************************!*\
|
||||||
|
!*** ./src/localisation-map/view.js ***!
|
||||||
|
\**************************************/
|
||||||
|
/**
|
||||||
|
* Google Maps initialization for Carhop Localisation Map block
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Configuration
|
||||||
|
const GOOGLE_MAPS_CONFIG = {
|
||||||
|
apiKey: "AIzaSyBs-owKPe4qiYLb2baCTAptLeNNJX7bTQk",
|
||||||
|
center: {
|
||||||
|
lat: 50.61036915572659,
|
||||||
|
lng: 4.151529499893204
|
||||||
|
},
|
||||||
|
zoom: 11,
|
||||||
|
marker: {
|
||||||
|
title: "Carhop",
|
||||||
|
// Options de couleur : 'red', 'blue', 'green', 'yellow', 'purple', 'orange'
|
||||||
|
color: "green"
|
||||||
|
},
|
||||||
|
styles: [{
|
||||||
|
featureType: "administrative",
|
||||||
|
elementType: "geometry",
|
||||||
|
stylers: [{
|
||||||
|
color: "#19464b"
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
featureType: "administrative",
|
||||||
|
elementType: "labels.text.fill",
|
||||||
|
stylers: [{
|
||||||
|
color: "#ffffff"
|
||||||
|
}, {
|
||||||
|
gamma: "1.00"
|
||||||
|
}, {
|
||||||
|
lightness: "0"
|
||||||
|
}, {
|
||||||
|
saturation: "0"
|
||||||
|
}, {
|
||||||
|
visibility: "on"
|
||||||
|
}, {
|
||||||
|
weight: "1.5"
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
featureType: "administrative",
|
||||||
|
elementType: "labels.text.stroke",
|
||||||
|
stylers: [{
|
||||||
|
color: "#003237"
|
||||||
|
}, {
|
||||||
|
weight: "2"
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
featureType: "administrative.land_parcel",
|
||||||
|
elementType: "geometry",
|
||||||
|
stylers: [{
|
||||||
|
color: "#19464b"
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
featureType: "landscape",
|
||||||
|
elementType: "all",
|
||||||
|
stylers: [{
|
||||||
|
color: "#003237"
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
featureType: "landscape",
|
||||||
|
elementType: "geometry",
|
||||||
|
stylers: [{
|
||||||
|
color: "#003237"
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
featureType: "landscape.man_made",
|
||||||
|
elementType: "geometry",
|
||||||
|
stylers: [{
|
||||||
|
color: "#003237"
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
featureType: "landscape.natural",
|
||||||
|
elementType: "labels.text.fill",
|
||||||
|
stylers: [{
|
||||||
|
color: "#ffffff"
|
||||||
|
}, {
|
||||||
|
visibility: "on"
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
featureType: "landscape.natural.landcover",
|
||||||
|
elementType: "geometry",
|
||||||
|
stylers: [{
|
||||||
|
color: "#003237"
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
featureType: "landscape.natural.terrain",
|
||||||
|
elementType: "geometry",
|
||||||
|
stylers: [{
|
||||||
|
color: "#19464b"
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
featureType: "poi",
|
||||||
|
elementType: "all",
|
||||||
|
stylers: [{
|
||||||
|
visibility: "off"
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
featureType: "poi.attraction",
|
||||||
|
elementType: "all",
|
||||||
|
stylers: [{
|
||||||
|
visibility: "off"
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
featureType: "poi.business",
|
||||||
|
elementType: "all",
|
||||||
|
stylers: [{
|
||||||
|
visibility: "off"
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
featureType: "poi.government",
|
||||||
|
elementType: "all",
|
||||||
|
stylers: [{
|
||||||
|
visibility: "off"
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
featureType: "poi.park",
|
||||||
|
elementType: "all",
|
||||||
|
stylers: [{
|
||||||
|
visibility: "off"
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
featureType: "poi.school",
|
||||||
|
elementType: "all",
|
||||||
|
stylers: [{
|
||||||
|
visibility: "off"
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
featureType: "poi.medical",
|
||||||
|
elementType: "all",
|
||||||
|
stylers: [{
|
||||||
|
visibility: "off"
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
featureType: "poi.place_of_worship",
|
||||||
|
elementType: "all",
|
||||||
|
stylers: [{
|
||||||
|
visibility: "off"
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
featureType: "poi.sports_complex",
|
||||||
|
elementType: "all",
|
||||||
|
stylers: [{
|
||||||
|
visibility: "off"
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
featureType: "road.highway",
|
||||||
|
elementType: "geometry.fill",
|
||||||
|
stylers: [{
|
||||||
|
color: "#136f63"
|
||||||
|
}, {
|
||||||
|
lightness: "0"
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
featureType: "road.highway",
|
||||||
|
elementType: "geometry.stroke",
|
||||||
|
stylers: [{
|
||||||
|
visibility: "off"
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
featureType: "road.highway",
|
||||||
|
elementType: "labels",
|
||||||
|
stylers: [{
|
||||||
|
visibility: "off"
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
featureType: "road.highway",
|
||||||
|
elementType: "labels.text.fill",
|
||||||
|
stylers: [{
|
||||||
|
color: "#ffffff"
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
featureType: "road.highway",
|
||||||
|
elementType: "labels.text.stroke",
|
||||||
|
stylers: [{
|
||||||
|
color: "#0a1f14"
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
featureType: "road.arterial",
|
||||||
|
elementType: "geometry",
|
||||||
|
stylers: [{
|
||||||
|
color: "#136f63"
|
||||||
|
}, {
|
||||||
|
lightness: 18
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
featureType: "road.arterial",
|
||||||
|
elementType: "geometry.fill",
|
||||||
|
stylers: [{
|
||||||
|
color: "#136f63"
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
featureType: "road.arterial",
|
||||||
|
elementType: "labels",
|
||||||
|
stylers: [{
|
||||||
|
visibility: "off"
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
featureType: "road.arterial",
|
||||||
|
elementType: "labels.text.fill",
|
||||||
|
stylers: [{
|
||||||
|
color: "#ffffff"
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
featureType: "road.arterial",
|
||||||
|
elementType: "labels.text.stroke",
|
||||||
|
stylers: [{
|
||||||
|
color: "#2c2c2c"
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
featureType: "road.local",
|
||||||
|
elementType: "geometry",
|
||||||
|
stylers: [{
|
||||||
|
color: "#136F63"
|
||||||
|
}, {
|
||||||
|
lightness: -20
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
featureType: "road.local",
|
||||||
|
elementType: "labels",
|
||||||
|
stylers: [{
|
||||||
|
visibility: "off"
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
featureType: "road.local",
|
||||||
|
elementType: "labels.text.fill",
|
||||||
|
stylers: [{
|
||||||
|
color: "#ffffff"
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
featureType: "transit",
|
||||||
|
elementType: "geometry",
|
||||||
|
stylers: [{
|
||||||
|
color: "#136F63"
|
||||||
|
}, {
|
||||||
|
lightness: -20
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
featureType: "water",
|
||||||
|
elementType: "geometry",
|
||||||
|
stylers: [{
|
||||||
|
color: "#136F63"
|
||||||
|
}, {
|
||||||
|
lightness: -20
|
||||||
|
}]
|
||||||
|
}]
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Initialize Google Maps for all map containers on the page
|
||||||
|
*/
|
||||||
|
function initializeCarhopMaps() {
|
||||||
|
// Find all map containers
|
||||||
|
const mapContainers = document.querySelectorAll(".carhop-localisation-map");
|
||||||
|
mapContainers.forEach(container => {
|
||||||
|
const mapElement = container.querySelector(".map-container");
|
||||||
|
if (!mapElement || mapElement.dataset.initialized === "true") {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create map
|
||||||
|
const map = new google.maps.Map(mapElement, {
|
||||||
|
zoom: GOOGLE_MAPS_CONFIG.zoom,
|
||||||
|
center: new google.maps.LatLng(GOOGLE_MAPS_CONFIG.center.lat, GOOGLE_MAPS_CONFIG.center.lng),
|
||||||
|
styles: GOOGLE_MAPS_CONFIG.styles,
|
||||||
|
// Contrôles de zoom
|
||||||
|
zoomControl: true,
|
||||||
|
zoomControlOptions: {
|
||||||
|
position: google.maps.ControlPosition.RIGHT_TOP,
|
||||||
|
style: google.maps.ZoomControlStyle.DEFAULT
|
||||||
|
},
|
||||||
|
// Autres contrôles utiles
|
||||||
|
mapTypeControl: false,
|
||||||
|
// Masquer le sélecteur de type de carte
|
||||||
|
streetViewControl: false,
|
||||||
|
// Contrôle Street View
|
||||||
|
fullscreenControl: false // Bouton plein écran
|
||||||
|
});
|
||||||
|
const image = "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png";
|
||||||
|
// Add marker with custom color
|
||||||
|
new google.maps.Marker({
|
||||||
|
position: new google.maps.LatLng(GOOGLE_MAPS_CONFIG.center.lat, GOOGLE_MAPS_CONFIG.center.lng),
|
||||||
|
map: map,
|
||||||
|
title: GOOGLE_MAPS_CONFIG.marker.title,
|
||||||
|
icon: image
|
||||||
|
});
|
||||||
|
|
||||||
|
// Mark as initialized
|
||||||
|
mapElement.dataset.initialized = "true";
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Load Google Maps API and initialize maps
|
||||||
|
*/
|
||||||
|
function loadGoogleMapsAPI() {
|
||||||
|
// Check if Google Maps is already loaded
|
||||||
|
if (typeof google !== "undefined" && google.maps) {
|
||||||
|
initializeCarhopMaps();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check if script is already loading
|
||||||
|
if (window.carhopMapsLoading) {
|
||||||
|
window.carhopMapsCallbacks = window.carhopMapsCallbacks || [];
|
||||||
|
window.carhopMapsCallbacks.push(initializeCarhopMaps);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Mark as loading
|
||||||
|
window.carhopMapsLoading = true;
|
||||||
|
window.carhopMapsCallbacks = [initializeCarhopMaps];
|
||||||
|
|
||||||
|
// Create callback function
|
||||||
|
window.carhopMapsReady = function () {
|
||||||
|
window.carhopMapsLoading = false;
|
||||||
|
if (window.carhopMapsCallbacks) {
|
||||||
|
window.carhopMapsCallbacks.forEach(callback => callback());
|
||||||
|
window.carhopMapsCallbacks = [];
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Load Google Maps API
|
||||||
|
const script = document.createElement("script");
|
||||||
|
script.src = `https://maps.googleapis.com/maps/api/js?key=${GOOGLE_MAPS_CONFIG.apiKey}&callback=carhopMapsReady`;
|
||||||
|
script.async = true;
|
||||||
|
script.defer = true;
|
||||||
|
document.head.appendChild(script);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize when DOM is ready
|
||||||
|
if (document.readyState === "loading") {
|
||||||
|
document.addEventListener("DOMContentLoaded", loadGoogleMapsAPI);
|
||||||
|
} else {
|
||||||
|
loadGoogleMapsAPI();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Also initialize on window load as fallback
|
||||||
|
window.addEventListener("load", loadGoogleMapsAPI);
|
||||||
|
/******/ })()
|
||||||
|
;
|
||||||
|
//# sourceMappingURL=view.js.map
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,36 @@
|
||||||
|
<?php
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Plugin Name: Localisation Map
|
||||||
|
* Description: Example block scaffolded with Create Block tool.
|
||||||
|
* Version: 0.1.0
|
||||||
|
* Requires at least: 6.7
|
||||||
|
* Requires PHP: 7.4
|
||||||
|
* Author: The WordPress Contributors
|
||||||
|
* License: GPL-2.0-or-later
|
||||||
|
* License URI: https://www.gnu.org/licenses/gpl-2.0.html
|
||||||
|
* Text Domain: localisation-map
|
||||||
|
*
|
||||||
|
* @package CreateBlock
|
||||||
|
*/
|
||||||
|
|
||||||
|
if (! defined('ABSPATH')) {
|
||||||
|
exit; // Exit if accessed directly.
|
||||||
|
}
|
||||||
|
|
||||||
|
function create_block_localisation_map_block_init()
|
||||||
|
{
|
||||||
|
if (function_exists('wp_register_block_types_from_metadata_collection')) {
|
||||||
|
wp_register_block_types_from_metadata_collection(__DIR__ . '/build', __DIR__ . '/build/blocks-manifest.php');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (function_exists('wp_register_block_metadata_collection')) {
|
||||||
|
wp_register_block_metadata_collection(__DIR__ . '/build', __DIR__ . '/build/blocks-manifest.php');
|
||||||
|
}
|
||||||
|
$manifest_data = require __DIR__ . '/build/blocks-manifest.php';
|
||||||
|
foreach (array_keys($manifest_data) as $block_type) {
|
||||||
|
register_block_type(__DIR__ . "/build/{$block_type}");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
add_action('init', 'create_block_localisation_map_block_init');
|
||||||
20872
plugins/carhop-blocks/blocks/localisation-map/package-lock.json
generated
Normal file
20872
plugins/carhop-blocks/blocks/localisation-map/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
20
plugins/carhop-blocks/blocks/localisation-map/package.json
Normal file
20
plugins/carhop-blocks/blocks/localisation-map/package.json
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
{
|
||||||
|
"name": "localisation-map",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"description": "Example block scaffolded with Create Block tool.",
|
||||||
|
"author": "The WordPress Contributors",
|
||||||
|
"license": "GPL-2.0-or-later",
|
||||||
|
"main": "build/index.js",
|
||||||
|
"scripts": {
|
||||||
|
"build": "wp-scripts build --blocks-manifest",
|
||||||
|
"format": "wp-scripts format",
|
||||||
|
"lint:css": "wp-scripts lint-style",
|
||||||
|
"lint:js": "wp-scripts lint-js",
|
||||||
|
"packages-update": "wp-scripts packages-update",
|
||||||
|
"plugin-zip": "wp-scripts plugin-zip",
|
||||||
|
"start": "wp-scripts start --blocks-manifest"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@wordpress/scripts": "^30.25.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
55
plugins/carhop-blocks/blocks/localisation-map/readme.txt
Normal file
55
plugins/carhop-blocks/blocks/localisation-map/readme.txt
Normal file
|
|
@ -0,0 +1,55 @@
|
||||||
|
=== Localisation Map ===
|
||||||
|
Contributors: The WordPress Contributors
|
||||||
|
Tags: block
|
||||||
|
Tested up to: 6.7
|
||||||
|
Stable tag: 0.1.0
|
||||||
|
License: GPL-2.0-or-later
|
||||||
|
License URI: https://www.gnu.org/licenses/gpl-2.0.html
|
||||||
|
|
||||||
|
Example block scaffolded with Create Block tool.
|
||||||
|
|
||||||
|
== Description ==
|
||||||
|
|
||||||
|
This is the long description. No limit, and you can use Markdown (as well as in the following sections).
|
||||||
|
|
||||||
|
For backwards compatibility, if this section is missing, the full length of the short description will be used, and
|
||||||
|
Markdown parsed.
|
||||||
|
|
||||||
|
== Installation ==
|
||||||
|
|
||||||
|
This section describes how to install the plugin and get it working.
|
||||||
|
|
||||||
|
e.g.
|
||||||
|
|
||||||
|
1. Upload the plugin files to the `/wp-content/plugins/localisation-map` directory, or install the plugin through the WordPress plugins screen directly.
|
||||||
|
1. Activate the plugin through the 'Plugins' screen in WordPress
|
||||||
|
|
||||||
|
|
||||||
|
== Frequently Asked Questions ==
|
||||||
|
|
||||||
|
= A question that someone might have =
|
||||||
|
|
||||||
|
An answer to that question.
|
||||||
|
|
||||||
|
= What about foo bar? =
|
||||||
|
|
||||||
|
Answer to foo bar dilemma.
|
||||||
|
|
||||||
|
== Screenshots ==
|
||||||
|
|
||||||
|
1. This screen shot description corresponds to screenshot-1.(png|jpg|jpeg|gif). Note that the screenshot is taken from
|
||||||
|
the /assets directory or the directory that contains the stable readme.txt (tags or trunk). Screenshots in the /assets
|
||||||
|
directory take precedence. For example, `/assets/screenshot-1.png` would win over `/tags/4.3/screenshot-1.png`
|
||||||
|
(or jpg, jpeg, gif).
|
||||||
|
2. This is the second screen shot
|
||||||
|
|
||||||
|
== Changelog ==
|
||||||
|
|
||||||
|
= 0.1.0 =
|
||||||
|
* Release
|
||||||
|
|
||||||
|
== Arbitrary section ==
|
||||||
|
|
||||||
|
You may provide arbitrary sections, in the same format as the ones above. This may be of use for extremely complicated
|
||||||
|
plugins where more information needs to be conveyed that doesn't fit into the categories of "description" or
|
||||||
|
"installation." Arbitrary sections will be shown below the built-in sections outlined above.
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://schemas.wp.org/trunk/block.json",
|
||||||
|
"apiVersion": 3,
|
||||||
|
"name": "carhop-blocks/localisation-map",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"title": "Localisation Map",
|
||||||
|
"category": "carhop-blocks",
|
||||||
|
"icon": "smiley",
|
||||||
|
"description": "Example block scaffolded with Create Block tool.",
|
||||||
|
"example": {},
|
||||||
|
"supports": {
|
||||||
|
"html": false
|
||||||
|
},
|
||||||
|
"textdomain": "localisation-map",
|
||||||
|
"editorScript": "file:./index.js",
|
||||||
|
"editorStyle": "file:./index.css",
|
||||||
|
"style": "file:./style-index.css",
|
||||||
|
"viewScript": "file:./view.js",
|
||||||
|
"render": "file:./render.php"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
import ServerSideRender from "@wordpress/server-side-render";
|
||||||
|
import { useBlockProps } from "@wordpress/block-editor";
|
||||||
|
|
||||||
|
export default function Edit(props) {
|
||||||
|
return (
|
||||||
|
<div {...useBlockProps()}>
|
||||||
|
<ServerSideRender
|
||||||
|
block="carhop-blocks/localisation-map"
|
||||||
|
attributes={props.attributes}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
import { registerBlockType } from "@wordpress/blocks";
|
||||||
|
import "./style.scss";
|
||||||
|
|
||||||
|
import Edit from "./edit";
|
||||||
|
import metadata from "./block.json";
|
||||||
|
|
||||||
|
// Import the view script to load map handling on the backend
|
||||||
|
import "./view.js";
|
||||||
|
|
||||||
|
registerBlockType(metadata.name, {
|
||||||
|
edit: Edit,
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
<?php
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Render template for Carhop Localisation Map block
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Generate unique ID for this map instance
|
||||||
|
$unique_id = 'carhop-map-' . uniqid();
|
||||||
|
?>
|
||||||
|
|
||||||
|
<div class="carhop-localisation-map" id="<?php echo esc_attr($unique_id); ?>">
|
||||||
|
<div class="map-container"></div>
|
||||||
|
</div>
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
.carhop-localisation-map {
|
||||||
|
.map-container {
|
||||||
|
a:after {
|
||||||
|
content: none !important;
|
||||||
|
}
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 800px;
|
||||||
|
height: 500px;
|
||||||
|
background-color: var(--wp--preset--color--primary);
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
// Loading state
|
||||||
|
&:not([data-initialized="true"]) {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: white;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: "Chargement de la carte...";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,461 @@
|
||||||
|
/**
|
||||||
|
* Google Maps initialization for Carhop Localisation Map block
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Configuration
|
||||||
|
const GOOGLE_MAPS_CONFIG = {
|
||||||
|
apiKey: "AIzaSyBs-owKPe4qiYLb2baCTAptLeNNJX7bTQk",
|
||||||
|
center: {
|
||||||
|
lat: 50.61036915572659,
|
||||||
|
lng: 4.151529499893204,
|
||||||
|
},
|
||||||
|
zoom: 11,
|
||||||
|
marker: {
|
||||||
|
title: "Carhop",
|
||||||
|
// Options de couleur : 'red', 'blue', 'green', 'yellow', 'purple', 'orange'
|
||||||
|
color: "green",
|
||||||
|
},
|
||||||
|
styles: [
|
||||||
|
{
|
||||||
|
featureType: "administrative",
|
||||||
|
elementType: "geometry",
|
||||||
|
stylers: [
|
||||||
|
{
|
||||||
|
color: "#19464b",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
featureType: "administrative",
|
||||||
|
elementType: "labels.text.fill",
|
||||||
|
stylers: [
|
||||||
|
{
|
||||||
|
color: "#ffffff",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
gamma: "1.00",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
lightness: "0",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
saturation: "0",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
visibility: "on",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
weight: "1.5",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
featureType: "administrative",
|
||||||
|
elementType: "labels.text.stroke",
|
||||||
|
stylers: [
|
||||||
|
{
|
||||||
|
color: "#003237",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
weight: "2",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
featureType: "administrative.land_parcel",
|
||||||
|
elementType: "geometry",
|
||||||
|
stylers: [
|
||||||
|
{
|
||||||
|
color: "#19464b",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
featureType: "landscape",
|
||||||
|
elementType: "all",
|
||||||
|
stylers: [
|
||||||
|
{
|
||||||
|
color: "#003237",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
featureType: "landscape",
|
||||||
|
elementType: "geometry",
|
||||||
|
stylers: [
|
||||||
|
{
|
||||||
|
color: "#003237",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
featureType: "landscape.man_made",
|
||||||
|
elementType: "geometry",
|
||||||
|
stylers: [
|
||||||
|
{
|
||||||
|
color: "#003237",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
featureType: "landscape.natural",
|
||||||
|
elementType: "labels.text.fill",
|
||||||
|
stylers: [
|
||||||
|
{
|
||||||
|
color: "#ffffff",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
visibility: "on",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
featureType: "landscape.natural.landcover",
|
||||||
|
elementType: "geometry",
|
||||||
|
stylers: [
|
||||||
|
{
|
||||||
|
color: "#003237",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
featureType: "landscape.natural.terrain",
|
||||||
|
elementType: "geometry",
|
||||||
|
stylers: [
|
||||||
|
{
|
||||||
|
color: "#19464b",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
featureType: "poi",
|
||||||
|
elementType: "all",
|
||||||
|
stylers: [
|
||||||
|
{
|
||||||
|
visibility: "off",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
featureType: "poi.attraction",
|
||||||
|
elementType: "all",
|
||||||
|
stylers: [
|
||||||
|
{
|
||||||
|
visibility: "off",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
featureType: "poi.business",
|
||||||
|
elementType: "all",
|
||||||
|
stylers: [
|
||||||
|
{
|
||||||
|
visibility: "off",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
featureType: "poi.government",
|
||||||
|
elementType: "all",
|
||||||
|
stylers: [
|
||||||
|
{
|
||||||
|
visibility: "off",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
featureType: "poi.park",
|
||||||
|
elementType: "all",
|
||||||
|
stylers: [
|
||||||
|
{
|
||||||
|
visibility: "off",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
featureType: "poi.school",
|
||||||
|
elementType: "all",
|
||||||
|
stylers: [
|
||||||
|
{
|
||||||
|
visibility: "off",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
featureType: "poi.medical",
|
||||||
|
elementType: "all",
|
||||||
|
stylers: [
|
||||||
|
{
|
||||||
|
visibility: "off",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
featureType: "poi.place_of_worship",
|
||||||
|
elementType: "all",
|
||||||
|
stylers: [
|
||||||
|
{
|
||||||
|
visibility: "off",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
featureType: "poi.sports_complex",
|
||||||
|
elementType: "all",
|
||||||
|
stylers: [
|
||||||
|
{
|
||||||
|
visibility: "off",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
featureType: "road.highway",
|
||||||
|
elementType: "geometry.fill",
|
||||||
|
stylers: [
|
||||||
|
{
|
||||||
|
color: "#136f63",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
lightness: "0",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
featureType: "road.highway",
|
||||||
|
elementType: "geometry.stroke",
|
||||||
|
stylers: [
|
||||||
|
{
|
||||||
|
visibility: "off",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
featureType: "road.highway",
|
||||||
|
elementType: "labels",
|
||||||
|
stylers: [
|
||||||
|
{
|
||||||
|
visibility: "off",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
featureType: "road.highway",
|
||||||
|
elementType: "labels.text.fill",
|
||||||
|
stylers: [
|
||||||
|
{
|
||||||
|
color: "#ffffff",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
featureType: "road.highway",
|
||||||
|
elementType: "labels.text.stroke",
|
||||||
|
stylers: [
|
||||||
|
{
|
||||||
|
color: "#0a1f14",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
featureType: "road.arterial",
|
||||||
|
elementType: "geometry",
|
||||||
|
stylers: [
|
||||||
|
{
|
||||||
|
color: "#136f63",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
lightness: 18,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
featureType: "road.arterial",
|
||||||
|
elementType: "geometry.fill",
|
||||||
|
stylers: [
|
||||||
|
{
|
||||||
|
color: "#136f63",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
featureType: "road.arterial",
|
||||||
|
elementType: "labels",
|
||||||
|
stylers: [
|
||||||
|
{
|
||||||
|
visibility: "off",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
featureType: "road.arterial",
|
||||||
|
elementType: "labels.text.fill",
|
||||||
|
stylers: [
|
||||||
|
{
|
||||||
|
color: "#ffffff",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
featureType: "road.arterial",
|
||||||
|
elementType: "labels.text.stroke",
|
||||||
|
stylers: [
|
||||||
|
{
|
||||||
|
color: "#2c2c2c",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
featureType: "road.local",
|
||||||
|
elementType: "geometry",
|
||||||
|
stylers: [
|
||||||
|
{
|
||||||
|
color: "#136F63",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
lightness: -20,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
featureType: "road.local",
|
||||||
|
elementType: "labels",
|
||||||
|
stylers: [
|
||||||
|
{
|
||||||
|
visibility: "off",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
featureType: "road.local",
|
||||||
|
elementType: "labels.text.fill",
|
||||||
|
stylers: [
|
||||||
|
{
|
||||||
|
color: "#ffffff",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
featureType: "transit",
|
||||||
|
elementType: "geometry",
|
||||||
|
stylers: [
|
||||||
|
{
|
||||||
|
color: "#136F63",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
lightness: -20,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
featureType: "water",
|
||||||
|
elementType: "geometry",
|
||||||
|
stylers: [
|
||||||
|
{
|
||||||
|
color: "#136F63",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
lightness: -20,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Initialize Google Maps for all map containers on the page
|
||||||
|
*/
|
||||||
|
function initializeCarhopMaps() {
|
||||||
|
// Find all map containers
|
||||||
|
const mapContainers = document.querySelectorAll(".carhop-localisation-map");
|
||||||
|
|
||||||
|
mapContainers.forEach((container) => {
|
||||||
|
const mapElement = container.querySelector(".map-container");
|
||||||
|
|
||||||
|
if (!mapElement || mapElement.dataset.initialized === "true") {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create map
|
||||||
|
const map = new google.maps.Map(mapElement, {
|
||||||
|
zoom: GOOGLE_MAPS_CONFIG.zoom,
|
||||||
|
center: new google.maps.LatLng(
|
||||||
|
GOOGLE_MAPS_CONFIG.center.lat,
|
||||||
|
GOOGLE_MAPS_CONFIG.center.lng,
|
||||||
|
),
|
||||||
|
styles: GOOGLE_MAPS_CONFIG.styles,
|
||||||
|
// Contrôles de zoom
|
||||||
|
zoomControl: true,
|
||||||
|
zoomControlOptions: {
|
||||||
|
position: google.maps.ControlPosition.RIGHT_TOP,
|
||||||
|
style: google.maps.ZoomControlStyle.DEFAULT,
|
||||||
|
},
|
||||||
|
// Autres contrôles utiles
|
||||||
|
mapTypeControl: false, // Masquer le sélecteur de type de carte
|
||||||
|
streetViewControl: false, // Contrôle Street View
|
||||||
|
fullscreenControl: false, // Bouton plein écran
|
||||||
|
});
|
||||||
|
const image =
|
||||||
|
"https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png";
|
||||||
|
// Add marker with custom color
|
||||||
|
new google.maps.Marker({
|
||||||
|
position: new google.maps.LatLng(
|
||||||
|
GOOGLE_MAPS_CONFIG.center.lat,
|
||||||
|
GOOGLE_MAPS_CONFIG.center.lng,
|
||||||
|
),
|
||||||
|
map: map,
|
||||||
|
title: GOOGLE_MAPS_CONFIG.marker.title,
|
||||||
|
icon: image,
|
||||||
|
});
|
||||||
|
|
||||||
|
// Mark as initialized
|
||||||
|
mapElement.dataset.initialized = "true";
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Load Google Maps API and initialize maps
|
||||||
|
*/
|
||||||
|
function loadGoogleMapsAPI() {
|
||||||
|
// Check if Google Maps is already loaded
|
||||||
|
if (typeof google !== "undefined" && google.maps) {
|
||||||
|
initializeCarhopMaps();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check if script is already loading
|
||||||
|
if (window.carhopMapsLoading) {
|
||||||
|
window.carhopMapsCallbacks = window.carhopMapsCallbacks || [];
|
||||||
|
window.carhopMapsCallbacks.push(initializeCarhopMaps);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Mark as loading
|
||||||
|
window.carhopMapsLoading = true;
|
||||||
|
window.carhopMapsCallbacks = [initializeCarhopMaps];
|
||||||
|
|
||||||
|
// Create callback function
|
||||||
|
window.carhopMapsReady = function () {
|
||||||
|
window.carhopMapsLoading = false;
|
||||||
|
if (window.carhopMapsCallbacks) {
|
||||||
|
window.carhopMapsCallbacks.forEach((callback) => callback());
|
||||||
|
window.carhopMapsCallbacks = [];
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Load Google Maps API
|
||||||
|
const script = document.createElement("script");
|
||||||
|
script.src = `https://maps.googleapis.com/maps/api/js?key=${GOOGLE_MAPS_CONFIG.apiKey}&callback=carhopMapsReady`;
|
||||||
|
script.async = true;
|
||||||
|
script.defer = true;
|
||||||
|
document.head.appendChild(script);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize when DOM is ready
|
||||||
|
if (document.readyState === "loading") {
|
||||||
|
document.addEventListener("DOMContentLoaded", loadGoogleMapsAPI);
|
||||||
|
} else {
|
||||||
|
loadGoogleMapsAPI();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Also initialize on window load as fallback
|
||||||
|
window.addEventListener("load", loadGoogleMapsAPI);
|
||||||
Loading…
Reference in New Issue
Block a user