diff --git a/README.md b/README.md index ba523ba..04d8f82 100644 --- a/README.md +++ b/README.md @@ -19,27 +19,27 @@ The Apple Maps Plugin allows you to easily integrate Apple Maps into your WordPr ### Manual Installation 1. **Download the Plugin:** - - Download the plugin zip file from the [GitHub repository](https://github.com/stevennoad/apple-maps-plugin). - - Rename the zip file to `apple-maps`. + - Download the plugin zip file from the [GitHub repository](https://github.com/stevennoad/apple-maps-plugin). + - Rename the zip file to `apple-maps`. 2. **Upload the Plugin:** - - Navigate to `Plugins > Add New` in your WordPress admin dashboard. - - Click on the `Upload Plugin` button. - - Choose the downloaded zip file and click `Install Now`. + - Navigate to `Plugins > Add New` in your WordPress admin dashboard. + - Click on the `Upload Plugin` button. + - Choose the downloaded zip file and click `Install Now`. 3. **Activate the Plugin:** - - After the plugin is installed, click on `Activate Plugin`. + - After the plugin is installed, click on `Activate Plugin`. ## Configuration ### API Key 1. **Get Your MapKit JS Token:** - - Obtain your Apple MapKit JS token from the Apple Developer portal. + - Obtain your Apple MapKit JS token from the Apple Developer portal. 2. **Enter the Token in Plugin Settings:** - - Navigate to `Settings > Apple Map` in your WordPress admin dashboard. - - Enter your MapKit JS token in the designated field. + - Navigate to `Settings > Apple Map` in your WordPress admin dashboard. + - Enter your MapKit JS token in the designated field. ### Shortcode Usage @@ -113,27 +113,28 @@ You can customise the map further by including a `settings` object within your s ```html "settings": { - "colorScheme": "light", - "cameraDistance": 1000, - "isZoomEnabled": true, - "isScrollEnabled": true, - "isRotationEnabled": true, - "style": "compact_callout", - "center": { - "latitude": 37.3318, - "longitude": -122.0312 - }, - "cameraZoomRange": { - "min": 5000, - "max": 10000 - }, - "cameraBoundary": { - "latitude": 37.3349, - "longitude": -122.0090, - "spanLatitude": 0.05, - "spanLongitude": 0.05 - } - } + "mapHeight": 500, + "colorScheme": "light", + "cameraDistance": 1000, + "isZoomEnabled": true, + "isScrollEnabled": true, + "isRotationEnabled": true, + "style": "compact_callout", + "center": { + "latitude": 37.3318, + "longitude": -122.0312 + }, + "cameraZoomRange": { + "min": 5000, + "max": 10000 + }, + "cameraBoundary": { + "latitude": 37.3349, + "longitude": -122.0090, + "spanLatitude": 0.05, + "spanLongitude": 0.05 + } +} ``` #### Full example of multiple locations with custom setting @@ -159,11 +160,11 @@ You can customise the map further by including a `settings` object within your s } ], "settings": { - "colorScheme": "dark", - "isZoomEnabled": true, - "isScrollEnabled": true, - "isRotationEnabled": true - } + "colorScheme": "dark", + "isZoomEnabled": true, + "isScrollEnabled": true, + "isRotationEnabled": true + } } [/apple_map] ``` diff --git a/apple-maps.php b/apple-maps.php index c74f5db..bdc3e0c 100644 --- a/apple-maps.php +++ b/apple-maps.php @@ -3,7 +3,7 @@ Plugin Name: Apple Maps Plugin URI: https://github.com/stevennoad/apple-maps-plugin Description: A plugin to add Apple Maps with multiple locations. -Version: 2.1.1 +Version: 2.1.2 Author: Steve Noad License: MIT Text Domain: apple-maps diff --git a/assets/js/places.js b/assets/js/places.js index bed104c..b249ef5 100644 --- a/assets/js/places.js +++ b/assets/js/places.js @@ -108,6 +108,8 @@ document.addEventListener('DOMContentLoaded', () => { if (settings.cameraDistance !== undefined) { map.cameraDistance = settings.cameraDistance; } + + mapContainer.style.height = `${settings.mapHeight || 500}px`; } }); }); diff --git a/assets/js/standard.js b/assets/js/standard.js index d795fe7..94edee5 100644 --- a/assets/js/standard.js +++ b/assets/js/standard.js @@ -80,6 +80,18 @@ document.addEventListener('DOMContentLoaded', () => { map.showItems(annotations); console.log('Annotations added to map for element ID: ' + mapElementId); + if (settings.mapHeight) { + const mapContainer = document.getElementById(mapElementId); + if (mapContainer) { + mapContainer.style.height = `${settings.mapHeight}px`; + } + } else { + const mapContainer = document.getElementById(mapElementId); + if (mapContainer) { + mapContainer.style.height = `500px`; + } + } + if (settings.cameraBoundary?.latitude !== undefined && settings.cameraBoundary?.longitude !== undefined && settings.cameraBoundary?.spanLatitude !== undefined && settings.cameraBoundary?.spanLongitude !== undefined) { const cameraBoundary = new mapkit.CoordinateRegion( new mapkit.Coordinate(settings.cameraBoundary.latitude, settings.cameraBoundary.longitude),