WordPress.org
Get WordPress

Plugin Directory

Changeset 3433258


Ignore:
Timestamp:
01/06/2026 06:22:27 AM (3 months ago)
Author:
krishaweb
Message:

resolving plugin compatibility issue

Location:
add-multiple-marker
Files:
94 added
10 edited

Legend:

Unmodified
Added
Removed

  • add-multiple-marker/trunk/addmultiplemarker.php

    r2608577 r3433258  
    11<?php
    22/**
    3  * Plugin Name: Add Multiple Marker
    4  * Plugin URI: http://addmultiplemarker.com
    5  * Description: Display Custom Multiple Markers of your company locations on Google Maps with title, icon, and show the area of your business. A feature-rich functionality without any programming that saves your 15+ hours.
    6  * Author:      KrishaWeb
    7  * Author URI:  https://www.krishaweb.com
    8  * Version:     1.2
    9  * Text Domain: addmultiplemarker
    10  * Domain Path: /languages
     3 * Plugin Name:     Multi Location Marker
     4 * Plugin URI:      https://wordpress.org/plugins/add-multiple-marker
     5 * Description:     Display multiple custom location markers with titles, icons, and service areas without any technical setup.
     6 * Author:          KrishaWeb
     7 * Author URI:      https://www.krishaweb.com
     8 * Version:         1.3
     9 * Text Domain:     add-multiple-marker
     10 * Domain Path:     /languages
     11 * Tested up to:    6.9
     12 * License:         GPLv3 or later
     13 * License URI:     https://www.gnu.org/licenses/gpl-3.0.html
    1114 *
    1215 * @package Addmultiplemarker
    … …  
    1720}
    1821// Define plugin requires constant.
    19 define( 'ADDMULTIPLEMARKER_VERSION', '1.2' );
     22define( 'ADDMULTIPLEMARKER_VERSION', '1.3' );
    2023define( 'ADDMULTIPLEMARKER_IN_REQUIRED_WP_VERSION', '4.4' );
    2124define( 'ADDMULTIPLEMARKER_FILE', __FILE__ );
    … …  
    2427
    2528/**
    26  * register_activation_hook().
    27  * 
     29 * Register_activation_hook().
     30 *
    2831 * When a plugin is activated, this action is called.
    2932 */
    … …  
    3437
    3538/**
    36  * register_deactivation_hook().
     39 * Register_deactivation_hook().
    3740 *
    3841 * When a plugin is deactivated, this action is called.
    … …  
    4750 */
    4851function addmultiplemarker_plugin_initialize() {
    49     require_once( ADDMULTIPLEMARKER_PLUGIN_DIR . '/functions.php' );
     52    require_once ADDMULTIPLEMARKER_PLUGIN_DIR . '/functions.php';
     53    require_once ADDMULTIPLEMARKER_PLUGIN_DIR . '/admin/helper.php';
    5054    // Class calling.
    5155    $multiplemarker_obj = new Addmultiplemarker();
    52 
    5356}
    54 add_action( 'init', 'addmultiplemarker_plugin_initialize');
     57add_action( 'init', 'addmultiplemarker_plugin_initialize' );

  • add-multiple-marker/trunk/admin/admin-options.php

    r2116120 r3433258  
     1<?php
     2/**
     3 * Global settings page.
     4 *
     5 * @package addmultiplemarker
     6 */
     7
     8if ( ! defined( 'ABSPATH' ) ) {
     9    exit;
     10}
     11?>
    112<div class="amm-admin-main-wrap">
    213    <div class="amm-map-create">
    314        <form class="amm-get-location" method="post" action="">
    4             <?php wp_nonce_field(); ?>
     15            <?php wp_nonce_field( 'addmultiplemarker_save_map' ); ?>
    516            <div class="amm-map-content full">
    617                <!-- header start -->
    … …  
    819                    <div class="amm-container clearfix">
    920                        <div class="amm-logo">
    10                             <img src="<?php echo ADDMULTIPLEMARKER_PLUGIN_URL ?>admin/images/amm-logo.png" alt="logo">
     21                            <img src="<?php echo esc_url( ADDMULTIPLEMARKER_PLUGIN_URL . 'admin/images/amm-logo.png' ); ?>" alt="logo">
    1122                        </div>
    1223                        <div class="sidebar-action">
    13                             <img src="<?php echo ADDMULTIPLEMARKER_PLUGIN_URL ?>admin/images/svg/menu.svg" alt="menu" class="imgsvg">
     24                            <img src="<?php echo esc_url( ADDMULTIPLEMARKER_PLUGIN_URL . 'admin/images/svg/menu.svg' ); ?>" alt="menu" class="imgsvg open-sidebar">
     25                            <img src="<?php echo esc_url( ADDMULTIPLEMARKER_PLUGIN_URL . 'admin/images/svg/amm-cancel.svg' ); ?>" alt="menu" class="imgsvg close-sidebar">
    1426                        </div>
    1527                        <div class="amm-search-action">
    16                             <a href="javascript:;"><?php _e( 'Search Location', 'addmultiplemarker' ); ?></a>
     28                            <a href="javascript:;"><?php esc_html_e( 'Search Location', 'add-multiple-marker' ); ?></a>
    1729                        </div>
    1830                        <!-- search bar start -->
    … …  
    2032                            <div class="wraps">
    2133                                <span class="amm-icon amm-search">
    22                                     <img src="<?php echo ADDMULTIPLEMARKER_PLUGIN_URL ?>admin/images/svg/search.svg" alt="search" class="imgsvg">
     34                                    <img src="<?php echo esc_url( ADDMULTIPLEMARKER_PLUGIN_URL . 'admin/images/svg/search.svg' ); ?>" alt="search" class="imgsvg">
    2335                                </span>
    2436                                <input type="search" id="amm_search_area" name="amm_search_area" placeholder="Search your location area" class="amm-map-search-input">
    2537                                <div class="search-close">
    2638                                    <span class="amm-icon">
    27                                         <img src="<?php echo ADDMULTIPLEMARKER_PLUGIN_URL ?>admin/images/svg/close.svg" alt="close" class="imgsvg">
     39                                        <img src="<?php echo esc_url( ADDMULTIPLEMARKER_PLUGIN_URL . 'admin/images/svg/close.svg' ); ?>" alt="close" class="imgsvg">
    2840                                    </span>
    2941                                </div>
    … …  
    4759            <div class="amm-map-sidebar off">
    4860                <div class="wraps">
    49                     <h2><?php _e( 'Customise the map with below steps.', 'addmultiplemarker' ); ?></h2>
     61                    <h2><?php esc_html_e( 'Customise the map with below steps.', 'add-multiple-marker' ); ?></h2>
    5062                    <div class="amm-map-panel">
    5163                        <div class="amm-panel-header">
    5264                            <h3>
    53                                 <span class="number"><?php _e( '1.', 'addmultiplemarker' ); ?></span>
    54                                 <span class="text"><?php _e( 'Select marker pin.', 'addmultiplemarker' ); ?></span>
     65                                <span class="number"><?php esc_html_e( '1.', 'add-multiple-marker' ); ?></span>
     66                                <span class="text"><?php esc_html_e( 'Select marker pin.', 'add-multiple-marker' ); ?></span>
    5567                            </h3>
    5668                        </div>
    … …  
    5870                            <div id="amm-marker-imgs"></div>
    5971                        </div>
     72                        <div id="drop_marker_wrap">
     73                            <span>Drop pin at current location</span>
     74                            <button type="button" class="drop-marker-btn" id="dropMarkerBtn">Drop</button>
     75                        </div>
    6076                    </div>
    6177                    <div class="amm-map-panel">
    6278                        <div class="amm-panel-header">
    6379                            <h3>
    64                                 <span class="number"><?php _e( '2.', 'addmultiplemarker' ); ?></span>
    65                                 <span class="text"><?php _e( 'Select shape tool color to define service area.', 'addmultiplemarker' ); ?></span>
     80                                <span class="number"><?php esc_html_e( '2.', 'add-multiple-marker' ); ?></span>
     81                                <span class="text"><?php esc_html_e( 'Select shape tool color to define service area.', 'add-multiple-marker' ); ?></span>
    6682                            </h3>
    6783                        </div>
    6884                        <div class="amm-panel-body">
     85                            <div class="color-box-wrap">
     86                                <span data-bgcolor="#000000" class="color-box" style="background-color: #000000;" title="#000000"></span>
     87                                <span data-bgcolor="#ffffff" class="color-box" style="background-color: #ffffff;" title="#ffffff"></span>
     88                                <span data-bgcolor="#0000ff" class="color-box" style="background-color: #0000ff;" title="#0000ff"></span>
     89                                <span data-bgcolor="#00ff00" class="color-box" style="background-color: #00ff00;" title="#00ff00"></span>
     90                                <span data-bgcolor="#ff0000" class="color-box" style="background-color: #ff0000;" title="#ff0000"></span>
     91                                <span data-bgcolor="#c0c0c0" class="color-box" style="background-color: #c0c0c0;" title="#c0c0c0"></span>
     92                            </div>
     93                            <span class="or">-OR-</span>
    6994                            <!-- Map custom color start -->
    7095                            <div id="amm-color-square"></div>
    71                             <input id="color-field" class="color-field" type="text" name="amm_map_color" value="<?php echo ( isset( $color ) ? $color : '#fffff' ); ?>" placeholder="<?php _e( 'color code', 'addmultiplemarker' ); ?>" onChange="createColorTags(this.value)"/>
     96                            <input id="color-field" class="color-field" type="text" name="amm_map_color" value="<?php echo ( isset( $color ) ? esc_attr( $color ) : esc_attr( '#fffff' ) ); ?>" placeholder="<?php echo esc_attr__( 'color code', 'add-multiple-marker' ); ?>" onChange="createColorTags(this.value)"/>
    7297                            <!-- Map custom color close -->
    7398                        </div>
    … …  
    76101                        <div class="amm-panel-header">
    77102                            <h3>
    78                                 <span class="number"><?php _e( '3.', 'addmultiplemarker' ); ?></span>
    79                                 <span class="text"><?php _e( 'Now you can drop marker using drawing tools inside the map or use circle/polygon tool to define service region you cover and then save the map.', 'addmultiplemarker' ); ?></span>
     103                                <span class="number"><?php esc_html_e( '3.', 'add-multiple-marker' ); ?></span>
     104                                <span class="text"><?php esc_html_e( 'Now you can drop marker using drawing tools inside the map or use circle/polygon tool to define service region you cover and then save the map.', 'add-multiple-marker' ); ?></span>
    80105                            </h3>
    81106                        </div>
    82107                        <div class="amm-panel-body">
    83                             <img src="<?php echo ADDMULTIPLEMARKER_PLUGIN_URL ?>admin/images/tools.jpg" alt="tools">
     108                            <img src="<?php echo esc_url( ADDMULTIPLEMARKER_PLUGIN_URL . 'admin/images/tools.jpg' ); ?>" alt="tools">
    84109                        </div>
    85110                    </div>
    … …  
    87112                        <div class="amm-panel-body">
    88113                            <div class="amm-short-code">
    89                                 <p><?php _e( 'After making all changes, save the map and copy below shortcode to apply in different page of website.', 'addmultiplemarker' ); ?></p>
     114                                <p><?php esc_html_e( 'After making all changes, save the map and copy below shortcode to apply in different page of website.', 'add-multiple-marker' ); ?></p>
    90115                                <div class="input-group">
    91116                                    <input type="text" name="shortcode" readonly class="form-control" value="[addmultiplemarker]" disabled="disabled">
    … …  
    95120                                </div>
    96121                            </div>
    97                             <span class="reset-maps" id="map-resets"><?php _e( 'Reset Map', 'addmultiplemarker' ); ?></span>
     122                            <span class="reset-maps" id="map-resets"><?php esc_html_e( 'Reset Map', 'add-multiple-marker' ); ?></span>
    98123                        </div>
    99124                    </div>
    100125                </div>
    101126                <div class="amm-map-apply">
    102                     <div class="amm-map-delete amm-sidebar-close">
    103                         <span class="amm-icon">
    104                             <img src="<?php echo ADDMULTIPLEMARKER_PLUGIN_URL ?>admin/images/svg/amm-cancel.svg" alt="trash" class="imgsvg">
    105                         </span>
    106                     </div>
    107127                    <div class="amm-map-delete">
    108128                        <span id="delete-shape">
    109129                            <span class="amm-icon">
    110                                 <img src="<?php echo ADDMULTIPLEMARKER_PLUGIN_URL ?>admin/images/svg/trash.svg" alt="trash" class="imgsvg">
     130                                <img src="<?php echo esc_url( ADDMULTIPLEMARKER_PLUGIN_URL . 'admin/images/svg/trash.svg' ); ?>" alt="trash" class="imgsvg">
    111131                            </span>
    112132                        </span>
    … …  
    123143            <textarea class="amm_marker_positions" id="amm_marker_positions" name="amm_marker_positions"></textarea>
    124144            <textarea name="amm_map_control" class="amm_marker_control" id="amm_map_control"></textarea>
    125             <?php $retrieve_map_settings = get_option( 'amm_map_setting' ); ?>
    126             <input class="amm_map_api_key" type="text" name="amm_api_key" value="<?php echo ( $retrieve_map_settings ? $retrieve_map_settings['api'] : '');  ?>" placeholder="">
     145            <?php
     146            $retrieve_map_settings = get_option( 'amm_map_setting' );
     147            $api_key               = isset( $retrieve_map_settings['api'] ) ? $retrieve_map_settings['api'] : '';
     148            ?>
     149            <input class="amm_map_api_key" type="text" name="amm_api_key" value="<?php echo esc_attr( $api_key ); ?>" placeholder="">
    127150            <!-- hidden area close -->
    128151        </form>
     152        <?php
     153        if ( ! $api_key ) {
     154            wp_nonce_field( 'amm_save_map_api', 'amm_api_key_nonce' );
     155        } else {
     156            wp_nonce_field( 'amm_reset_map', 'amm_reset_map_nonce' );
     157        }
     158        ?>
    129159    </div>
    130160</div>

  • add-multiple-marker/trunk/admin/css/amm-style.css

    r2608577 r3433258  
    1212  height: 100%;
    1313}
     14
    1415/* clearfix */
    1516.clearfix:after {
    … …  
    2930  height: 1%;
    3031}
     32
    3133a {
    3234  outline: none;
    … …  
    3436  border: 0px;
    3537}
     38
    3639a:focus {
    3740  outline: none;
    … …  
    3942  box-shadow: none;
    4043}
     44
    4145/* amm admin main wrap */
    4246.amm-admin-main-wrap {
    … …  
    5054  padding: 0px;
    5155}
     56
    5257.left-align-section {
    5358  float: left;
    … …  
    5560  margin-right: 15px;
    5661}
     62
    5763.right-align-section {
    5864  float: left;
    … …  
    6066  margin-left: 15px;
    6167}
     68
    6269.amm-admin-main-wrap img {
    6370  max-width: 100%;
    … …  
    7885  height: 100%;
    7986}
     87
    8088.amm_marker_type,
    8189.amm_marker_positions,
    … …  
    8492  display: none;
    8593}
     94
    8695.amm-icon {
    8796  line-height: normal;
    … …  
    9099  height: 28px;
    91100}
     101
    92102.amm-icon .imgsvg {
    93103  width: 100%;
    … …  
    97107  margin: 0;
    98108}
     109
    99110/* amm header start */
    100111.amm-map-header {
    … …  
    108119  left: 160px;
    109120}
     121
    110122.amm-map-header.full {
    111123  right: 0;
    … …  
    113125  left: 160px;
    114126}
     127
    115128.amm-map-header .amm-container {
    116129  padding: 10px 15px;
    … …  
    122135  float: left;
    123136}
     137
    124138.amm-search-action {
    125139  float: right;
    126140}
     141
    127142.amm-search-action a {
    128143  cursor: pointer;
    … …  
    138153  border-radius: 4px;
    139154}
     155
    140156.amm-search {
    141157  cursor: pointer;
    142158}
     159
    143160.amm-menu {
    144161  cursor: pointer;
    145162}
     163
    146164/* amm header close */
    147165/* amm body start */
    … …  
    152170  padding-top: 100px;
    153171}
     172
    154173.amm-map {
    155174  height: 100%;
    156175}
     176
    157177#amm-map {
    158178  height: 100%;
    159179  clear: both;
    160180}
     181
    161182/* amm body close */
    162183/* amm search start */
    … …  
    174195  display: none;
    175196}
     197
    176198.amm-map-search-bar .wraps {
    177199  position: absolute;
    … …  
    183205  left: 25px;
    184206}
     207
    185208.amm-map-search-bar.on {
    186209  display: block;
    187210}
     211
    188212.amm-map-search-bar .amm-icon {
    189213  display: inline-block;
    … …  
    193217  margin-top: 10px;
    194218}
     219
    195220.amm-map-search-input,
    196221input[type="search"] {
    … …  
    215240  transition: border 0.5s ease-out;
    216241}
     242
    217243.amm-map-search-bar .amm-map-search-input:focus {
    218244  box-shadow: none;
    … …  
    221247  background-color: transparent;
    222248}
     249
    223250.amm-map-search-bar .search-close {
    224251  position: absolute;
    … …  
    234261  text-align: center;
    235262}
     263
    236264.amm-map-search-bar .search-close .amm-icon {
    237265  width: 15px;
    … …  
    245273  margin: auto;
    246274}
     275
    247276.amm-map-search-bar .search-close .amm-icon .imgsvg {
    248277  width: 100%;
    249278  height: 100%;
    250279}
     280
    251281.amm-map-search-bar .search-close .amm-icon .imgsvg path {
    252282  fill: #37a1fc;
    253283}
     284
    254285/* amm search close */
    255286.amm-map-content {
    256287  width: calc(100% - 340px);
    257288}
     289
    258290.amm-map-content.full {
    259291  width: 100%;
    260292}
     293
    261294.amm-map-sidebar {
    262295  width: 355px;
    … …  
    268301  z-index: 1112;
    269302}
     303
    270304.amm-map-sidebar.off {
    271305  right: -355px;
    272306}
     307
    273308.amm-map-sidebar .wraps {
    274309  padding: 30px;
    … …  
    276311  overflow: auto;
    277312}
     313
    278314/* amm setting start */
    279315.amm-map-title-bar {
    … …  
    295331  border-radius: 5px;
    296332}
     333
    297334.amm-map-marker-bar {
    298335  position: absolute;
    … …  
    313350  border-radius: 5px;
    314351}
     352
    315353.amm-map-marker-bar .map-images {
    316354  height: 30px;
    … …  
    321359  padding: 5px;
    322360}
     361
    323362.amm-map-shape-bar {
    324363  position: absolute;
    … …  
    339378  border-radius: 5px;
    340379}
     380
    341381.amm-map-shape-bar .color-button {
    342382  width: 20px;
    … …  
    347387  margin-right: 5px;
    348388}
     389
    349390.amm-map-shape-bar .color-button:last-child {
    350391  margin-right: 0px;
    351392}
     393
    352394.amm-map-apply {
    353395  position: absolute;
    … …  
    359401  color: #ffffff;
    360402}
     403
    361404.amm-map-save {
    362405  display: inline-block;
    363406}
     407
    364408.amm-map-save .submit {
    365409  padding: 15px 25px;
    … …  
    374418  border-radius: 4px;
    375419}
     420
    376421.amm-map-delete {
    377422  padding: 10px 25px;
    … …  
    388433  border-radius: 4px;
    389434}
     435
    390436.amm-map-delete .imgsvg {
    391437  width: 20px;
    392438  height: 20px;
    393439}
     440
    394441.amm-map-delete .imgsvg path {
    395442  fill: #fff;
    396443}
     444
    397445.amm-map-panel {
    398446  padding: 0;
    399447  margin: 0 0 25px;
    400448}
     449
    401450.amm-map-panel .amm-panel-header {
    402451  display: block;
    403452}
     453
    404454.amm-map-panel .amm-panel-header h3 {
    405455  display: block;
    406456  position: relative;
    407457}
     458
    408459.amm-map-panel .amm-panel-header h3 .number {
    409460  position: absolute;
    … …  
    413464  font-weight: 400;
    414465}
     466
    415467.amm-map-panel .amm-panel-header h3 .text {
    416468  font-size: 16px;
    … …  
    421473  line-height: 1.4;
    422474}
     475
    423476.amm-map-panel .amm-panel-body {
    424477  padding: 0 15px;
    425478}
     479
    426480#amm-marker-imgs {
    427481  display: block;
    428482}
     483
    429484#amm-marker-imgs div {
    430485  width: 55px;
    … …  
    438493  position: relative;
    439494}
     495
    440496#amm-marker-imgs div img {
    441497  position: absolute;
    … …  
    446502  margin: auto;
    447503}
     504
    448505#amm-marker-imgs div:last-child {
    449506  margin-right: 0px;
    450507}
     508
    451509.amm-short-code {
    452510  border: 1px solid #d5d5d5;
    … …  
    457515  border-radius: 4px;
    458516}
     517
    459518.amm-short-code .input-group {
    460519  position: relative;
    461520  width: 100%;
    462521}
     522
    463523.amm-short-code .input-group .form-control {
    464524  width: 100%;
    … …  
    472532  box-shadow: none;
    473533}
     534
    474535.amm-short-code .input-group .input-group-addon .submit {
    475536  position: absolute;
    … …  
    495556  box-shadow: none;
    496557}
     558
    497559.amm-short-code .input-group .input-group-addon .submit:focus {
    498560  outline: none;
    499561  box-shadow: none;
    500562}
     563
    501564.sidebar-action {
    502565  position: relative;
    … …  
    510573  display: none;
    511574}
     575
    512576.sidebar-action .imgsvg {
    513577  width: 30px;
    … …  
    520584  margin: auto;
    521585}
     586
    522587.sidebar-action .imgsvg path {
    523588  fill: #fff;
    524589}
     590
     591.close-sidebar {
     592  display: none;
     593}
     594
    525595@media (min-width: 1501px) {
    526596  .amm-sidebar-close {
    … …  
    528598  }
    529599}
     600
    530601@media (min-width: 200px) and (max-width: 1500px) {
    531602  .sidebar-action {
    532603    display: block;
    533604  }
     605
    534606  .amm-map-content {
    535607    width: 100%;
    536608  }
     609
    537610  .amm-map-header {
    538611    width: 100%;
    … …  
    541614  }
    542615}
     616
    543617@media (min-width: 783px) and (max-width: 960px) {
    544618  .amm-map-header.full {
    … …  
    547621  }
    548622}
     623
    549624@media (min-width: 200px) and (max-width: 782px) {
    550625  .amm-map-header.full {
    … …  
    552627    left: 0px;
    553628  }
     629
     630  .amm-map-integration-wrap .left-align-section,
     631  .amm-map-integration-wrap .right-align-section {
     632    width: 100%;
     633    margin-left: 0px;
     634    margin-bottom: 40px;
     635  }
    554636}
    555637
    … …  
    557639  padding: 50px 20px;
    558640}
     641
    559642.amm-panel {
    560643  padding: 0;
    … …  
    562645  position: relative;
    563646}
     647
    564648.amm-panel:last-child {
    565649  margin-bottom: 0px;
    566650}
     651
    567652.amm-panel fieldset {
    568653  padding: 5px 15px 15px;
    569654  margin: 0;
    570655  background-color: #fff;
    571 }
     656  line-height: 2;
     657}
     658
    572659.amm-panel fieldset legend {
    573660  width: 100%;
    … …  
    579666  top: -20px;
    580667}
     668
    581669.amm-panel .label {
    582670  display: inline-block;
    … …  
    584672  font-size: 13px;
    585673}
     674
    586675.amm-call-to-btn {
    587676  padding: 0;
    588   margin: 0;
    589   display: block;
    590   width: 100%;
    591 }
     677  margin: 0px 0px 10px 0px;
     678  display: block;
     679  width: 100%;
     680}
     681
    592682.amm-call-to-btn .submit {
    593683  padding: 15px 25px;
    … …  
    602692  border-radius: 4px;
    603693}
     694
    604695.amm-input {
    605696  padding: 6px 12px;
    … …  
    612703  width: 100%;
    613704}
     705
    614706.amm-map-theme-section.amm-panel .label {
    615707  position: relative;
    616708  margin-bottom: 10px;
    617709}
     710
    618711.amm-map-theme-section.amm-panel .label .text {
    619712  opacity: 0;
    … …  
    623716  top: 0;
    624717}
     718
    625719.reset-maps {
    626720  padding: 15px 25px;
    … …  
    638732  text-align: center;
    639733}
     734
    640735.success-msg {
    641736  font-size: 16px;
    … …  
    644739  font-weight: bold;
    645740}
     741
    646742span.error {
     743  display: block;
     744  margin-top: 10px;
    647745  color: #dc3232;
    648746}
     747
    649748.amm-maps-message {
    650749  display: inline-block;
    … …  
    659758  margin: 0 auto !important;
    660759}
     760
    661761#amm-modal-map-api {
    662762  padding: 20px;
    663763}
     764
    664765#amm-modal-map-api .amm-modal-map-api-form {
    665766  position: relative;
    666 }
     767  display: flex;
     768  align-items: center;
     769}
     770
    667771#amm-modal-map-api .amm-panel {
    668772  margin: 0;
    669   position: relative;
    670 }
     773  width: 100%;
     774  position: relative;
     775}
     776
    671777#amm-modal-map-api .amm-panel fieldset {
    672778  padding: 0;
    673779}
     780
    674781#amm-modal-map-api .amm-input {
    675782  padding-right: 100px;
    676783  height: 50px;
    677784}
     785
    678786#amm-modal-map-api .amm-call-to-btn {
    679787  position: absolute;
    680788  right: 5px;
    681   top: 8px;
     789  margin-bottom: 0;
    682790  width: auto;
    683791}
     792
    684793#amm-modal-map-api .amm-call-to-btn .submit {
    685794  padding: 7px 25px 11px;
    686795}
     796
    687797#amm-modal-map-api h3 {
    688798  margin-top: 0;
    … …  
    726836  width: calc(100% - 200px);
    727837  position: relative;
     838}
     839
     840.amm-map-panel .drop-marker-btn {
     841  display: block;
     842  padding: 10px 20px;
     843  color: #ffffff;
     844  background-color: #abb02e;
     845  border: none;
     846  border-radius: 4px;
     847  margin-top: 10px;
     848  font-size: 16px;
     849  cursor: pointer;
     850}
     851
     852.amm-panel-body .color-box-wrap {
     853  display: flex;
     854  flex-direction: row;
     855  padding: 10px 0;
     856  gap: 10px;
     857}
     858
     859.amm-panel-body .color-box-wrap .color-box {
     860  display: block;
     861  width: 20px;
     862  height: 20px;
     863  border: 1px solid black;
     864}
     865
     866.amm-panel-body .color-box-wrap .color-box:hover {
     867  cursor: pointer;
     868}
     869
     870.amm-panel-body .or {
     871  display: block;
     872  padding-bottom: 10px;
     873  font-style: italic;
    728874}
    729875
    … …  
    739885
    740886@media (max-width: 960px) {
     887
    741888  #wpfooter,
    742889  body.toplevel_page_addmultiplemarker #wpfooter {

  • add-multiple-marker/trunk/admin/js/amm-custom-settings.js

    r2116120 r3433258  
    1 // jQuery( window ).on( 'load resize', function() {
    2 //   mapStructure();
    3 // });
    4 // AIzaSyDHlzcHiFP9Hktn7-vFQGs6eOkbfYMhI5o
    5 jQuery( document ).ready( function( $ ) {
     1jQuery(document).ready(function ($) {
    62  let mapApiKeyValue = jQuery('input[name="amm_api_key"]').val();
    7   if ( mapApiKeyValue == '' ){
    8     var mapAPIKeyInput = '<div id="amm-modal-map-api"><h3>Enter Your Google Map Api Key</h3><div class="amm-modal-map-api-form"><div class="amm-api-section amm-panel"><fieldset><input class="amm-input" type="text" name="amm_modal_api_key" value="" placeholder="Please enter your map API key here"><span class="error error-span"></span></fieldset></div><div class="amm-call-to-btn"><button value="Save" class="submit amm-modal-save-btn">save</button></div></div></div>';
    9     $.blockUI({ message: mapAPIKeyInput }); 
     3  if (mapApiKeyValue == '') {
     4    var mapAPIKeyInput = '<div id="amm-modal-map-api"><h3>Enter Your Google Map Api Key</h3><div class="amm-modal-map-api-form"><div class="amm-api-section amm-panel"><fieldset><input class="amm-input" type="text" name="amm_modal_api_key" value="" placeholder="Please enter your map API key here"></fieldset></div><div class="amm-call-to-btn"><button value="Save" class="submit amm-modal-save-btn">save</button></div></div><span class="error error-span"></span></div>';
     5    $.blockUI({ message: mapAPIKeyInput });
    106  }
    11   // imgSvg();
    12   // ammSearch();
     7 
     8  $('.sidebar-action').on('click', function () {
     9    $('.sidebar-action svg').toggle();
     10  });
    1311});
    1412
    15 jQuery(document).on('click','#amm-modal-map-api button', function(){
     13jQuery(document).on('click', '#amm-modal-map-api button', function () {
    1614  var _this = jQuery(this).parents('#amm-modal-map-api');
    1715  var APIKeyValue = _this.find('input').val();
    1816  var saveApiKeydata = {
    19     action: 'amm_save_map_api',
    20     apiKeyValue: APIKeyValue
     17    action: 'addmultiplemarker_save_map_api',
     18    apiKeyValue: APIKeyValue,
     19    nonce: jQuery('#amm_api_key_nonce').val().trim()
    2120  }
    2221
    23   jQuery.post(amm_plugin_custom_obj.ajax_url, saveApiKeydata,
    24     function( response ){
    25       var ajax_result = jQuery.parseJSON( response );
    26       if (ajax_result.result == '1'){
    27         window.location = window.location.href;       
    28       }else{
    29         _this.find('span').text(ajax_result.message);
     22  jQuery.post(amm_plugin_custom_obj.ajax_url, saveApiKeydata,
     23    function (response) {
     24      if (response.success) {
     25        window.location = window.location.href;
     26      } else {
     27        _this.find('span').text(response.data.message);
    3028      }
    31   })
     29    })
    3230})
    33 

  • add-multiple-marker/trunk/admin/js/amm-scripts.js

    r2608577 r3433258  
    22var map;
    33var drawingManager;
     4
     5const markerPositionsInput = document.getElementById('amm_marker_positions');
     6const markerTypeInput = document.getElementById('amm_marker_type')
    47
    58var selectedShape;
    … …  
    1417var allDrawShape = [];
    1518var drawShapeDetail = [];
     19let markerArray = [];
     20let dropMarkerBtnState = true;
     21let oldMapLatlngs = [];
     22let currentLocation;
    1623
    1724var markerImg = [
    … …  
    2229];
    2330
    24 var style = amm_plugin_obj.map_settings.map_theme;
    25 var selectedStyle,
    26     standard = [],
    27     silver = [{"elementType":"geometry","stylers":[{"color":"#f5f5f5"}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"elementType":"labels.text.fill","stylers":[{"color":"#616161"}]},{"elementType":"labels.text.stroke","stylers":[{"color":"#f5f5f5"}]},{"featureType":"administrative.land_parcel","elementType":"labels.text.fill","stylers":[{"color":"#bdbdbd"}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#eeeeee"}]},{"featureType":"poi","elementType":"labels.text.fill","stylers":[{"color":"#757575"}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#e5e5e5"}]},{"featureType":"poi.park","elementType":"labels.text.fill","stylers":[{"color":"#9e9e9e"}]},{"featureType":"road","elementType":"geometry","stylers":[{"color":"#ffffff"}]},{"featureType":"road.arterial","elementType":"labels.text.fill","stylers":[{"color":"#757575"}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"color":"#dadada"}]},{"featureType":"road.highway","elementType":"labels.text.fill","stylers":[{"color":"#616161"}]},{"featureType":"road.local","elementType":"labels.text.fill","stylers":[{"color":"#9e9e9e"}]},{"featureType":"transit.line","elementType":"geometry","stylers":[{"color":"#e5e5e5"}]},{"featureType":"transit.station","elementType":"geometry","stylers":[{"color":"#eeeeee"}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#c9c9c9"}]},{"featureType":"water","elementType":"labels.text.fill","stylers":[{"color":"#9e9e9e"}]}],
    28     retro = [{"elementType":"geometry","stylers":[{"color":"#ebe3cd"}]},{"elementType":"labels.text.fill","stylers":[{"color":"#523735"}]},{"elementType":"labels.text.stroke","stylers":[{"color":"#f5f1e6"}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#c9b2a6"}]},{"featureType":"administrative.land_parcel","elementType":"geometry.stroke","stylers":[{"color":"#dcd2be"}]},{"featureType":"administrative.land_parcel","elementType":"labels.text.fill","stylers":[{"color":"#ae9e90"}]},{"featureType":"landscape.natural","elementType":"geometry","stylers":[{"color":"#dfd2ae"}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#dfd2ae"}]},{"featureType":"poi","elementType":"labels.text.fill","stylers":[{"color":"#93817c"}]},{"featureType":"poi.park","elementType":"geometry.fill","stylers":[{"color":"#a5b076"}]},{"featureType":"poi.park","elementType":"labels.text.fill","stylers":[{"color":"#447530"}]},{"featureType":"road","elementType":"geometry","stylers":[{"color":"#f5f1e6"}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#fdfcf8"}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"color":"#f8c967"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#e9bc62"}]},{"featureType":"road.highway.controlled_access","elementType":"geometry","stylers":[{"color":"#e98d58"}]},{"featureType":"road.highway.controlled_access","elementType":"geometry.stroke","stylers":[{"color":"#db8555"}]},{"featureType":"road.local","elementType":"labels.text.fill","stylers":[{"color":"#806b63"}]},{"featureType":"transit.line","elementType":"geometry","stylers":[{"color":"#dfd2ae"}]},{"featureType":"transit.line","elementType":"labels.text.fill","stylers":[{"color":"#8f7d77"}]},{"featureType":"transit.line","elementType":"labels.text.stroke","stylers":[{"color":"#ebe3cd"}]},{"featureType":"transit.station","elementType":"geometry","stylers":[{"color":"#dfd2ae"}]},{"featureType":"water","elementType":"geometry.fill","stylers":[{"color":"#b9d3c2"}]},{"featureType":"water","elementType":"labels.text.fill","stylers":[{"color":"#92998d"}]}],
    29     dark = [{"elementType":"geometry","stylers":[{"color":"#212121"}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"elementType":"labels.text.fill","stylers":[{"color":"#757575"}]},{"elementType":"labels.text.stroke","stylers":[{"color":"#212121"}]},{"featureType":"administrative","elementType":"geometry","stylers":[{"color":"#757575"}]},{"featureType":"administrative.country","elementType":"labels.text.fill","stylers":[{"color":"#9e9e9e"}]},{"featureType":"administrative.land_parcel","stylers":[{"visibility":"off"}]},{"featureType":"administrative.locality","elementType":"labels.text.fill","stylers":[{"color":"#bdbdbd"}]},{"featureType":"poi","elementType":"labels.text.fill","stylers":[{"color":"#757575"}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#181818"}]},{"featureType":"poi.park","elementType":"labels.text.fill","stylers":[{"color":"#616161"}]},{"featureType":"poi.park","elementType":"labels.text.stroke","stylers":[{"color":"#1b1b1b"}]},{"featureType":"road","elementType":"geometry.fill","stylers":[{"color":"#2c2c2c"}]},{"featureType":"road","elementType":"labels.text.fill","stylers":[{"color":"#8a8a8a"}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#373737"}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"color":"#3c3c3c"}]},{"featureType":"road.highway.controlled_access","elementType":"geometry","stylers":[{"color":"#4e4e4e"}]},{"featureType":"road.local","elementType":"labels.text.fill","stylers":[{"color":"#616161"}]},{"featureType":"transit","elementType":"labels.text.fill","stylers":[{"color":"#757575"}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#000000"}]},{"featureType":"water","elementType":"labels.text.fill","stylers":[{"color":"#3d3d3d"}]}],
    30     night = [{"elementType":"geometry","stylers":[{"color":"#242f3e"}]},{"elementType":"labels.text.fill","stylers":[{"color":"#746855"}]},{"elementType":"labels.text.stroke","stylers":[{"color":"#242f3e"}]},{"featureType":"administrative.locality","elementType":"labels.text.fill","stylers":[{"color":"#d59563"}]},{"featureType":"poi","elementType":"labels.text.fill","stylers":[{"color":"#d59563"}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#263c3f"}]},{"featureType":"poi.park","elementType":"labels.text.fill","stylers":[{"color":"#6b9a76"}]},{"featureType":"road","elementType":"geometry","stylers":[{"color":"#38414e"}]},{"featureType":"road","elementType":"geometry.stroke","stylers":[{"color":"#212a37"}]},{"featureType":"road","elementType":"labels.text.fill","stylers":[{"color":"#9ca5b3"}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"color":"#746855"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#1f2835"}]},{"featureType":"road.highway","elementType":"labels.text.fill","stylers":[{"color":"#f3d19c"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#2f3948"}]},{"featureType":"transit.station","elementType":"labels.text.fill","stylers":[{"color":"#d59563"}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#17263c"}]},{"featureType":"water","elementType":"labels.text.fill","stylers":[{"color":"#515c6d"}]},{"featureType":"water","elementType":"labels.text.stroke","stylers":[{"color":"#17263c"}]}],
    31     aubergine = [{"elementType":"geometry","stylers":[{"color":"#1d2c4d"}]},{"elementType":"labels.text.fill","stylers":[{"color":"#8ec3b9"}]},{"elementType":"labels.text.stroke","stylers":[{"color":"#1a3646"}]},{"featureType":"administrative.country","elementType":"geometry.stroke","stylers":[{"color":"#4b6878"}]},{"featureType":"administrative.land_parcel","elementType":"labels.text.fill","stylers":[{"color":"#64779e"}]},{"featureType":"administrative.province","elementType":"geometry.stroke","stylers":[{"color":"#4b6878"}]},{"featureType":"landscape.man_made","elementType":"geometry.stroke","stylers":[{"color":"#334e87"}]},{"featureType":"landscape.natural","elementType":"geometry","stylers":[{"color":"#023e58"}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#283d6a"}]},{"featureType":"poi","elementType":"labels.text.fill","stylers":[{"color":"#6f9ba5"}]},{"featureType":"poi","elementType":"labels.text.stroke","stylers":[{"color":"#1d2c4d"}]},{"featureType":"poi.park","elementType":"geometry.fill","stylers":[{"color":"#023e58"}]},{"featureType":"poi.park","elementType":"labels.text.fill","stylers":[{"color":"#3C7680"}]},{"featureType":"road","elementType":"geometry","stylers":[{"color":"#304a7d"}]},{"featureType":"road","elementType":"labels.text.fill","stylers":[{"color":"#98a5be"}]},{"featureType":"road","elementType":"labels.text.stroke","stylers":[{"color":"#1d2c4d"}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"color":"#2c6675"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#255763"}]},{"featureType":"road.highway","elementType":"labels.text.fill","stylers":[{"color":"#b0d5ce"}]},{"featureType":"road.highway","elementType":"labels.text.stroke","stylers":[{"color":"#023e58"}]},{"featureType":"transit","elementType":"labels.text.fill","stylers":[{"color":"#98a5be"}]},{"featureType":"transit","elementType":"labels.text.stroke","stylers":[{"color":"#1d2c4d"}]},{"featureType":"transit.line","elementType":"geometry.fill","stylers":[{"color":"#283d6a"}]},{"featureType":"transit.station","elementType":"geometry","stylers":[{"color":"#3a4762"}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#0e1626"}]},{"featureType":"water","elementType":"labels.text.fill","stylers":[{"color":"#4e6d70"}]}];
    32 
    33 var mapStyleType = amm_plugin_obj.map_settings.map_style;
    34 
    35 switch(style){
    36   case "silver":
    37     selectedStyle = silver;
    38     break;
    39   case "retro":
    40     selectedStyle = retro;
    41     break;
    42   case "dark":
    43     selectedStyle = dark;
    44     break;
    45   case "night":
    46     selectedStyle = night;
    47     break;
    48   case "aubergine":
    49     selectedStyle = aubergine;
    50     break;
    51   default:
    52   selectedStyle = standard;
    53 }
     31const mapSettings = amm_plugin_obj.map_settings;
     32const mapStyleType = mapSettings.map_theme;
     33const mapStyles = {
     34  standard: [],
     35  silver: [{ "elementType": "geometry", "stylers": [{ "color": "#f5f5f5" }] }, { "elementType": "labels.icon", "stylers": [{ "visibility": "off" }] }, { "elementType": "labels.text.fill", "stylers": [{ "color": "#616161" }] }, { "elementType": "labels.text.stroke", "stylers": [{ "color": "#f5f5f5" }] }, { "featureType": "administrative.land_parcel", "elementType": "labels.text.fill", "stylers": [{ "color": "#bdbdbd" }] }, { "featureType": "poi", "elementType": "geometry", "stylers": [{ "color": "#eeeeee" }] }, { "featureType": "poi", "elementType": "labels.text.fill", "stylers": [{ "color": "#757575" }] }, { "featureType": "poi.park", "elementType": "geometry", "stylers": [{ "color": "#e5e5e5" }] }, { "featureType": "poi.park", "elementType": "labels.text.fill", "stylers": [{ "color": "#9e9e9e" }] }, { "featureType": "road", "elementType": "geometry", "stylers": [{ "color": "#ffffff" }] }, { "featureType": "road.arterial", "elementType": "labels.text.fill", "stylers": [{ "color": "#757575" }] }, { "featureType": "road.highway", "elementType": "geometry", "stylers": [{ "color": "#dadada" }] }, { "featureType": "road.highway", "elementType": "labels.text.fill", "stylers": [{ "color": "#616161" }] }, { "featureType": "road.local", "elementType": "labels.text.fill", "stylers": [{ "color": "#9e9e9e" }] }, { "featureType": "transit.line", "elementType": "geometry", "stylers": [{ "color": "#e5e5e5" }] }, { "featureType": "transit.station", "elementType": "geometry", "stylers": [{ "color": "#eeeeee" }] }, { "featureType": "water", "elementType": "geometry", "stylers": [{ "color": "#c9c9c9" }] }, { "featureType": "water", "elementType": "labels.text.fill", "stylers": [{ "color": "#9e9e9e" }] }],
     36  retro: [{ "elementType": "geometry", "stylers": [{ "color": "#ebe3cd" }] }, { "elementType": "labels.text.fill", "stylers": [{ "color": "#523735" }] }, { "elementType": "labels.text.stroke", "stylers": [{ "color": "#f5f1e6" }] }, { "featureType": "administrative", "elementType": "geometry.stroke", "stylers": [{ "color": "#c9b2a6" }] }, { "featureType": "administrative.land_parcel", "elementType": "geometry.stroke", "stylers": [{ "color": "#dcd2be" }] }, { "featureType": "administrative.land_parcel", "elementType": "labels.text.fill", "stylers": [{ "color": "#ae9e90" }] }, { "featureType": "landscape.natural", "elementType": "geometry", "stylers": [{ "color": "#dfd2ae" }] }, { "featureType": "poi", "elementType": "geometry", "stylers": [{ "color": "#dfd2ae" }] }, { "featureType": "poi", "elementType": "labels.text.fill", "stylers": [{ "color": "#93817c" }] }, { "featureType": "poi.park", "elementType": "geometry.fill", "stylers": [{ "color": "#a5b076" }] }, { "featureType": "poi.park", "elementType": "labels.text.fill", "stylers": [{ "color": "#447530" }] }, { "featureType": "road", "elementType": "geometry", "stylers": [{ "color": "#f5f1e6" }] }, { "featureType": "road.arterial", "elementType": "geometry", "stylers": [{ "color": "#fdfcf8" }] }, { "featureType": "road.highway", "elementType": "geometry", "stylers": [{ "color": "#f8c967" }] }, { "featureType": "road.highway", "elementType": "geometry.stroke", "stylers": [{ "color": "#e9bc62" }] }, { "featureType": "road.highway.controlled_access", "elementType": "geometry", "stylers": [{ "color": "#e98d58" }] }, { "featureType": "road.highway.controlled_access", "elementType": "geometry.stroke", "stylers": [{ "color": "#db8555" }] }, { "featureType": "road.local", "elementType": "labels.text.fill", "stylers": [{ "color": "#806b63" }] }, { "featureType": "transit.line", "elementType": "geometry", "stylers": [{ "color": "#dfd2ae" }] }, { "featureType": "transit.line", "elementType": "labels.text.fill", "stylers": [{ "color": "#8f7d77" }] }, { "featureType": "transit.line", "elementType": "labels.text.stroke", "stylers": [{ "color": "#ebe3cd" }] }, { "featureType": "transit.station", "elementType": "geometry", "stylers": [{ "color": "#dfd2ae" }] }, { "featureType": "water", "elementType": "geometry.fill", "stylers": [{ "color": "#b9d3c2" }] }, { "featureType": "water", "elementType": "labels.text.fill", "stylers": [{ "color": "#92998d" }] }],
     37  dark: [{ "elementType": "geometry", "stylers": [{ "color": "#212121" }] }, { "elementType": "labels.icon", "stylers": [{ "visibility": "off" }] }, { "elementType": "labels.text.fill", "stylers": [{ "color": "#757575" }] }, { "elementType": "labels.text.stroke", "stylers": [{ "color": "#212121" }] }, { "featureType": "administrative", "elementType": "geometry", "stylers": [{ "color": "#757575" }] }, { "featureType": "administrative.country", "elementType": "labels.text.fill", "stylers": [{ "color": "#9e9e9e" }] }, { "featureType": "administrative.land_parcel", "stylers": [{ "visibility": "off" }] }, { "featureType": "administrative.locality", "elementType": "labels.text.fill", "stylers": [{ "color": "#bdbdbd" }] }, { "featureType": "poi", "elementType": "labels.text.fill", "stylers": [{ "color": "#757575" }] }, { "featureType": "poi.park", "elementType": "geometry", "stylers": [{ "color": "#181818" }] }, { "featureType": "poi.park", "elementType": "labels.text.fill", "stylers": [{ "color": "#616161" }] }, { "featureType": "poi.park", "elementType": "labels.text.stroke", "stylers": [{ "color": "#1b1b1b" }] }, { "featureType": "road", "elementType": "geometry.fill", "stylers": [{ "color": "#2c2c2c" }] }, { "featureType": "road", "elementType": "labels.text.fill", "stylers": [{ "color": "#8a8a8a" }] }, { "featureType": "road.arterial", "elementType": "geometry", "stylers": [{ "color": "#373737" }] }, { "featureType": "road.highway", "elementType": "geometry", "stylers": [{ "color": "#3c3c3c" }] }, { "featureType": "road.highway.controlled_access", "elementType": "geometry", "stylers": [{ "color": "#4e4e4e" }] }, { "featureType": "road.local", "elementType": "labels.text.fill", "stylers": [{ "color": "#616161" }] }, { "featureType": "transit", "elementType": "labels.text.fill", "stylers": [{ "color": "#757575" }] }, { "featureType": "water", "elementType": "geometry", "stylers": [{ "color": "#000000" }] }, { "featureType": "water", "elementType": "labels.text.fill", "stylers": [{ "color": "#3d3d3d" }] }],
     38  night: [{ "elementType": "geometry", "stylers": [{ "color": "#242f3e" }] }, { "elementType": "labels.text.fill", "stylers": [{ "color": "#746855" }] }, { "elementType": "labels.text.stroke", "stylers": [{ "color": "#242f3e" }] }, { "featureType": "administrative.locality", "elementType": "labels.text.fill", "stylers": [{ "color": "#d59563" }] }, { "featureType": "poi", "elementType": "labels.text.fill", "stylers": [{ "color": "#d59563" }] }, { "featureType": "poi.park", "elementType": "geometry", "stylers": [{ "color": "#263c3f" }] }, { "featureType": "poi.park", "elementType": "labels.text.fill", "stylers": [{ "color": "#6b9a76" }] }, { "featureType": "road", "elementType": "geometry", "stylers": [{ "color": "#38414e" }] }, { "featureType": "road", "elementType": "geometry.stroke", "stylers": [{ "color": "#212a37" }] }, { "featureType": "road", "elementType": "labels.text.fill", "stylers": [{ "color": "#9ca5b3" }] }, { "featureType": "road.highway", "elementType": "geometry", "stylers": [{ "color": "#746855" }] }, { "featureType": "road.highway", "elementType": "geometry.stroke", "stylers": [{ "color": "#1f2835" }] }, { "featureType": "road.highway", "elementType": "labels.text.fill", "stylers": [{ "color": "#f3d19c" }] }, { "featureType": "transit", "elementType": "geometry", "stylers": [{ "color": "#2f3948" }] }, { "featureType": "transit.station", "elementType": "labels.text.fill", "stylers": [{ "color": "#d59563" }] }, { "featureType": "water", "elementType": "geometry", "stylers": [{ "color": "#17263c" }] }, { "featureType": "water", "elementType": "labels.text.fill", "stylers": [{ "color": "#515c6d" }] }, { "featureType": "water", "elementType": "labels.text.stroke", "stylers": [{ "color": "#17263c" }] }],
     39  aubergine: [{ "elementType": "geometry", "stylers": [{ "color": "#1d2c4d" }] }, { "elementType": "labels.text.fill", "stylers": [{ "color": "#8ec3b9" }] }, { "elementType": "labels.text.stroke", "stylers": [{ "color": "#1a3646" }] }, { "featureType": "administrative.country", "elementType": "geometry.stroke", "stylers": [{ "color": "#4b6878" }] }, { "featureType": "administrative.land_parcel", "elementType": "labels.text.fill", "stylers": [{ "color": "#64779e" }] }, { "featureType": "administrative.province", "elementType": "geometry.stroke", "stylers": [{ "color": "#4b6878" }] }, { "featureType": "landscape.man_made", "elementType": "geometry.stroke", "stylers": [{ "color": "#334e87" }] }, { "featureType": "landscape.natural", "elementType": "geometry", "stylers": [{ "color": "#023e58" }] }, { "featureType": "poi", "elementType": "geometry", "stylers": [{ "color": "#283d6a" }] }, { "featureType": "poi", "elementType": "labels.text.fill", "stylers": [{ "color": "#6f9ba5" }] }, { "featureType": "poi", "elementType": "labels.text.stroke", "stylers": [{ "color": "#1d2c4d" }] }, { "featureType": "poi.park", "elementType": "geometry.fill", "stylers": [{ "color": "#023e58" }] }, { "featureType": "poi.park", "elementType": "labels.text.fill", "stylers": [{ "color": "#3C7680" }] }, { "featureType": "road", "elementType": "geometry", "stylers": [{ "color": "#304a7d" }] }, { "featureType": "road", "elementType": "labels.text.fill", "stylers": [{ "color": "#98a5be" }] }, { "featureType": "road", "elementType": "labels.text.stroke", "stylers": [{ "color": "#1d2c4d" }] }, { "featureType": "road.highway", "elementType": "geometry", "stylers": [{ "color": "#2c6675" }] }, { "featureType": "road.highway", "elementType": "geometry.stroke", "stylers": [{ "color": "#255763" }] }, { "featureType": "road.highway", "elementType": "labels.text.fill", "stylers": [{ "color": "#b0d5ce" }] }, { "featureType": "road.highway", "elementType": "labels.text.stroke", "stylers": [{ "color": "#023e58" }] }, { "featureType": "transit", "elementType": "labels.text.fill", "stylers": [{ "color": "#98a5be" }] }, { "featureType": "transit", "elementType": "labels.text.stroke", "stylers": [{ "color": "#1d2c4d" }] }, { "featureType": "transit.line", "elementType": "geometry.fill", "stylers": [{ "color": "#283d6a" }] }, { "featureType": "transit.station", "elementType": "geometry", "stylers": [{ "color": "#3a4762" }] }, { "featureType": "water", "elementType": "geometry", "stylers": [{ "color": "#0e1626" }] }, { "featureType": "water", "elementType": "labels.text.fill", "stylers": [{ "color": "#4e6d70" }] }]
     40};
    5441
    5542var mapController = [];
    … …  
    5744var geocoder = new google.maps.Geocoder;
    5845var infowindow = new google.maps.InfoWindow;
    59 var reInfowindow = new google.maps.InfoWindow( {
    60   pixelOffset: new google.maps.Size( 0, -40 ),
    61 } );
     46var reInfowindow = new google.maps.InfoWindow({
     47  pixelOffset: new google.maps.Size(0, -40),
     48});
    6249
    6350// On load Ajax listing map.
    64 jQuery( document ).ready( function( $ ) {
     51jQuery(document).ready(function ($) {
    6552  imgSvg();
    6653  ammSearch();
    … …  
    7158  createImageTags();
    7259
    73   // google.maps.event.addListener( infowindow, 'closeclick', function() {
    74   //   drawingManager.setDrawingMode( 'marker' );
    75   // } );
    76 
    77   $( '.color-field' ).wpColorPicker({
    78     change: function ( event, ui ) {
     60  $('.color-field').wpColorPicker({
     61    change: function (event, ui) {
    7962      var element = event.target;
    80       var color = hexToRgb( ui.color.toString() );
     63      var color = hexToRgb(ui.color.toString());
    8164      selectColor("rgb(" + color.r + "," + color.g + "," + color.b + ")");
    8265    },
    8366  });
     67  $('.color-box').on('click', function () {
     68    const newColor = $(this).data('bgcolor');
     69    const hexObj = hexToRgb(newColor);
     70    selectColor("rgb(" + hexObj.r + "," + hexObj.g + "," + hexObj.b + ")");
     71    $('button.wp-color-result').css('background-color', newColor);
     72    $('.color-field').val(newColor);
     73  });
    8474});
    8575
    86 function hexToRgb( hex ) {
     76function hexToRgb(hex) {
    8777  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    8878  return result ? {
    89       r: parseInt( result[1], 16 ),
    90       g: parseInt( result[2], 16 ),
    91       b: parseInt( result[3], 16 )
     79    r: parseInt(result[1], 16),
     80    g: parseInt(result[2], 16),
     81    b: parseInt(result[3], 16)
    9282  } : null;
    9383}
    9484
    9585var markerData = amm_plugin_obj.amm_save_option;
    96 if ( markerData.amm_marker_type ) {
    97   var oldMapType = JSON.parse( markerData.amm_marker_type );
    98   var oldMapLatlngs = JSON.parse( markerData.amm_marker_positions );
     86if (markerData.amm_marker_type && markerData.amm_marker_positions) {
     87  var oldMapType = JSON.parse(markerData.amm_marker_type);
     88  oldMapLatlngs = JSON.parse(markerData.amm_marker_positions);
    9989}
    10090// Map controller object.
    101 if ( markerData.amm_map_control ) {
    102   var mapControl = JSON.parse( markerData.amm_map_control );
     91if (markerData.amm_map_control) {
     92  var mapControl = JSON.parse(markerData.amm_map_control);
    10393}
    10494
    10595// Init map.
    10696function init_map() {
    107   var latlng = {
    108     lat: ( markerData.amm_map_control ) ? mapControl[0].lat : 38.7520698,
    109     lng: ( markerData.amm_map_control ) ? mapControl[0].lng : 33.3604434,
     97  const mapFullScreenStatus = mapSettings.map_full_screen ? true : false;
     98  const mapTypeControlStatus = mapSettings.map_type_control ? true : false;
     99  const mapStreetViewStatus = mapSettings.map_street_view ? true : false;
     100  const initialCenter = {
     101    lat: (markerData.amm_map_control) ? mapControl[0].lat : 38.7520698,
     102    lng: (markerData.amm_map_control) ? mapControl[0].lng : 33.3604434,
    110103  };
     104
    111105  // Init Map with current location.
    112   map = new google.maps.Map( document.getElementById( 'amm-map' ), {
    113     center: latlng,
    114     zoom: ( markerData.amm_map_control ) ? mapControl[0].zoom : parseInt( amm_plugin_obj.map_settings.map_zoom ),
    115     styles: selectedStyle,
    116     mapTypeId: mapStyleType,
    117     fullscreenControl: ( amm_plugin_obj.map_settings.map_full_screen ) ? true : false,
    118     mapTypeControl: ( amm_plugin_obj.map_settings.map_type_control ) ? true : false,
    119     streetViewControl: ( amm_plugin_obj.map_settings.map_street_view ) ? true : false,
    120   } );
    121  
     106  map = new google.maps.Map(document.getElementById('amm-map'), {
     107    center: initialCenter,
     108    zoom: (markerData.amm_map_control) ? mapControl[0].zoom : parseInt(mapSettings.map_zoom),
     109    mapId: 'amm-map',
     110    mapTypeId: mapSettings.map_style,
     111    navigationControl: true,
     112    fullscreenControl: mapFullScreenStatus,
     113    mapTypeControl: mapTypeControlStatus,
     114    streetViewControl: mapStreetViewStatus,
     115  });
     116
     117  const styledMapType = new google.maps.StyledMapType(
     118    mapStyles[mapStyleType],
     119    { name: mapStyleType }
     120  );
     121
     122  map.mapTypes.set("custom_style", styledMapType);
     123  map.setMapTypeId("custom_style");
     124
    122125  if (location.protocol == 'https:') {
    123     if ( navigator.geolocation ) {
    124       navigator.geolocation.getCurrentPosition( function( position ) {
    125         var pos = {
    126           lat: position.coords.latitude,
    127           lng: position.coords.longitude
    128         };
    129       },
    130       function () {
    131         // Gelocation fallback: Defaults to Stockholm, Sweden
    132         // markerText = "<p>Please accept geolocation for me to be able to find you. <br>I've put you in Stockholm for now.</p>";
    133         var pos = {
    134           lat: 59.3325215,
    135           lng: 18.0643818
    136         };
    137       });
    138     }
    139   }else{
    140       // No geolocation fallback: Defaults to USA
    141       // markerText = "<p>No location support. Try USA for now. :-)</p>";
    142       var pos = {
    143           lat: 39.218129,
    144           lng: -97.855122
    145         };
    146   }
    147   map.setCenter( pos );
    148   map.setZoom( 5 );
     126    if (navigator.geolocation) {
     127      navigator.geolocation.getCurrentPosition(function ({ coords }) {
     128        map.setCenter({
     129          lat: coords.latitude,
     130          lng: coords.longitude
     131        });
     132        map.setZoom(5);
     133        oldMapLatlngs.map(function (marker, i) {
     134          if (marker.lat === coords.latitude && marker.lng === coords.longitude) {
     135            currentLocation = coords;
     136            document.getElementById('drop_marker_wrap').style.display = 'none';
     137            dropMarkerBtnState = false;
     138          }
     139        });
     140      },
     141        () => {
     142          // Gelocation fallback: Defaults to Stockholm, Sweden
     143          // markerText = "<p>Please accept geolocation for me to be able to find you. <br>I've put you in Stockholm for now.</p>";
     144          map.setCenter({
     145            lat: 59.3325215,
     146            lng: 18.0643818
     147          });
     148          map.setZoom(5);
     149        });
     150    }
     151  } else {
     152    // No geolocation fallback: Defaults to USA
     153    var pos = {
     154      lat: 39.218129,
     155      lng: -97.855122
     156    };
     157  }
     158  map.setCenter(pos);
     159  map.setZoom(5);
    149160
    150161  // Shape array which helps to add all the shape in this array.
    151   var markerArray = [];
    152   if ( oldMapLatlngs ) {
     162  if (oldMapLatlngs) {
     163    const bounds = new google.maps.LatLngBounds();
    153164    // Add map drawing tools.
    154     oldMapLatlngs.forEach( function( latlg, i ) {
    155       allDrawShape.push( i );
    156       markerArray.push( oldMapType[0].type[i] );
     165    oldMapLatlngs.forEach(function (latlg, i) {
     166      const shapeType = oldMapType[0].type[i];
     167      let latlngs = {};
     168
     169      allDrawShape.push(i);
     170      markerArray.push(shapeType);
    157171      drawShapeDetail.push(oldMapLatlngs[i]);
    158172      var multipoint = [];
    159173      // MapType Marker.
    160       if ( oldMapType[0].type[i] == 'marker' ) {
    161         var latlngs = { lat: parseFloat( latlg.lat ), lng: parseFloat( latlg.lng ) };
     174      if ('marker' == shapeType) {
     175        latlngs = { lat: parseFloat(latlg.lat), lng: parseFloat(latlg.lng) };
    162176        // Init marker postion.
    163         var saveShape = new google.maps.Marker( {
     177        var saveShape = new google.maps.Marker({
    164178          position: latlngs,
    165179          map: map,
    166180          icon: latlg.img[0],
    167           type: oldMapType[0].type[i], // Custom array to get the shape type.
    168         } );
     181          type: shapeType,
     182        });
    169183        // Open Infowindow.
    170         google.maps.event.addListener( saveShape, 'dblclick', function(e) {
    171           console.log(this.map);
     184        google.maps.event.addListener(saveShape, 'dblclick', function (e) {
     185          const markerTitle = latlg.title || '';
    172186          reInfowindow = new google.maps.InfoWindow({
    173             content: '<div><strong>' + latlg.title[0] + '</strong><br /><a href="https://www.google.com/maps/search/?api=1&query=' + parseFloat( latlg.lat ) + ',' + parseFloat( latlg.lng ) + '&query_place_id=' + latlg.place_id + '" target="_blank">Get Direction</a></div>',
     187            content: '<div style="max-width: 300px;"><strong>' + markerTitle + '</strong><br /><a href="https://www.google.com/maps/search/?api=1&query=' + parseFloat(latlg.lat) + ',' + parseFloat(latlg.lng) + '&query_place_id=' + latlg.place_id + '" target="_blank">Get Direction</a></div>',
    174188          });
    175           reInfowindow.open( map, saveShape );
     189          reInfowindow.open(map, saveShape);
    176190        });
    177191      }
    178192      // oldMapType polygon & polyline.
    179       if ( oldMapType[0].type[i] == 'polygon' || oldMapType[0].type[i] == 'polyline' ) {
    180         latlg.poly.forEach( function( pos, j ) {
    181           multipoint.push( pos );
     193      if ('polygon' == shapeType || 'polyline' == shapeType) {
     194        latlg.poly.forEach(function (pos, j) {
     195          multipoint.push(pos);
     196          latlngs = { lat: parseFloat(pos.lat), lng: parseFloat(pos.lng) };
     197          bounds.extend(latlngs);
     198          map.fitBounds(bounds);
    182199        });
    183      
     200
    184201        var triangleCoords = multipoint;
    185202        // Construct the polygon.
    186203        var saveShape = new google.maps.Polygon({
    187204          paths: triangleCoords,
    188           strokeColor: latlg.fillcolor, 
     205          strokeColor: latlg.fillcolor,
    189206          strokeOpacity: 0.8,
    190207          strokeWeight: 3,
    191208          fillColor: latlg.fillcolor,
    192209          fillOpacity: 0.35,
    193           type: oldMapType[0].type[i], // Custom array to get the shape type.
     210          type: shapeType,
    194211        });
    195         saveShape.setMap( map );
     212        saveShape.setMap(map);
    196213      }
    197214      // oldMapType circle.
    198       if ( oldMapType[0].type[i] == 'circle' ) {
     215      if ('circle' == shapeType) {
     216        latlngs = { lat: parseFloat(latlg.circle.lat), lng: parseFloat(latlg.circle.lng) };
    199217        var saveShape = new google.maps.Circle({
    200218          strokeColor: latlg.fillcolor,
    … …  
    206224          center: latlg.circle,
    207225          radius: latlg.radius,
    208           type: oldMapType[0].type[i], // Custom array to get the shape type.
     226          type: shapeType,
    209227        });
     228        bounds.extend(latlngs);
     229        map.fitBounds(bounds);
    210230      }
    211231      // oldMapType rectangle.
    212       if ( oldMapType[0].type[i] == 'rectangle' ) {
     232      if ('rectangle' == shapeType) {
     233        latlngs = { lat: parseFloat((latlg[shapeType].north + latlg[shapeType].south) / 2), lng: parseFloat((latlg[shapeType].east + latlg[shapeType].west) / 2) }
    213234        var saveShape = new google.maps.Rectangle({
    214235          strokeColor: latlg.fillcolor,
    … …  
    219240          map: map,
    220241          bounds: latlg.rectangle,
    221           type: oldMapType[0].type[i], // Custom array to get the shape type.
     242          type: shapeType,
    222243        });
    223        
     244        bounds.extend(latlngs);
     245        map.fitBounds(bounds);
    224246      }
    225247      // Remove save shape from map.
    226       google.maps.event.addListener( saveShape, 'click', function(e) {
    227         if ( oldMapLatlngs[i] ) {
    228           removeSelectedDrawShape( oldMapLatlngs[i], oldMapType[0].type[i] );
    229           setDrawingShape( saveShape );
    230         }
    231       });
    232 
     248      google.maps.event.addListener(saveShape, 'click', function (e) {
     249        if (oldMapLatlngs[i]) {
     250          removeSelectedDrawShape(oldMapLatlngs[i], shapeType);
     251          setDrawingShape(saveShape);
     252        }
     253      });
     254      bounds.extend(latlngs);
     255      map.fitBounds(bounds);
    233256    });
    234     // document.getElementById( 'amm_marker_type' ).value = JSON.stringify( oldMapType );
    235     // document.getElementById( 'amm_marker_positions' ).value = JSON.stringify( oldMapLatlngs );
    236257  }
    237258
    238259  // if center changed then update lat and lon document objects
    239   google.maps.event.addListener( map, 'center_changed', function () {
     260  google.maps.event.addListener(map, 'center_changed', function () {
    240261    var location = map.getCenter();
    241262    mapController = [];
    242     mapController.push( {lat: location.lat(), lng: location.lng(), zoom: map.zoom} );
    243     document.getElementById('amm_map_control').value = JSON.stringify( mapController );
     263    mapController.push({ lat: location.lat(), lng: location.lng(), zoom: map.zoom });
     264    document.getElementById('amm_map_control').value = JSON.stringify(mapController);
    244265  });
    245266
    246267  // Created variable for the drawing modes.
    247268  var polyOptions = {
    248       strokeWeight: 0,
    249       fillOpacity: 0.6,
    250       editable: true,
    251       draggable: true,
    252       disableDoubleClickZoom: true
     269    strokeWeight: 0,
     270    fillOpacity: 0.6,
     271    editable: true,
     272    draggable: true,
     273    disableDoubleClickZoom: true
    253274  };
    254275  //DrawingManager helps to create shapes/drawingMpdes on Maps.
    … …  
    261282    },
    262283    markerOptions: {
    263         draggable: true
     284      draggable: true
    264285    },
    265286    polylineOptions: {
    266         editable: true,
    267         draggable: true
     287      editable: true,
     288      draggable: true
    268289    },
    269290    rectangleOptions: polyOptions,
    … …  
    275296  // This is for storing map date into database.
    276297  // When draw of overlay complete.
    277   google.maps.event.addListener( drawingManager, 'overlaycomplete', function( event ) {
    278     var submitMap = document.getElementById('amm-maps-submit');
     298  google.maps.event.addListener(drawingManager, 'overlaycomplete', function (event) {
     299    const submitMap = document.getElementById('amm-maps-submit');
    279300    if (submitMap.disabled == true) {
    280301      submitMap.disabled = false;
    … …  
    282303    document.getElementById('amm-maps-submit').disabled = false;
    283304    // Stop zoom when dbclick on map marker or shapes.
    284     map.setOptions( {disableDoubleClickZoom: true } );
     305    map.setOptions({ disableDoubleClickZoom: true });
    285306    // Each overlay index.
    286307    var mapIndex = allDrawShape.length;
    … …  
    288309    drawShape = event.overlay;
    289310    drawShape.type = event.type;
     311    drawShape.uuid = Date.now();
    290312
    291313    // Drawing shape is marker.
    292     if ( drawShape.type === 'marker' ) {
     314    if (drawShape.type === 'marker') {
    293315      // Push marker detail in drawShapeDetail object with blank title.
    294       drawShapeDetail.push( {lat: drawShape.getPosition().lat(), lng: drawShape.getPosition().lng(), img: [drawShape.icon], title: '', place_id: ''} );
     316      drawShapeDetail.push({ uuid: drawShape.uuid, lat: drawShape.getPosition().lat(), lng: drawShape.getPosition().lng(), img: [drawShape.icon], title: '', place_id: '' });
     317      markerPositionsInput.value = JSON.stringify(drawShapeDetail);
    295318      // When push marker on map infowindow opens with custom label and you can edit it..
    296       var latlng = {lat: parseFloat(drawShape.getPosition().lat()), lng: parseFloat(drawShape.getPosition().lng())};
    297       geocoder.geocode( {'location': latlng}, function( results, status ) {
    298         if ( status === 'OK' ) {
    299           if ( results[0] ) {
    300             infowindow.setContent( '<div id="map-popup"><textarea rows="2" cols="30" id="map-info_' + mapIndex + '" placeholder="Add your label here..."></textarea></div>' );
    301             infowindow.open( map, drawShape );
    302             drawShapeDetail[mapIndex].place_id = results[1].place_id;
    303             document.getElementById('amm_marker_positions').value = JSON.stringify( drawShapeDetail );
    304           } else {
    305             window.alert( 'No results found where you have clicked' );
    306           }
    307         }
    308       });
    309 
    310       markerArray.push( drawShape.type );
     319      var latlng = { lat: parseFloat(drawShape.getPosition().lat()), lng: parseFloat(drawShape.getPosition().lng()) };
     320      geocoder.geocode({ 'location': latlng }, function (results, status) {
     321        if (status === 'OK' && results && results.length) {
     322          var primaryResult = results[0];
     323          infowindow.setContent('<div id="map-popup"><textarea rows="2" cols="30" id="map-info_' + mapIndex + '" placeholder="Add your label here..."></textarea></div>');
     324          infowindow.open(map, drawShape);
     325          drawShapeDetail[mapIndex].place_id = primaryResult.place_id || '';
     326          markerPositionsInput.value = JSON.stringify(drawShapeDetail);
     327        } else if (status === 'ZERO_RESULTS') {
     328          window.alert('No results found where you have clicked');
     329        }
     330      });
     331
     332      markerArray.push(drawShape.type);
    311333      // Add value to input fields.
    312       document.getElementById('amm_marker_type').value = JSON.stringify( mapType );
    313 
    314       allDrawShape.push( drawShape );
     334      markerTypeInput.value = JSON.stringify(mapType);
     335
     336      allDrawShape.push(drawShape);
    315337
    316338      // Remove selected option from drawing tools.
    317       drawingManager.setDrawingMode( null );
     339      drawingManager.setDrawingMode(null);
    318340
    319341      // Popup info window.
    320       drawShape.addListener( 'dblclick', markerInfoWindow );
     342      drawShape.addListener('dblclick', markerInfoWindow);
    321343
    322344      // Update lng and lat when drag the marker from one place to other place.
    323       google.maps.event.addListener( drawShape, 'dragend', function( markerPos ) {
    324         var markerIndex = allDrawShape.indexOf( this );
    325         if ( drawShapeDetail ) {
    326           var latlng = {lat: parseFloat(markerPos.latLng.lat()), lng: parseFloat(markerPos.latLng.lng())};
    327           geocoder.geocode( {'location': latlng}, function( results, status ) {
    328             if ( status === 'OK' ) {
    329               if ( results[0] ) {
    330                 reInfowindow.setContent( '<div id="map-popup"><textarea rows="2" cols="30" id="map-info_' + markerIndex + '" placeholder="Add your label here..."></textarea></div>' );
    331                 reInfowindow.setPosition( markerPos.latLng );
    332                 reInfowindow.open( map );
    333                 // Update title, lan, and lat.
    334                 drawShapeDetail[markerIndex].lat   = results[0].geometry.location.lat();
    335                 drawShapeDetail[markerIndex].lng   = results[0].geometry.location.lng();
    336                 drawShapeDetail[mapIndex].place_id = results[1].place_id;
    337                 document.getElementById('amm_marker_positions').value = JSON.stringify( drawShapeDetail );
    338                 // Function calling for the input title on popup.
    339                 infoWindowTItle( markerIndex );
    340               } else {
    341                 window.alert( 'No results found where you have dragend' );
    342               }
    343             }
    344           });
    345         }
    346       });
     345      markerDragHandler(drawShape);
    347346      // Calling function for updating map title.
    348       infoWindowTItle( mapIndex );
     347      infoWindowTitle(mapIndex);
    349348    }
    350349
    351350    // Drawing shape is "Circle".
    352     if ( drawShape.type === 'circle' ) {
     351    if (drawShape.type === 'circle') {
    353352      // Push circle detail in drawShapeDetail object with blank title.
    354       drawShapeDetail.push( {circle: drawShape.getCenter(), radius: drawShape.getRadius(), fillcolor: drawShape.fillColor} );
     353      drawShapeDetail.push({ uuid: drawShape.uuid, circle: drawShape.getCenter(), radius: drawShape.getRadius(), fillcolor: drawShape.fillColor });
    355354      // On drawing circle label option.
    356       infowindow.setPosition( drawShape.getCenter() );
     355      infowindow.setPosition(drawShape.getCenter());
    357356
    358357      // Remove selected option from drawing tools.
    359       drawingManager.setDrawingMode( null );
    360 
    361       markerArray.push( drawShape.type );
     358      drawingManager.setDrawingMode(null);
     359
     360      markerArray.push(drawShape.type);
    362361
    363362      // Added value in hidden fields.
    364       document.getElementById('amm_marker_type').value = JSON.stringify( mapType );
    365       document.getElementById('amm_marker_positions').value = JSON.stringify( drawShapeDetail );
    366 
    367       allDrawShape.push( drawShape );
     363      markerTypeInput.value = JSON.stringify(mapType);
     364      markerPositionsInput.value = JSON.stringify(drawShapeDetail);
     365
     366      allDrawShape.push(drawShape);
    368367
    369368      // On change shape.
    370       drawShape.addListener('bounds_changed', function() {
    371         var markerIndex = allDrawShape.indexOf( this );
     369      drawShape.addListener('bounds_changed', function () {
     370        var markerIndex = allDrawShape.indexOf(this);
    372371        drawShapeDetail[markerIndex].circle = this.getCenter();
    373372        drawShapeDetail[markerIndex].radius = this.getRadius();
    374         document.getElementById('amm_marker_positions').value = JSON.stringify( drawShapeDetail );
     373        markerPositionsInput.value = JSON.stringify(drawShapeDetail);
    375374      });
    376375    }
    377376
    378377    // Drawing shape are "Polyline" & "Polygon".
    379     if ( drawShape.type === 'polygon' || drawShape.type == 'polyline' ) {
     378    if (drawShape.type === 'polygon' || drawShape.type == 'polyline') {
    380379      var polygonLatLng = [];
    381       if ( drawShape.type === 'polygon' ) {
     380      if (drawShape.type === 'polygon') {
    382381        var polycolor = drawShape.fillColor;
    383382      }
    … …  
    387386
    388387      var polygonLenght = drawShape.getPath().getLength();
    389       for ( var i = 0; i < polygonLenght; i++ ) {
    390         polygonLatLng.push( drawShape.getPath().getAt(i) );
     388      for (var i = 0; i < polygonLenght; i++) {
     389        polygonLatLng.push(drawShape.getPath().getAt(i));
    391390      }
    392391      // Push polygon detail in drawShapeDetail object with blank title.
    393       drawShapeDetail.push( { poly: polygonLatLng, fillcolor: polycolor} );
    394        // On drawing circle label option.
    395       infowindow.setPosition( drawShape.getPath().getAt(0) );
     392      drawShapeDetail.push({ uuid: drawShape.uuid, poly: polygonLatLng, fillcolor: polycolor });
     393      // On drawing circle label option.
     394      infowindow.setPosition(drawShape.getPath().getAt(0));
    396395
    397396      // Remove selected option from drawing tools.
    398       drawingManager.setDrawingMode( null );
    399 
    400       markerArray.push( drawShape.type );
    401 
    402       document.getElementById('amm_marker_type').value = JSON.stringify( mapType );
    403       document.getElementById('amm_marker_positions').value = JSON.stringify( drawShapeDetail );
    404 
    405       allDrawShape.push( drawShape );
     397      drawingManager.setDrawingMode(null);
     398
     399      markerArray.push(drawShape.type);
     400
     401      markerTypeInput.value = JSON.stringify(mapType);
     402      markerPositionsInput.value = JSON.stringify(drawShapeDetail);
     403
     404      allDrawShape.push(drawShape);
    406405
    407406      // Declare array.
    408407      var polyInsertLatLng = [];
    409408      // Insert new point with lat and lng.
    410       drawShape.getPath().addListener( 'insert_at', function() {
    411         var markerIndex = allDrawShape.indexOf( drawShape );
     409      drawShape.getPath().addListener('insert_at', function () {
     410        var markerIndex = allDrawShape.indexOf(drawShape);
    412411
    413412        var polyInsertLenght = this.length;
    414         for ( var j = 0; j < polyInsertLenght; j++ ) {
    415           polyInsertLatLng.push( this.getAt(j) );
     413        for (var j = 0; j < polyInsertLenght; j++) {
     414          polyInsertLatLng.push(this.getAt(j));
    416415        }
    417416
    418417        drawShapeDetail[markerIndex].poly = polyInsertLatLng;
    419         document.getElementById('amm_marker_positions').value = JSON.stringify( drawShapeDetail );
     418        markerPositionsInput.value = JSON.stringify(drawShapeDetail);
    420419      });
    421420
    … …  
    423422      var polySetLatLng = []
    424423      // Update exiting poly lat and lng.
    425       drawShape.getPath().addListener( 'set_at', function() {
    426         var markerIndex = allDrawShape.indexOf( drawShape );
     424      drawShape.getPath().addListener('set_at', function () {
     425        var markerIndex = allDrawShape.indexOf(drawShape);
    427426
    428427        var polySetLenght = this.length;
    429         for ( var k = 0; k < polySetLenght; k++ ) {
    430           polySetLatLng.push( this.getAt(k) );
     428        for (var k = 0; k < polySetLenght; k++) {
     429          polySetLatLng.push(this.getAt(k));
    431430        }
    432431        drawShapeDetail[markerIndex].poly = polySetLatLng;
    433         document.getElementById('amm_marker_positions').value = JSON.stringify( drawShapeDetail );
     432        markerPositionsInput.value = JSON.stringify(drawShapeDetail);
    434433      });
    435434    }
    436435
    437436    // Drawing shape is "Rectangle".
    438     if ( drawShape.type === 'rectangle' ) {
     437    if (drawShape.type === 'rectangle') {
    439438      // Push rectangle detail in drawShapeDetail object with blank title.
    440       drawShapeDetail.push( {rectangle: drawShape.getBounds(), fillcolor: drawShape.fillColor} );
     439      drawShapeDetail.push({ uuid: drawShape.uuid, rectangle: drawShape.getBounds(), fillcolor: drawShape.fillColor });
    441440      // On drawing circle label option.
    442       infowindow.setPosition( drawShape.getBounds().getNorthEast() );
     441      infowindow.setPosition(drawShape.getBounds().getNorthEast());
    443442
    444443      // Remove selected option from drawing tools.
    445       drawingManager.setDrawingMode( null );
     444      drawingManager.setDrawingMode(null);
    446445
    447446      markerArray.push(drawShape.type);
    448447
    449       document.getElementById('amm_marker_type').value = JSON.stringify( mapType );
    450       document.getElementById('amm_marker_positions').value = JSON.stringify( drawShapeDetail );
    451 
    452       allDrawShape.push( drawShape );
     448      markerTypeInput.value = JSON.stringify(mapType);
     449      markerPositionsInput.value = JSON.stringify(drawShapeDetail);
     450
     451      allDrawShape.push(drawShape);
    453452      // Bounds change for the rectangle.
    454       drawShape.addListener('bounds_changed', function() {
    455         var markerIndex = allDrawShape.indexOf( this );
     453      drawShape.addListener('bounds_changed', function () {
     454        var markerIndex = allDrawShape.indexOf(this);
    456455        drawShapeDetail[markerIndex].rectangle = this.getBounds();
    457         document.getElementById('amm_marker_positions').value = JSON.stringify( drawShapeDetail );
     456        markerPositionsInput.value = JSON.stringify(drawShapeDetail);
    458457
    459458      });
    … …  
    461460
    462461    // Remove selected marker.
    463     if ( drawShape.type !== google.maps.drawing.OverlayType.MARKER ) {
     462    if (drawShape.type !== google.maps.drawing.OverlayType.MARKER) {
    464463      // Switch back to non-drawing mode after drawing a shape.
    465       drawingManager.setDrawingMode( null );
     464      drawingManager.setDrawingMode(null);
    466465
    467466      // Click event for all the shape which we draw.
    468       google.maps.event.addListener( drawShape, 'click', function(e) {
     467      google.maps.event.addListener(drawShape, 'click', function (e) {
    469468        // For removing the arrays.
    470         var index = allDrawShape.indexOf( this );
     469        var index = allDrawShape.indexOf(this);
    471470
    472471        if (drawShapeDetail[index]) {
    473           removeSelectedDrawShape( drawShapeDetail[index], mapType[0].type[index] );
     472          removeSelectedDrawShape(drawShapeDetail[index], mapType[0].type[index]);
    474473        }
    475474        else {
    476           removeSelectedDrawShape( drawShape, drawShape.type );
     475          removeSelectedDrawShape(drawShape, drawShape.type);
    477476        }
    478477        // After creating map or adding shape. Drawingshape will make setnull.
    479         if ( event.vertex !== undefined ) {
    480           if ( drawShape.type === google.maps.drawing.OverlayType.POLYGON ) {
    481             var path = drawShape.getPaths().getAt( e.path );
    482             path.removeAt( e.vertex );
    483             if ( path.length < 3 ) {
    484               drawShape.setMap( null );
     478        if (event.vertex !== undefined) {
     479          if (drawShape.type === google.maps.drawing.OverlayType.POLYGON) {
     480            var path = drawShape.getPaths().getAt(e.path);
     481            path.removeAt(e.vertex);
     482            if (path.length < 3) {
     483              drawShape.setMap(null);
    485484            }
    486485          }
    487           if ( drawShape.type === google.maps.drawing.OverlayType.POLYLINE ) {
     486          if (drawShape.type === google.maps.drawing.OverlayType.POLYLINE) {
    488487            var path = drawShape.getPath();
    489488            path.removeAt(e.vertex);
    490             if ( path.length < 2 ) {
    491               drawShape.setMap( null );
     489            if (path.length < 2) {
     490              drawShape.setMap(null);
    492491            }
    493492          }
    494493        }
    495494        // Select drawing shape.
    496         setDrawingShape( this );
     495        setDrawingShape(this);
    497496      });
    498497      // Select drawing shape.
    499       setDrawingShape( drawShape );
     498      setDrawingShape(drawShape);
    500499    } else {
    501       google.maps.event.addListener( drawShape, 'click', function( e ) {
     500      google.maps.event.addListener(drawShape, 'click', function (e) {
    502501        // For removing the arrays.
    503         var index = allDrawShape.indexOf( this );
    504 
    505         if ( drawShapeDetail[index] ) {
    506           removeSelectedDrawShape( drawShapeDetail[index], mapType[0].type[index] );
     502        var index = allDrawShape.indexOf(this);
     503
     504        if (drawShapeDetail[index]) {
     505          removeSelectedDrawShape(drawShapeDetail[index], mapType[0].type[index]);
    507506        }
    508507        else {
    509           removeSelectedDrawShape( drawShape, drawShape.type );
     508          removeSelectedDrawShape(drawShape, drawShape.type);
    510509        }
    511510        // Select drawing shape.
    512         setDrawingShape( this );
     511        setDrawingShape(this);
    513512      });
    514513      // Select drawing shape.
    515       setDrawingShape( drawShape );
     514      setDrawingShape(drawShape);
    516515    }
    517516
    518517  });
    519518  // Add all the shapes into the map.
    520   drawingManager.setMap( map );
     519  drawingManager.setMap(map);
    521520  // Store all the shapes type in single array.
    522   mapType.push( {type : markerArray} );
     521  mapType.push({ type: markerArray });
    523522  //Call map initialize.
    524523  init_auto();
    … …  
    528527function init_auto() {
    529528  var inputs = document.getElementById('amm_search_area');
    530   if ( inputs ) {
    531     var searchBox = new google.maps.places.SearchBox( inputs );
    532     map.addListener('bounds_changed', function() {
    533       searchBox.setBounds( map.getBounds() );
     529  if (inputs) {
     530    var searchBox = new google.maps.places.SearchBox(inputs);
     531    map.addListener('bounds_changed', function () {
     532      searchBox.setBounds(map.getBounds());
    534533    });
    535534    var markers = [];
    536535    // Listen for the event fired when the user selects a prediction and retrieve
    537536    // more details for that place.
    538     searchBox.addListener('places_changed', function() {
     537    searchBox.addListener('places_changed', function () {
    539538      var places = searchBox.getPlaces();
    540       if ( places.length == 0 ) {
     539      if (places.length == 0) {
    541540        return;
    542541      }
    543542      // Clear out the old markers.
    544       markers.forEach( function(marker) {
    545         marker.setMap( null );
     543      markers.forEach(function (marker) {
     544        marker.setMap(null);
    546545      });
    547546
    … …  
    550549      var bounds = new google.maps.LatLngBounds();
    551550
    552       places.forEach( function(place) {
    553         if ( !place.geometry ) {
    554           console.log( 'Returned place contains no geometry' );
     551      places.forEach(function (place) {
     552        if (!place.geometry) {
     553          console.log('Returned place contains no geometry');
    555554          return;
    556555        }
    … …  
    558557        var icon = {
    559558          url: place.icon,
    560           size: new google.maps.Size( 71, 71 ),
    561           origin: new google.maps.Point( 0, 0 ),
    562           anchor: new google.maps.Point( 17, 34 ),
    563           scaledSize: new google.maps.Size( 25, 25 )
     559          size: new google.maps.Size(71, 71),
     560          origin: new google.maps.Point(0, 0),
     561          anchor: new google.maps.Point(17, 34),
     562          scaledSize: new google.maps.Size(25, 25)
    564563        };
    565564
    … …  
    573572        });
    574573        // Added positions into the map.
    575         markers.push( positions );
    576 
    577         if ( place.geometry.viewport ) {
     574        markers.push(positions);
     575
     576        if (place.geometry.viewport) {
    578577          // Only geocodes have viewport.
    579           bounds.union( place.geometry.viewport );
     578          bounds.union(place.geometry.viewport);
    580579        } else {
    581           bounds.extend( place.geometry.location );
    582         }
    583       });
    584       map.fitBounds( bounds );
     580          bounds.extend(place.geometry.location);
     581        }
     582      });
     583      map.fitBounds(bounds);
    585584    });
    586585  }
    587   google.maps.event.addListener( drawingManager, 'drawingmode_changed', clearSelection );
    588   google.maps.event.addDomListener( document.getElementById('delete-shape'), 'click', deleteSelectedShapes );
     586  google.maps.event.addListener(drawingManager, 'drawingmode_changed', clearSelection);
     587  google.maps.event.addDomListener(document.getElementById('delete-shape'), 'click', deleteSelectedShapes);
    589588}
    590589
    591590// On input (changes shape info) store value in shape array.
    592 function infoWindowTItle( i ) {
     591function infoWindowTitle(index) {
    593592  var mapTitle = [];
    594593  var timer;
    595   var popupId = 'map-info_' + i;
    596   setTimeout( function() {
    597     document.getElementById( popupId ).addEventListener( 'input', function( e ) {
    598       var thisTitle = this.value;
    599       clearTimeout( timer );
    600       timer = setTimeout( function() {
    601         mapTitle = [];
    602         mapTitle.push( thisTitle );
    603         drawShapeDetail[i].title = mapTitle;
    604         document.getElementById( 'amm_marker_positions' ).value = JSON.stringify( drawShapeDetail );
    605       }, 500 );
    606     } );
    607   }, 800 );
     594  var popupId = 'map-info_' + index;
     595  setTimeout(function () {
     596    let popup = document.getElementById(popupId);
     597    if (popup) {
     598      popup.addEventListener('input', function (e) {
     599        var thisTitle = e.target.value;
     600        clearTimeout(timer);
     601        timer = setTimeout(function () {
     602          mapTitle = [];
     603          mapTitle.push(thisTitle);
     604          drawShapeDetail[index]['title'] = thisTitle;
     605          markerPositionsInput.value = JSON.stringify(drawShapeDetail);
     606        }, 500);
     607      });
     608    }
     609  }, 500);
    608610}
    609611
    610612// Markee Information Window.
    611 function markerInfoWindow( marker ) {
    612   var markerIndex = allDrawShape.indexOf( this );
     613function markerInfoWindow(marker) {
     614  var markerIndex = allDrawShape.indexOf(this);
     615  const latlng = { lat: parseFloat(drawShapeDetail[markerIndex].lat), lng: parseFloat(drawShapeDetail[markerIndex].lng) };
     616
    613617  // Content String on Popup.
    614   if ( drawShapeDetail[markerIndex].title[0] != '' ) {
    615     var contentString = '<b>Title: ' + drawShapeDetail[markerIndex].title[0] + '</b>';
    616     reInfowindow.setContent( contentString );
    617     reInfowindow.setPosition( marker.latLng );
    618     // Open Infowindow popup.
    619     reInfowindow.open( map );
     618  if (drawShapeDetail[markerIndex].title != '') {
     619    const markerTitle = drawShapeDetail[markerIndex].title;
     620    var contentString = '<div style="max-width: 300px;"><strong style="display:block; padding:5px;">Title: ' + markerTitle + '</strong><a href="https://www.google.com/maps/search/?api=1&query=' + parseFloat(drawShapeDetail[markerIndex].lat) + ',' + parseFloat(drawShapeDetail[markerIndex].lng) + '&query_place_id=' + drawShapeDetail[markerIndex].place_id + '" style="display:block; padding:5px;"" target="_blank">Get Direction</a></div>';
     621    reInfowindow.setContent(contentString);
     622    reInfowindow.setPosition(latlng);
     623    reInfowindow.open(map);
    620624  }
    621625  else {
    622     reInfowindow.setContent( '<div id="map-popup"><textarea rows="2" cols="30" id="map-info_' + markerIndex + '" placeholder="Add your label here..."></textarea></div>' );
    623     infoWindowTItle( markerIndex );
    624     reInfowindow.setPosition( marker.latLng );
    625     reInfowindow.open( map );
     626    reInfowindow.setContent('<div id="map-popup" style="max-width: 300px;"><textarea rows="2" cols="30" id="map-info_' + markerIndex + '" placeholder="Add your label here..."></textarea></div>');
     627    setTimeout(() => {
     628      infoWindowTitle(markerIndex);
     629    }, 100);
     630    reInfowindow.setPosition(latlng);
     631    reInfowindow.open(map);
    626632  }
    627633}
    628634
    629635// On click Or On drawing shape select.
    630 function setDrawingShape( shape ) {
     636function setDrawingShape(shape) {
    631637  var submitMap = document.getElementById('amm-maps-submit');
    632638  if (submitMap.disabled == true) {
    … …  
    634640  }
    635641  // Checking drawing shape type.
    636   if ( shape.type !== 'marker') {
     642  if (shape.type !== 'marker') {
    637643    clearSelection();
    638     shape.setEditable( true );
    639     selectColor( shape.get( 'fillColor' ) || shape.get( 'strokeColor' ) );
     644    shape.setEditable(true);
     645    selectColor(shape.get('fillColor') || shape.get('strokeColor'));
    640646  }
    641647  // Add marker object in selectedShape variable.
    … …  
    646652function clearSelection() {
    647653  // When click on map marker/shape.
    648   if ( selectedShape ) {
    649     if ( selectedShape.type !== 'marker' ) {
    650       selectedShape.setEditable( false );
     654  if (selectedShape) {
     655    if (selectedShape.type !== 'marker') {
     656      selectedShape.setEditable(false);
    651657    }
    652658    selectedShape = null;
    … …  
    655661
    656662// Assign value to global variables.
    657 function removeSelectedDrawShape( drawShape, shapeType ) {
     663function removeSelectedDrawShape(drawShape, shapeType) {
    658664  // Checking "drawShapeDetail" has drawShape..
    659   if ( drawShapeDetail ) {
     665  if (drawShapeDetail) {
    660666    selectedShapeEle = [];
    661     selectedShapeEle.push( { shape: drawShape, type: shapeType } );
    662   }
    663 }
    664 
    665 // Delete shape when click on delete button.
     667    selectedShapeEle.push({ shape: drawShape, type: shapeType });
     668  }
     669}
     670
     671/**
     672 * Remove selected shapes.
     673 * Delete shape when click on delete button
     674 */
    666675function deleteSelectedShapes() {
    667   // Remove select shapes.
    668   if ( selectedShape ) {
    669     selectedShape.setMap( null );
     676  if (selectedShape) {
     677    selectedShape.setMap(null);
    670678  }
    671679  // Checking selected shape is not null.
    672   if ( selectedShapeEle != '' ) {
    673     if ( selectedShapeEle[0].shape ) {
    674       var shapeKey = drawShapeDetail.indexOf( selectedShapeEle[0].shape );
    675       drawShapeDetail.splice( shapeKey, 1 );
    676       allDrawShape.splice( shapeKey, 1 );
    677       mapType[0].type.splice( shapeKey, 1 );
    678     }
    679     selectedShapeEle = [];
    680   }
    681   document.getElementById( 'amm_marker_type' ).value = JSON.stringify( mapType );
    682   document.getElementById( 'amm_marker_positions' ).value = JSON.stringify( drawShapeDetail );
     680  if (selectedShape.getPosition().lat() === currentLocation.latitude &&
     681    selectedShape.getPosition().lng() === currentLocation.longitude) {
     682    document.getElementById('drop_marker_wrap').style.display = 'block';
     683    dropMarkerBtnState = true;
     684  }
     685  if (selectedShape['uuid']) {
     686    drawShapeDetail.forEach((s, i) => {
     687      if (s['uuid'] === selectedShape['uuid']) {
     688        drawShapeDetail.splice(i, 1);
     689        allDrawShape.splice(i, 1);
     690        mapType[0].type.splice(i, 1);
     691      }
     692    });
     693  } else {
     694    var shapeKey = drawShapeDetail.indexOf(selectedShapeEle[0].shape);
     695    drawShapeDetail.splice(shapeKey, 1);
     696    allDrawShape.splice(shapeKey, 1);
     697    mapType[0].type.splice(shapeKey, 1);
     698  }
     699
     700  markerTypeInput.value = JSON.stringify(mapType);
     701  markerPositionsInput.value = JSON.stringify(drawShapeDetail);
    683702}
    684703
    685704// Marker Images.
    686 function selectImages( selectImg ) {
    687   for ( var i = 0; i < markerImg.length; ++i ) {
     705function selectImages(selectImg) {
     706  for (var i = 0; i < markerImg.length; ++i) {
    688707    var currImg = markerImg[i];
    689708    imagesBtn[currImg].style.border = currImg == selectImg ? '2px solid #789' : '2px solid #fff';
    690709  }
    691   var markerOptions = drawingManager.get( 'markerOptions' );
     710  var markerOptions = drawingManager.get('markerOptions');
    692711  markerOptions.icon = selectImg;
    693   drawingManager.set( 'markerOptions', markerOptions );
    694 }
    695 
    696 function createImages( imageSrc ) {
    697   var imgTags = document.createElement( 'img' );
     712  drawingManager.set('markerOptions', markerOptions);
     713}
     714
     715function createImages(imageSrc) {
     716  var imgTags = document.createElement('img');
    698717  imgTags.className = 'map-images';
    699718  imgTags.src = imageSrc;
    700719  // Click for selecting google maps icons.
    701   google.maps.event.addDomListener( imgTags, 'click', function () {
    702     selectImages( imageSrc );
     720  google.maps.event.addDomListener(imgTags, 'click', function () {
     721    selectImages(imageSrc);
    703722  });
    704723  return imgTags;
    … …  
    706725
    707726function createImageTags() {
    708   var imagesTags = document.getElementById( 'amm-marker-imgs' );
    709   for ( var i = 0; i < markerImg.length; ++i ) {
     727  var imagesTags = document.getElementById('amm-marker-imgs');
     728  for (var i = 0; i < markerImg.length; ++i) {
    710729    var currImage = markerImg[i];
    711     var markerTags = createImages( currImage );
    712     imagesTags.appendChild( markerTags );
     730    var markerTags = createImages(currImage);
     731    imagesTags.appendChild(markerTags);
    713732    imagesBtn[currImage] = markerTags;
    714733  }
    715   selectImages( markerImg[0] );
    716   document.querySelectorAll( 'img.map-images' ).forEach( function( el ) {
    717     wrap( el, document.createElement( 'div' ) );
    718   });
    719 }
    720 
    721 function wrap( el, wrapper ) {
    722   el.parentNode.insertBefore( wrapper, el );
    723   wrapper.appendChild( el );
     734  selectImages(markerImg[0]);
     735  document.querySelectorAll('img.map-images').forEach(function (el) {
     736    wrap(el, document.createElement('div'));
     737  });
     738}
     739
     740function wrap(el, wrapper) {
     741  el.parentNode.insertBefore(wrapper, el);
     742  wrapper.appendChild(el);
    724743}
    725744
    726745// Drawing tools shape colors.
    727 function selectColor( color ) {
     746function selectColor(color) {
    728747  selectedColor = color;
    729748
    730   var polylineOptions = drawingManager.get( 'polylineOptions' );
     749  var polylineOptions = drawingManager.get('polylineOptions');
    731750  polylineOptions.strokeColor = color;
    732   drawingManager.set( 'polylineOptions', polylineOptions );
    733 
    734   var rectangleOptions = drawingManager.get( 'rectangleOptions' );
     751  drawingManager.set('polylineOptions', polylineOptions);
     752
     753  var rectangleOptions = drawingManager.get('rectangleOptions');
    735754  rectangleOptions.fillColor = color;
    736   drawingManager.set( 'rectangleOptions', rectangleOptions );
    737 
    738   var circleOptions = drawingManager.get( 'circleOptions' );
     755  drawingManager.set('rectangleOptions', rectangleOptions);
     756
     757  var circleOptions = drawingManager.get('circleOptions');
    739758  circleOptions.fillColor = color;
    740   drawingManager.set( 'circleOptions', circleOptions );
    741 
    742   var polygonOptions = drawingManager.get( 'polygonOptions' );
     759  drawingManager.set('circleOptions', circleOptions);
     760
     761  var polygonOptions = drawingManager.get('polygonOptions');
    743762  polygonOptions.fillColor = color;
    744   drawingManager.set( 'polygonOptions', polygonOptions );
    745 }
    746 
    747 //  SVG icon.
     763  drawingManager.set('polygonOptions', polygonOptions);
     764}
     765
     766/**
     767 * replaces the <img> tag with the parsed <svg>.
     768 */
    748769function imgSvg() {
    749   jQuery( '.imgsvg' ).each( function() {
    750     var $img = jQuery( this );
    751     var imgID = $img.attr( 'id' );
    752     var imgClass = $img.attr( 'class' );
    753     var imgURL = $img.attr( 'src' );
    754     jQuery.get( imgURL, function( data ) {
    755       var $svg = jQuery(data).find( 'svg' );
    756       if ( typeof imgID !== 'undefined' ) {
    757         $svg = $svg.attr( 'id', imgID );
    758       }
    759       if ( typeof imgClass !== 'undefined' ) {
    760         $svg = $svg.attr( 'class', imgClass + ' replaced-svg' );
    761       }
    762       $svg = $svg.removeAttr( 'xmlns:a' );
    763       if ( ! $svg.attr( 'viewBox' ) && $svg.attr( 'height' ) && $svg.attr( 'width' ) ) {
    764         $svg.attr( 'viewBox', '0 0 ' + $svg.attr( 'height' ) + ' ' + $svg.attr( 'width' ) )
    765       }
    766       $img.replaceWith( $svg );
    767     }, 'xml' );
    768   } );
     770  jQuery('.imgsvg').each(function () {
     771    var $img = jQuery(this);
     772    var imgID = $img.attr('id');
     773    var imgClass = $img.attr('class');
     774    var imgURL = $img.attr('src');
     775    jQuery.get(imgURL, function (data) {
     776      var $svg = jQuery(data).find('svg');
     777      if (typeof imgID !== 'undefined') {
     778        $svg = $svg.attr('id', imgID);
     779      }
     780      if (typeof imgClass !== 'undefined') {
     781        $svg = $svg.attr('class', imgClass + ' replaced-svg');
     782      }
     783      $svg = $svg.removeAttr('xmlns:a');
     784      if (!$svg.attr('viewBox') && $svg.attr('height') && $svg.attr('width')) {
     785        $svg.attr('viewBox', '0 0 ' + $svg.attr('height') + ' ' + $svg.attr('width'))
     786      }
     787      $img.replaceWith($svg);
     788    }, 'xml');
     789  });
    769790}
    770791
    771792// Search show and hide.
    772793function ammSearch() {
    773   jQuery( '.amm-search-action a' ).click( function() {
    774     jQuery( '.amm-map-search-bar' ).fadeIn();
    775   } );
    776   jQuery( '.search-close' ).click( function() {
    777     jQuery( '.amm-map-search-bar' ).fadeOut();
    778     jQuery( '#amm_search_area' ).val('');
    779   } );
    780   jQuery( '.sidebar-action, .amm-sidebar-close' ).click( function() {
    781     jQuery( '.amm-map-header' ).toggleClass( 'full' );
    782     jQuery( '.amm-map-content' ).toggleClass( 'full' );
    783     jQuery( '.amm-map-sidebar' ).toggleClass( 'off' );
    784   } );
     794  jQuery('.amm-search-action a').click(function () {
     795    jQuery('.amm-map-search-bar').fadeIn();
     796  });
     797  jQuery('.search-close').click(function () {
     798    jQuery('.amm-map-search-bar').fadeOut();
     799    jQuery('#amm_search_area').val('');
     800  });
     801  jQuery('.sidebar-action, .amm-sidebar-close').click(function () {
     802    jQuery('.amm-map-header').toggleClass('full');
     803    jQuery('.amm-map-content').toggleClass('full');
     804    jQuery('.amm-map-sidebar').toggleClass('off');
     805  });
    785806}
    786807
    787808// Map structure when responsiveness.
    788 function mapStructure(){
    789   var ww = jQuery( window ).width();
    790   if ( ww < 1500 ) {
    791     jQuery( '.amm-map-header' ).addClass( 'full' );
    792     jQuery( '.amm-map-content' ).addClass( 'full' );
    793     jQuery( '.amm-map-sidebar' ).addClass( 'off' );
     809function mapStructure() {
     810  var ww = jQuery(window).width();
     811  if (ww < 1500) {
     812    jQuery('.amm-map-header').addClass('full');
     813    jQuery('.amm-map-content').addClass('full');
     814    jQuery('.amm-map-sidebar').addClass('off');
    794815  } else {
    795     jQuery( '.amm-map-header' ).removeClass( 'full' );
    796     jQuery( '.amm-map-content' ).removeClass( 'full' );
    797     jQuery( '.amm-map-sidebar' ).removeClass( 'off' );
    798   }
     816    jQuery('.amm-map-header').removeClass('full');
     817    jQuery('.amm-map-content').removeClass('full');
     818    jQuery('.amm-map-sidebar').removeClass('off');
     819  }
     820}
     821
     822/**
     823 * Handle marker drag.
     824 */
     825function markerDragHandler(marker) {
     826  google.maps.event.addListener(marker, 'dragend', function (markerPos) {
     827    var markerIndex = allDrawShape.indexOf(this);
     828    if (drawShapeDetail) {
     829      var latlng = { lat: parseFloat(markerPos.latLng.lat()), lng: parseFloat(markerPos.latLng.lng()) };
     830      drawShapeDetail[markerIndex].lat = latlng.lat;
     831      drawShapeDetail[markerIndex].lng = latlng.lng;
     832      drawShapeDetail[markerIndex].place_id = '';
     833      markerPositionsInput.value = JSON.stringify(drawShapeDetail);
     834      geocoder.geocode({ 'location': latlng }, function (results, status) {
     835        if (status === 'OK' && results && results.length) {
     836          reInfowindow.setContent('<div id="map-popup"><textarea rows="2" cols="30" id="map-info_' + markerIndex + '" placeholder="Add your label here..."></textarea></div>');
     837          reInfowindow.setPosition(markerPos.latLng);
     838          reInfowindow.open(map);
     839          // Update title, lan, and lat.
     840          drawShapeDetail[markerIndex].lat = results[0].geometry.location.lat();
     841          drawShapeDetail[markerIndex].lng = results[0].geometry.location.lng();
     842          drawShapeDetail[markerIndex].place_id = results[0].place_id || '';
     843          markerPositionsInput.value = JSON.stringify(drawShapeDetail);
     844          // Function calling for the input title on popup.
     845          infoWindowTitle(markerIndex);
     846        } else if (status === 'ZERO_RESULTS') {
     847          window.alert('No results found where you have dragend');
     848        }
     849      });
     850    }
     851  });
    799852}
    800853
    801854// Submit map WordPress Ajax.
    802 jQuery( document ).on( 'click', '.amm-maps-submit', function( e ) {
     855jQuery(document).on('click', '.amm-maps-submit', function (e) {
    803856  e.preventDefault();
    804   var formData = {
    805     action: 'addmultiplemarker_save_maps_data',
    806     form : jQuery( 'form.amm-get-location' ).serialize()
    807   }
    808   jQuery.post( amm_plugin_obj.ajax_url, formData,
    809     function ( response ) {
    810     var ajax_result = jQuery.parseJSON( response );
    811     jQuery( 'span.amm-maps-message' ).html( ajax_result.message );
    812     setTimeout( function() {
    813       jQuery( 'span.amm-maps-message' ).html( '' );
    814     }, 3000);
    815   });
     857  var formData = jQuery('form.amm-get-location').serializeArray();
     858  formData.push({
     859    name: 'action',
     860    value: 'addmultiplemarker_save_maps_data'
     861  })
     862  jQuery.post(amm_plugin_obj.ajax_url, formData,
     863    function (response) {
     864      jQuery('span.amm-maps-message').html(response.data.message);
     865      setTimeout(function () {
     866        jQuery('span.amm-maps-message').html('');
     867      }, 3000);
     868    });
    816869});
    817870
    818871// Reset map WordPress Ajax.
    819 jQuery( document ).on( 'click', '#map-resets', function( e ) {
     872jQuery(document).on('click', '#map-resets', function (e) {
    820873  var confirmReset = confirm('Are you sure you want to reset the map?');
    821   if ( confirmReset ){
     874  if (confirmReset) {
    822875    var formData = {
     876      nonce: jQuery('#amm_reset_map_nonce').val().trim(),
    823877      action: 'addmultiplemarker_reset_map'
    824878    }
    825     jQuery.post( amm_plugin_obj.ajax_url, formData,
    826     function ( response ) {
    827       if (response){
    828         window.location = window.location.href;
    829       }
    830     });
     879    jQuery.post(amm_plugin_obj.ajax_url, formData,
     880      function (response) {
     881        if (response) {
     882          window.location = window.location.href;
     883        }
     884      });
    831885  }
    832886});
    833887
    834 jQuery( window ).on( 'load resize', function() {
     888jQuery(window).on('load resize', function () {
    835889  mapStructure();
    836890});
     891
     892document.getElementById("dropMarkerBtn").addEventListener("click", function (e) {
     893  e.preventDefault;
     894  if (navigator.geolocation) {
     895    navigator.geolocation.getCurrentPosition(function (position) {
     896      if (!dropMarkerBtnState) {
     897        return;
     898      }
     899      const index = allDrawShape.length;
     900      const submitMap = document.getElementById('amm-maps-submit');
     901      if (submitMap.disabled == true) {
     902        submitMap.disabled = false;
     903      }
     904      document.getElementById('drop_marker_wrap').style.display = 'none';
     905      document.getElementById('amm-maps-submit').disabled = false;
     906      dropMarkerBtnState = false;
     907      const pos = {
     908        lat: position.coords.latitude,
     909        lng: position.coords.longitude
     910      };
     911      const uuid = Date.now();
     912
     913      const marker = new google.maps.Marker({
     914        position: pos,
     915        map: map,
     916        type: 'marker',
     917        draggable: true,
     918        uuid: uuid
     919      });
     920      currentLocation = position.coords;
     921      drawShapeDetail.push({ uuid: uuid, lat: pos.lat, lng: pos.lng, img: [drawingManager.markerOptions.icon], title: '', place_id: '' });
     922      markerPositionsInput.value = JSON.stringify(drawShapeDetail);
     923      // When push marker on map infowindow opens with custom label and you can edit it..
     924      geocoder.geocode({ 'location': pos }, function (results, status) {
     925        if (status === 'OK' && results && results.length) {
     926          var primaryResult = results[0];
     927          infowindow.setContent('<div id="map-popup"><textarea rows="2" cols="30" id="map-info_' + index + '" placeholder="Add your label here..."></textarea></div>');
     928          infowindow.open(map, marker);
     929          drawShapeDetail[index].place_id = primaryResult.place_id || '';
     930          markerPositionsInput.value = JSON.stringify(drawShapeDetail);
     931        } else if (status === 'ZERO_RESULTS') {
     932          window.alert('No results found where you have clicked');
     933        }
     934      });
     935
     936      markerArray.push('marker');
     937      // Add value to input fields.
     938      markerTypeInput.value = JSON.stringify(mapType);
     939
     940      allDrawShape.push(marker);
     941
     942      // Remove selected option from drawing tools.
     943      drawingManager.setDrawingMode(null);
     944
     945      // Popup info window.
     946      marker.addListener('dblclick', markerInfoWindow);
     947      marker.addListener('click', () => { setDrawingShape(marker) });
     948
     949      // Update lng and lat when drag the marker from one place to other place.
     950      markerDragHandler(marker)
     951
     952      setDrawingShape(marker);
     953      // Calling function for updating map title.
     954      infoWindowTitle(index);
     955
     956    }, function () {
     957      alert("Location access denied or unavailable.");
     958    });
     959
     960  } else {
     961    alert("Geolocation not supported by this browser.");
     962  }
     963});

  • add-multiple-marker/trunk/admin/map-integration.php

    r2608577 r3433258  
    11<?php
    2 if ( isset( $_REQUEST['amm_submit'] ) && wp_verify_nonce( $_POST['_wpnonce'] ) ) {
    3     $api_key = ( ( isset( $_POST['amm_api_key'] ) && $_POST['amm_api_key'] != "" ) ? sanitize_text_field( $_POST['amm_api_key'] ) : '' );
    4     $map_style = isset( $_POST['amm_map_theme'] ) ? sanitize_text_field( $_POST['amm_map_theme'] ) : '';
    5     $map_type = isset( $_POST['amm_map_style'] ) ? sanitize_text_field( $_POST['amm_map_style'] ) : '';
    6     $map_height = isset( $_POST['amm_front_map_height'] ) ? sanitize_text_field( $_POST['amm_front_map_height'] ) : '';
    7     $map_width = isset( $_POST['amm_front_map_width'] ) ? sanitize_text_field( $_POST['amm_front_map_width'] ) : '';
    8  // $map_zoom = isset( $_POST['amm_zoom_level'] ) ? sanitize_text_field( $_POST['amm_zoom_level'] ) : '';
    9   $map_full_screen = isset( $_POST['amm_fullscreencontrol'] ) ? sanitize_text_field( $_POST['amm_fullscreencontrol'] ) : '';
    10   $map_type_control = isset( $_POST['amm_maptypecontrol'] ) ? sanitize_text_field( $_POST['amm_maptypecontrol'] ) : '';
    11   $map_street_view = isset( $_POST['amm_streetviewcontrol'] ) ? sanitize_text_field( $_POST['amm_streetviewcontrol'] ) : '';
    12   // Map setting array.
     2/**
     3 * Template file for map integration menu.
     4 *
     5 * @package addmultiplemarker
     6 */
     7
     8if ( ! defined( 'ABSPATH' ) ) {
     9    exit;
     10}
     11
     12$nonce = isset( $_POST['_wpnonce'] ) ? sanitize_text_field( wp_unslash( $_POST['_wpnonce'] ) ) : '';
     13
     14if ( isset( $_POST['amm_submit'] ) && wp_verify_nonce( $nonce, 'amm_map_integration' ) ) {
     15    $api_key    = ( ( isset( $_POST['amm_api_key'] ) && '' !== $_POST['amm_api_key'] ) ? sanitize_text_field( wp_unslash( $_POST['amm_api_key'] ) ) : '' );
     16    $map_style  = isset( $_POST['amm_map_theme'] ) ? sanitize_text_field( wp_unslash( $_POST['amm_map_theme'] ) ) : '';
     17    $map_type   = isset( $_POST['amm_map_style'] ) ? sanitize_text_field( wp_unslash( $_POST['amm_map_style'] ) ) : '';
     18    $map_height = isset( $_POST['amm_front_map_height'] ) ? sanitize_text_field( wp_unslash( $_POST['amm_front_map_height'] ) ) : '';
     19    $map_width  = isset( $_POST['amm_front_map_width'] ) ? sanitize_text_field( wp_unslash( $_POST['amm_front_map_width'] ) ) : '';
     20
     21    $map_full_screen  = isset( $_POST['amm_fullscreencontrol'] ) ? '1' : '';
     22    $map_type_control = isset( $_POST['amm_maptypecontrol'] ) ? '1' : '';
     23    $map_street_view  = isset( $_POST['amm_streetviewcontrol'] ) ? '1' : '';
     24    $map_height       = ( 0 <= $map_height ) ? $map_height : '';
     25
     26    $is_key_valid = addmultiplemarker_validate_map_key( $api_key );
     27    $api_key      = $is_key_valid ? $api_key : '';
     28
     29    // Map setting array.
    1330    $map_settings = array(
    1431        'api'              => $api_key,
    … …  
    1734        'map_height'       => $map_height,
    1835        'map_width'        => $map_width,
    19     //'map_zoom'         => $map_zoom,
    20     'map_full_screen'  => $map_full_screen,
    21     'map_type_control' => $map_type_control,
    22     'map_street_view'  => $map_street_view,
     36        'map_full_screen'  => $map_full_screen,
     37        'map_type_control' => $map_type_control,
     38        'map_street_view'  => $map_street_view,
    2339    );
    24     // Store value into option table.
     40
     41    // Store value into option table.
    2542    $setting_saved = update_option( 'amm_map_setting', $map_settings );
    26     if ( $api_key == "" ){
    27         $error_msg = __( 'Please Enter Google API key', 'addmultiplemarker' );
     43    if ( '' === $api_key ) {
     44        $error_msg = __( 'Please Enter Google API key', 'add-multiple-marker' );
    2845    }
    29     if ( $setting_saved && $api_key != "" ) {
    30         $success_msg = __( 'Settings saved successfully', 'addmultiplemarker' );
     46    if ( $setting_saved && '' !== $api_key ) {
     47        $success_msg = __( 'Settings saved successfully', 'add-multiple-marker' );
    3148    }
    32 } ?>
     49}
     50
     51$retrieve_map_settings = get_option( 'amm_map_setting' );
     52$default_map_settings  = array(
     53    'api'              => '',
     54    'map_theme'        => 'standard',
     55    'map_style'        => 'roadmap',
     56    'map_width'        => '',
     57    'map_height'       => '',
     58    'map_zoom'         => '',
     59    'map_full_screen'  => '',
     60    'map_type_control' => '',
     61    'map_street_view'  => '',
     62);
     63
     64$get_settings = wp_parse_args(
     65    $retrieve_map_settings,
     66    $default_map_settings
     67);
     68?>
    3369
    3470<div class="amm-admin-main-wrap">
    3571    <div class="amm-map-integration-wrap">
    3672        <form method="POST" name="amm_map_integration" id="amm_map_integration">
    37             <?php wp_nonce_field();
    38             $retrieve_map_settings = get_option( 'amm_map_setting' );
    39             if ( !empty( $retrieve_map_settings ) ) {
    40                 $api = $retrieve_map_settings['api'];
    41                 $theme = isset( $retrieve_map_settings['map_theme'] ) ? $retrieve_map_settings['map_theme'] : 'standard';
    42                 $map_type = isset( $retrieve_map_settings['map_style'] ) ? $retrieve_map_settings['map_style'] : 'roadmap';
    43                 $map_width = isset( $retrieve_map_settings['map_width'] ) ? $retrieve_map_settings['map_width'] : '';
    44                 $map_height = isset( $retrieve_map_settings['map_height'] ) ? $retrieve_map_settings['map_height'] : '';
    45         $map_zoom = isset( $retrieve_map_settings['map_zoom'] ) ? $retrieve_map_settings['map_zoom'] : '';
    46         $map_full_screen = isset( $retrieve_map_settings['map_full_screen'] ) ? $retrieve_map_settings['map_full_screen'] : '';
    47         $map_type_control = isset( $retrieve_map_settings['map_type_control'] ) ? $retrieve_map_settings['map_type_control'] : '';
    48         $map_street_view = isset( $retrieve_map_settings['map_street_view'] ) ? $retrieve_map_settings['map_street_view'] : '';
    49             } ?>
    50       <div class="left-align-section">
    51             <div class="amm-api-section amm-panel">
    52                 <fieldset>
    53                     <legend><?php _e( 'Map API Key', 'addmultiplemarker' ); ?></legend>
    54                     <input class="amm-input" type="text" name="amm_api_key" value="<?php echo ( isset( $api ) ? $api : '' ); ?>" placeholder="<?php _e( 'Please enter your API key here', 'addmultiplemarker' ); ?>">
    55                     <span class="error error-span"><?php echo isset( $error_msg ) ? $error_msg : ''; ?></span>
    56                 </fieldset>
    57             </div>
     73            <?php wp_nonce_field( 'amm_map_integration' ); ?>
     74            <div class="left-align-section">
     75                <div class="amm-api-section amm-panel">
     76                    <fieldset>
     77                        <legend><?php esc_html_e( 'Map API Key', 'add-multiple-marker' ); ?></legend>
     78                        <input class="amm-input" type="text" name="amm_api_key" value="<?php echo esc_attr( $get_settings['api'] ); ?>"
     79                            placeholder="<?php echo esc_attr__( 'Please enter your API key here', 'add-multiple-marker' ); ?>">
     80                        <span class="error error-span"><?php echo isset( $error_msg ) ? esc_html( $error_msg ) : esc_html( '' ); ?></span>
     81                    </fieldset>
     82                </div>
    5883
    59             <div class="amm-map-theme-style amm-panel">
    60                 <fieldset>
    61                     <legend><?php _e('Map Type','addmultiplemarker'); ?></legend>
    62                     <label class="label">
    63                         <input type="radio" name="amm_map_style" value="roadmap" <?php echo ( ( isset ( $map_type ) && $map_type == 'roadmap' ) ? 'checked' : '' ); ?> <?php echo (!isset( $map_type ) ? 'checked': ''); ?> >
    64                         <?php esc_attr_e( 'Roadmap', 'addmultiplemarker' ); ?>
    65                     </label>
    66                     <label class="label">
    67                         <input type="radio" name="amm_map_style" value="satellite" <?php echo ( ( isset ( $map_type ) && $map_type == 'satellite' ) ? 'checked' : '' ); ?>>
    68                         <?php esc_attr_e( 'Satellite', 'addmultiplemarker' ); ?>
    69                     </label>
    70                     <label class="label">
    71                         <input type="radio" name="amm_map_style" value="hybrid" <?php echo ( ( isset ( $map_type ) && $map_type == 'hybrid' ) ? 'checked' : '' ); ?>><?php esc_attr_e( 'Hybrid', 'addmultiplemarker' ); ?>
    72                     </label>
    73                     <label class="label">
    74                         <input type="radio" name="amm_map_style" value="terrain" <?php echo ( ( isset ( $map_type ) && $map_type == 'terrain' ) ? 'checked' : '' ); ?>><?php esc_attr_e( 'Terrain', 'addmultiplemarker' ); ?>
    75                     </label>
    76                 </fieldset>
    77             </div>
    78             <div class="amm-dimensions amm-panel">
    79                 <fieldset>
    80                     <legend><?php _e( 'Width','addmultiplemarker' ); ?></legend>
    81                     <input class="amm-input" type="text" value="<?php echo ( isset( $map_width ) ? $map_width : '' ); ?>" name="amm_front_map_width" placeholder="eg. 100%">
    82                 </fieldset>
    83             </div>
    84             <div class="amm-dimensions amm-panel">
    85                 <fieldset>
    86                     <legend><?php _e( 'Height','addmultiplemarker' ); ?></legend>
    87                     <input class="amm-input" type="text" value="<?php echo ( isset( $map_height ) ? $map_height : '' ); ?>" name="amm_front_map_height" placeholder="eg. 100px">
    88                 </fieldset>
    89             </div>
    90       </div>
    91       <div class="right-align-section">
    92        <!--  <div class="map-config-section amm-panel">
    93           <fieldset>
    94             <legend><?php esc_attr_e( 'Zoom Level', 'addmultiplemarker' ); ?></legend>
    95             <input type="number" name="amm_zoom_level" id="amm_zoom_level" class="amm-input" value="<?php echo ( isset( $map_zoom ) ? $map_zoom : '' ); ?>">
    96           </fieldset>
    97         </div> -->
    98         <input type="hidden" name="amm_zoom_level" id="amm_zoom_level" class="amm-input" value="<?php echo ( isset( $map_zoom ) ? $map_zoom : '' ); ?>">
    99         <div class="map-config-section amm-panel">
    100           <fieldset>
    101             <legend><?php esc_attr_e( 'Map Control', 'addmultiplemarker' ); ?></legend>
    102             <input type="checkbox" name="amm_fullscreencontrol" id="amm_fullscreencontrol" <?php if ( !empty( $map_full_screen ) ): echo 'checked="checked"'; endif; ?>><?php esc_attr_e( 'Full Screen Control', 'addmultiplemarker' ); ?>
    103           </fieldset>
    104           <fieldset>
    105             <input type="checkbox" name="amm_maptypecontrol" id="amm_maptypecontrol" <?php if ( !empty( $map_type_control ) ): echo 'checked="checked"'; endif; ?>><?php esc_attr_e( 'Map Type Control', 'addmultiplemarker' ); ?>
    106           </fieldset>
    107           <fieldset>
    108             <input type="checkbox" name="amm_streetviewcontrol" id="amm_streetviewcontrol" <?php if ( !empty( $map_street_view ) ): echo 'checked="checked"'; endif; ?>><?php esc_attr_e( 'Street View Control', 'addmultiplemarker' ); ?>
    109           </fieldset>
    110         </div>
     84                <div class="amm-map-theme-style amm-panel">
     85                    <?php
     86                    $map_types = array(
     87                        'roadmap'   => __( 'Roadmap', 'add-multiple-marker' ),
     88                        'satellite' => __( 'Satellite', 'add-multiple-marker' ),
     89                        'hybrid'    => __( 'Hybrid', 'add-multiple-marker' ),
     90                        'terrain'   => __( 'Terrain', 'add-multiple-marker' ),
     91                    );
     92                    ?>
     93                    <fieldset>
     94                        <legend><?php esc_html_e( 'Map Type', 'add-multiple-marker' ); ?></legend>
     95                        <?php foreach ( $map_types as $key => $map_type ) { ?>
     96                            <label class="label">
     97                                <input type="radio" name="amm_map_style" value="<?php echo esc_attr( $key ); ?>" <?php checked( $get_settings['map_style'], $key ); ?>>
     98                                <?php echo esc_attr( $map_type ); ?>
     99                            </label>
     100                        <?php } ?>
     101                    </fieldset>
     102                </div>
     103                <div class="amm-dimensions amm-panel">
     104                    <fieldset>
     105                        <legend><?php esc_html_e( 'Width', 'add-multiple-marker' ); ?></legend>
     106                        <input class="amm-input" type="text" value="<?php echo esc_attr( $get_settings['map_width'] ); ?>" name="amm_front_map_width" placeholder="eg. 100%">
     107                    </fieldset>
     108                </div>
     109                <div class="amm-dimensions amm-panel">
     110                    <fieldset>
     111                        <legend><?php esc_html_e( 'Height', 'add-multiple-marker' ); ?> ( px )</legend>
     112                        <input class="amm-input" type="number" value="<?php echo esc_attr( $get_settings['map_height'] ); ?>" min="0" name="amm_front_map_height" placeholder="eg. 100px">
     113                    </fieldset>
     114                </div>
     115            </div>
     116            <div class="right-align-section">
     117                <input type="hidden" name="amm_zoom_level" id="amm_zoom_level" class="amm-input" value="<?php echo esc_attr( $get_settings['map_zoom'] ); ?>">
     118                <div class="map-config-section amm-panel">
     119                    <fieldset>
     120                        <legend><?php esc_html_e( 'Map Control', 'add-multiple-marker' ); ?></legend>
     121                        <label>
     122                            <input type="checkbox" name="amm_fullscreencontrol" id="amm_fullscreencontrol" value="1" <?php checked( $get_settings['map_full_screen'], '1' ); ?>>
     123                            <?php esc_html_e( 'Full Screen Control', 'add-multiple-marker' ); ?>
     124                        </label>
     125                    </fieldset>
     126                    <fieldset>
     127                        <label>
     128                            <input type="checkbox" name="amm_maptypecontrol" id="amm_maptypecontrol" value="1" <?php checked( $get_settings['map_type_control'], '1' ); ?>>
     129                            <?php esc_html_e( 'Map Type Control', 'add-multiple-marker' ); ?>
     130                        </label>
     131                    </fieldset>
     132                    <fieldset>
     133                        <label>
     134                            <input type="checkbox" name="amm_streetviewcontrol" id="amm_streetviewcontrol" value="1" <?php checked( $get_settings['map_street_view'], '1' ); ?>>
     135                            <?php esc_html_e( 'Street View Control', 'add-multiple-marker' ); ?>
     136                        </label>
     137                    </fieldset>
     138                </div>
    111139
    112         <div class="amm-map-theme-section amm-panel">
    113           <fieldset>
    114             <legend><?php _e('Map style','addmultiplemarker'); ?></legend>
    115             <label class="label">
    116               <input type="radio" name="amm_map_theme" value="standard" <?php echo ( ( isset ( $theme ) && $theme == 'standard' ) ? 'checked' : '' ); ?>
    117               <?php echo ( ! isset( $theme ) ? 'checked': '' ); ?> >
    118               <span class="text"><?php esc_attr_e( 'Standard', 'addmultiplemarker' ); ?></span>
    119               <img src="<?php echo ADDMULTIPLEMARKER_PLUGIN_URL ?>admin/images/Standard.jpg" alt="map-style">
    120             </label>
    121             <label class="label">
    122               <input type="radio" name="amm_map_theme" value="silver" <?php echo ( ( isset ( $theme ) && $theme == 'silver' ) ? 'checked' : '' ); ?>>
    123               <span class="text"><?php esc_attr_e( 'Silver', 'addmultiplemarker' ); ?></span>
    124               <img src="<?php echo ADDMULTIPLEMARKER_PLUGIN_URL ?>admin/images/Silver.jpg" alt="map-style">
    125             </label>
    126             <label class="label">
    127               <input type="radio" name="amm_map_theme" value="retro" <?php echo ( ( isset ( $theme ) && $theme == 'retro' ) ? 'checked' : '' ); ?>>
    128               <span class="text"><?php esc_attr_e( 'Retro', 'addmultiplemarker' ); ?></span>
    129               <img src="<?php echo ADDMULTIPLEMARKER_PLUGIN_URL ?>admin/images/Retro.jpg" alt="map-style">
    130             </label>
    131             <label class="label">
    132               <input type="radio" name="amm_map_theme" value="dark" <?php echo ( ( isset ( $theme ) && $theme == 'dark' ) ? 'checked' : '' ); ?>>
    133               <span class="text"><?php esc_attr_e( 'Dark', 'addmultiplemarker' ); ?></span>
    134               <img src="<?php echo ADDMULTIPLEMARKER_PLUGIN_URL ?>admin/images/Dark.jpg" alt="map-style">
    135             </label>
    136             <label class="label">
    137               <input type="radio" name="amm_map_theme" value="night" <?php echo ( ( isset ( $theme ) && $theme == 'night' ) ? 'checked' : '' ); ?>>
    138               <span class="text"><?php esc_attr_e( 'Night', 'addmultiplemarker' ); ?></span>
    139               <img src="<?php echo ADDMULTIPLEMARKER_PLUGIN_URL ?>admin/images/Night.jpg" alt="map-style">
    140             </label>
    141             <label class="label">
    142               <input type="radio" name="amm_map_theme" value="aubergine" <?php echo ( ( isset ( $theme ) && $theme == 'aubergine' ) ? 'checked' : '' ); ?>>
    143               <span class="text"><?php esc_attr_e( 'Aubergine', 'addmultiplemarker' ); ?></span>
    144               <img src="<?php echo ADDMULTIPLEMARKER_PLUGIN_URL ?>admin/images/Aubergine.jpg" alt="map-style">
    145             </label>
    146           </fieldset>
    147         </div>
    148         <div class="amm-call-to-btn">
    149           <input type="submit" name="amm_submit" value="Save" class="submit">
    150         </div>
    151       </div>
    152            
     140                <div class="amm-map-theme-section amm-panel">
     141                    <fieldset>
     142                        <legend><?php esc_html_e( 'Map style', 'add-multiple-marker' ); ?></legend>
     143                        <?php
     144                        $map_themes = array(
     145                            'standard'  => array( __( 'Standard', 'add-multiple-marker' ), 'Standard.jpg' ),
     146                            'silver'    => array( __( 'Silver', 'add-multiple-marker' ), 'Silver.jpg' ),
     147                            'retro'     => array( __( 'Retro', 'add-multiple-marker' ), 'Retro.jpg' ),
     148                            'dark'      => array( __( 'Dark', 'add-multiple-marker' ), 'Dark.jpg' ),
     149                            'night'     => array( __( 'Night', 'add-multiple-marker' ), 'Night.jpg' ),
     150                            'aubergine' => array( __( 'Aubergine', 'add-multiple-marker' ), 'Aubergine.jpg' ),
     151                        );
    153152
    154             <?php echo isset( $success_msg ) ? '<div class="success-msg">' . $success_msg . '</div>' : ''; ?>
     153                        foreach ( $map_themes as $key => $map_theme ) {
     154                            $image_url = ADDMULTIPLEMARKER_PLUGIN_URL . 'admin/images/' . $map_theme[1];
     155                            ?>
     156                            <label class="label">
     157                                <input type="radio" name="amm_map_theme" value="<?php echo esc_attr( $key ); ?>"
     158                                    <?php checked( $get_settings['map_theme'], $key ); ?>>
     159                                <span class="text"><?php echo esc_html( $map_theme[0] ); ?></span>
     160                                <img src="<?php echo esc_url( $image_url ); ?>" alt="map-style">
     161                            </label>
     162                        <?php } ?>
     163                    </fieldset>
     164                </div>
     165                <div class="amm-call-to-btn">
     166                    <input type="submit" name="amm_submit" value="Save" class="submit">
     167                </div>
     168                <?php if ( isset( $success_msg ) ) { ?>
     169                    <span class="success-msg"><?php echo esc_html( $success_msg ); ?></dspaniv>
     170                <?php } ?>
     171            </div>
    155172        </form>
     173        <?php
     174        if ( ! $get_settings['api'] ) {
     175            wp_nonce_field( 'amm_save_map_api', 'amm_api_key_nonce' );
     176        }
     177        ?>
    156178    </div>
    157179</div>

  • add-multiple-marker/trunk/functions.php

    r2608577 r3433258  
    11<?php
    22/**
     3 * Additional functions.
     4 *
    35 * @package addmultiplemarker
    46 */
    57
     8if ( ! defined( 'ABSPATH' ) ) {
     9    exit;
     10}
     11
    612if ( ! class_exists( 'Addmultiplemarker' ) ) {
    7   /**
    8   * Create a class for adding all the functionality.
    9   */
     13    /**
     14    * Create a class for adding all the functionality.
     15    */
    1016    class Addmultiplemarker {
    11     /**
    12      * Calling class __construct.
    13      */
    14         function __construct() {
    15             // Enqueue scripts.
    16               add_action( 'admin_enqueue_scripts', array( $this, 'addmultiplemarker_admin_scripts' ) );
    17               add_action( 'wp_enqueue_scripts', array( $this, 'addmultiplemarker_scripts' ) );
    18 
    19               // Include admin menu.
    20               add_action( 'admin_menu', array( $this, 'addmultiplemarker_admin_menu' ) );
    21 
    22               // // Included google api url on backend and frontend.
    23               // $map_api_details = $this->get_data_from_db( 'map_integration' );
    24               // $map_api = ( $map_api_details && $map_api_details['api'] != '' ) ? $map_api_details['api'] : '';
    25               // if ( $map_api != '' ) {
    26               //    wp_enqueue_script( 'amm-map-script', 'https://maps.googleapis.com/maps/api/js?key=' . $map_api . '&libraries=drawing,places', array( 'jquery' ), false, true );
    27               // }
    28 
    29               // Adding shortcode for displaying related posts on frontside.
    30               add_shortcode( 'addmultiplemarker', array( $this, 'display_multiple_marker_map' ) );
    31               // Load text domain.
    32               add_action( 'plugins_loaded', array( $this, 'addmultiplemarker_load_textdomain' ) );
    33               // Display notices when key is not API valid.
    34               add_action( 'admin_notices', array( $this, 'addmultiplemarker_admin_notice' ));
     17        /**
     18         * Calling class __construct.
     19         */
     20        public function __construct() {
     21                add_action( 'admin_enqueue_scripts', array( $this, 'addmultiplemarker_admin_scripts' ) );
     22                add_action( 'wp_enqueue_scripts', array( $this, 'addmultiplemarker_scripts' ) );
     23                add_action( 'admin_menu', array( $this, 'addmultiplemarker_admin_menu' ) );
     24                add_shortcode( 'addmultiplemarker', array( $this, 'display_multiple_marker_map' ) );
     25                add_action( 'admin_notices', array( $this, 'addmultiplemarker_admin_notice' ) );
    3526        }
    3627
    … …  
    3829         * Include admin style and scripts.
    3930         */
    40         function addmultiplemarker_admin_scripts() {
    41             wp_enqueue_style( 'amm-admin-css', ADDMULTIPLEMARKER_PLUGIN_URL . 'admin/css/amm-style.css' );
    42             wp_enqueue_style( 'amm-font-css', ADDMULTIPLEMARKER_PLUGIN_URL . 'admin/fonts/sanasansalt.css' );
     31        public function addmultiplemarker_admin_scripts() {
     32            $current_page = isset( $_GET['page'] ) ? sanitize_text_field( wp_unslash( $_GET['page'] ) ) : ''; // phpcs:ignore WordPress.Security.NonceVerification.Recommended
     33
     34            if ( 'addmultiplemarker' !== $current_page && 'amm-map-integration' !== $current_page ) {
     35                return;
     36            }
     37            wp_enqueue_style( 'amm-admin-css', ADDMULTIPLEMARKER_PLUGIN_URL . 'admin/css/amm-style.css', '', ADDMULTIPLEMARKER_VERSION );
     38            wp_enqueue_style( 'amm-font-css', ADDMULTIPLEMARKER_PLUGIN_URL . 'admin/fonts/sanasansalt.css', '', ADDMULTIPLEMARKER_VERSION );
    4339            wp_enqueue_style( 'wp-color-picker' );
    44             wp_enqueue_script( 'amm-jquery-blockui', ADDMULTIPLEMARKER_PLUGIN_URL . 'admin/js/jquery.blockUI.js', array( 'jquery' ), false, true );
     40            wp_enqueue_script(
     41                'amm-jquery-blockui',
     42                ADDMULTIPLEMARKER_PLUGIN_URL . 'admin/js/jquery.blockUI.js',
     43                array( 'jquery' ),
     44                ADDMULTIPLEMARKER_VERSION,
     45                true
     46            );
    4547            // Include scripts.
    4648            wp_enqueue_script( 'wp-color-picker' );
    4749            // Included google api url.
    4850            $map_api_details = $this->get_data_from_db( 'map_integration' );
    49             $map_api = ( $map_api_details && $map_api_details['api'] != '' ) ? $map_api_details['api'] : '';
    50             if ( $map_api != '' && isset( $_GET['page'] ) && $_GET['page'] == 'addmultiplemarker' ) {
    51                 wp_enqueue_script( 'amm-map-script', 'https://maps.googleapis.com/maps/api/js?key=' . $map_api . '&libraries=drawing,places', array( 'jquery' ), false, true );
    52                 wp_enqueue_script( 'amm-admin-script', ADDMULTIPLEMARKER_PLUGIN_URL . 'admin/js/amm-scripts.js', array( ), false, true );
    53             }       
    54             wp_enqueue_script( 'amm-admin-custom-script', ADDMULTIPLEMARKER_PLUGIN_URL . 'admin/js/amm-custom-settings.js', array( ), false, true );
    55             wp_localize_script( 'amm-admin-script', 'amm_plugin_obj',
     51            $map_api         = ( $map_api_details && '' !== $map_api_details['api'] ) ? $map_api_details['api'] : '';
     52
     53            if ( '' !== $map_api && $current_page && 'addmultiplemarker' === $current_page ) {
     54                wp_enqueue_script(
     55                    'amm-map-script',
     56                    'https://maps.googleapis.com/maps/api/js?key=' . $map_api . '&libraries=drawing,places',
     57                    array(),
     58                    ADDMULTIPLEMARKER_VERSION,
     59                    true
     60                );
     61                wp_enqueue_script(
     62                    'amm-admin-script',
     63                    ADDMULTIPLEMARKER_PLUGIN_URL . 'admin/js/amm-scripts.js',
     64                    array( 'jquery' ),
     65                    ADDMULTIPLEMARKER_VERSION,
     66                    true
     67                );
     68            }
     69
     70            wp_enqueue_script(
     71                'amm-admin-custom-script',
     72                ADDMULTIPLEMARKER_PLUGIN_URL . 'admin/js/amm-custom-settings.js',
     73                array(),
     74                ADDMULTIPLEMARKER_VERSION,
     75                true
     76            );
     77            wp_localize_script(
     78                'amm-admin-script',
     79                'amm_plugin_obj',
    5680                array(
    57                     'plugin_path' => ADDMULTIPLEMARKER_PLUGIN_URL,
     81                    'plugin_path'     => ADDMULTIPLEMARKER_PLUGIN_URL,
    5882                    'amm_save_option' => $this->get_data_from_db( 'marker_settings' ),
    59                     'ajax_url' => admin_url( 'admin-ajax.php' ),
    60                     'map_settings' => $this->get_data_from_db( 'map_integration' ),
     83                    'ajax_url'        => admin_url( 'admin-ajax.php' ),
     84                    'map_settings'    => $this->get_data_from_db( 'map_integration' ),
    6185                )
    6286            );
    63             wp_localize_script( 'amm-admin-custom-script', 'amm_plugin_custom_obj',
     87            wp_localize_script(
     88                'amm-admin-custom-script',
     89                'amm_plugin_custom_obj',
    6490                array(
    6591                    'ajax_url' => admin_url( 'admin-ajax.php' ),
    … …  
    7197         * Include frontend style and scripts.
    7298         */
    73         function addmultiplemarker_scripts() {
    74             wp_enqueue_style( 'amm-frontend-styles', ADDMULTIPLEMARKER_PLUGIN_URL . 'public/css/amm-frontend-style.css' );
    75 
    76             // Include scripts.
    77           //   wp_enqueue_script('amm-frontend-scripts', ADDMULTIPLEMARKER_PLUGIN_URL . 'public/js/frontendscript.js', array( 'jquery' ), '', true);
    78           //   wp_localize_script( 'amm-frontend-scripts', 'amm_frontend_obj',
    79                 //  array(
    80                 //      'amm_save_marker_option' => $this->get_data_from_db( 'marker_settings' ),
    81                 //      'map_settings' => $this->get_data_from_db( 'map_integration' ),
    82                 //  )
    83                 // );
     99        public function addmultiplemarker_scripts() {
     100            wp_enqueue_style(
     101                'amm-frontend-styles',
     102                ADDMULTIPLEMARKER_PLUGIN_URL . 'public/css/amm-frontend-style.css',
     103                '',
     104                ADDMULTIPLEMARKER_VERSION
     105            );
    84106        }
    85107
    86108        /**
    87109         * Get data from database.
    88          */
    89         function get_data_from_db( $option_name ) {
    90             if ( $option_name == 'map_integration' ) {
     110         *
     111         * @param string $option_name Option name.
     112         */
     113        public function get_data_from_db( $option_name ) {
     114            if ( 'map_integration' === $option_name ) {
    91115                $map_details = get_option( 'amm_map_setting' );
    92             } elseif ( $option_name == 'marker_settings' ) {
     116            } elseif ( 'marker_settings' === $option_name ) {
    93117                $map_details = get_option( 'amm_maps_marker' );
    94118            }
    … …  
    99123         * Register admin menu.
    100124         */
    101         function addmultiplemarker_admin_menu() {
     125        public function addmultiplemarker_admin_menu() {
    102126            add_menu_page(
    103         __( 'Add Multiple Marker', 'addmultiplemarker' ),
    104         'Add Multiple Marker',
    105         'manage_options',
    106         'addmultiplemarker',
    107         array( $this, 'addmultiplemarker_global_settings_page' ),
    108         ADDMULTIPLEMARKER_PLUGIN_URL . 'admin/images/dash-icon.png'
    109         );
    110         add_submenu_page(
    111         'addmultiplemarker',
    112         __( 'AMM Map integration', 'addmultiplemarker' ),
    113         __( 'Map integration', 'addmultiplemarker' ),
    114         'manage_options',
    115         'amm-map-integration',
    116         array( $this, 'addmultiplemarker_map_integration_callback' )
    117         );
     127                __( 'Add Multiple Marker', 'add-multiple-marker' ),
     128                'Add Multiple Marker',
     129                'manage_options',
     130                'addmultiplemarker',
     131                array( $this, 'addmultiplemarker_global_settings_page' ),
     132                ADDMULTIPLEMARKER_PLUGIN_URL . 'admin/images/dash-icon.png'
     133            );
     134            add_submenu_page(
     135                'addmultiplemarker',
     136                __( 'AMM Map integration', 'add-multiple-marker' ),
     137                __( 'Map integration', 'add-multiple-marker' ),
     138                'manage_options',
     139                'amm-map-integration',
     140                array( $this, 'addmultiplemarker_map_integration_callback' )
     141            );
    118142        }
    119143
    … …  
    121145         * Displaying admin notice.
    122146         */
    123         function addmultiplemarker_admin_notice() {
    124             if ( isset( $_REQUEST['page'] ) && ( $_REQUEST['page'] == 'addmultiplemarker' ||  $_REQUEST['page'] == 'amm-map-integration') ) {
    125                 $map_details = $this->get_data_from_db( 'map_integration' );
    126                 if ( !$map_details || $map_details['api'] == "" ) {
    127                      '<div id="message" class="error notice"><p>' . __( 'Please enter valid Google Map API for displaying map.', 'addmultiplemarker') . '</p></div>';
    128                 }
    129             }
    130         }
    131 
    132         /**
    133          * Load Text domain.
    134          */
    135         function addmultiplemarker_load_textdomain() {
    136             load_plugin_textdomain( 'addmultiplemarker', false, basename( dirname( __FILE__ ) ) . '/languages' );
    137         }
    138 
    139         /*
    140         * Display map frontside via shortcode.
    141         */
    142         function display_multiple_marker_map() {
     147        public function addmultiplemarker_admin_notice() {
     148            $current_page = isset( $_GET['page'] ) ? sanitize_text_field( wp_unslash( $_GET['page'] ) ) : ''; // phpcs:ignore WordPress.Security.NonceVerification.Recommended
     149            if ( $current_page && ( 'addmultiplemarker' === $current_page || 'amm-map-integration' === $current_page ) ) {
     150                $map_details = $this->get_data_from_db( 'map_integration' );
     151                if ( ! $map_details || ( isset( $map_details['api'] ) && '' === $map_details['api'] ) ) {
     152                    echo '<div id="message" class="error notice"><p>' . esc_html__( 'Please enter valid Google Map API for displaying map.', 'add-multiple-marker' ) . '</p></div>';
     153                }
     154            }
     155        }
     156
     157        /**
     158         * Display map frontside via shortcode.
     159         */
     160        public function display_multiple_marker_map() {
    143161            $map_details = $this->get_data_from_db( 'map_integration' );
    144             if ( $map_details['api'] != "" ) {
    145                 if ( !wp_script_is( 'amm-map-script' ) ){
    146                     wp_enqueue_script( 'amm-map-script', 'https://maps.googleapis.com/maps/api/js?key=' . $map_details['api'] . '&libraries=drawing,places', array( 'jquery' ), false, true );
     162            if ( $map_details && isset( $map_details['api'] ) && '' !== $map_details['api'] ) {
     163                if ( ! wp_script_is( 'amm-map-script' ) ) {
     164                    wp_enqueue_script( 'amm-map-script', 'https://maps.googleapis.com/maps/api/js?key=' . $map_details['api'] . '&libraries=drawing,places,marker&callback=initialize&loading=async', array(), ADDMULTIPLEMARKER_VERSION, true );
    147165                }
    148                 if ( !wp_script_is( 'amm-frontend-scripts' )  ){
    149                     wp_enqueue_script('amm-frontend-scripts', ADDMULTIPLEMARKER_PLUGIN_URL . 'public/js/frontendscript.js', array( 'jquery' ), '', true);
    150                     wp_localize_script( 'amm-frontend-scripts', 'amm_frontend_obj',
    151                             array(
    152                                 'amm_save_marker_option' => $this->get_data_from_db( 'marker_settings' ),
    153                                 'map_settings' => $this->get_data_from_db( 'map_integration' ),
    154                             )
    155                         );
     166                if ( ! wp_script_is( 'amm-frontend-scripts' ) ) {
     167                    wp_enqueue_script( 'amm-frontend-scripts', ADDMULTIPLEMARKER_PLUGIN_URL . 'public/js/frontendscript.js', array( 'jquery' ), ADDMULTIPLEMARKER_VERSION, true );
     168                    wp_localize_script(
     169                        'amm-frontend-scripts',
     170                        'amm_frontend_obj',
     171                        array(
     172                            'amm_save_marker_option' => $this->get_data_from_db( 'marker_settings' ),
     173                            'map_settings'           => $this->get_data_from_db( 'map_integration' ),
     174                        )
     175                    );
    156176                }
    157                 $map_height = isset( $map_details['map_height'] ) && $map_details['map_height'] != "" ? $map_details['map_height'] : '500px';
    158                 $map_width = isset( $map_details['map_width'] ) && $map_details['map_width'] != "" ? $map_details['map_width'] : '100%' ;
    159                 return '<div class="amm-map-integrate" id="frontmap" style="height:' . $map_height . ';width:' . $map_width . ';"></div>';
     177                $map_height = isset( $map_details['map_height'] ) && '' !== $map_details['map_height'] ? $map_details['map_height'] : '500';
     178                $map_width  = isset( $map_details['map_width'] ) && '' !== $map_details['map_width'] ? $map_details['map_width'] : '100%';
     179                return '<div class="amm-map-integrate" id="frontmap" style="height:' . $map_height . 'px;width:' . $map_width . ';"></div>';
    160180            } else {
    161                 return __( 'Please Enter Valid Google Map API Key', 'addmultiplemarker' );
     181                return __( 'Please Enter Valid Google Map API Key', 'add-multiple-marker' );
    162182            }
    163183        }
    … …  
    166186         * Map API configuration.
    167187         */
    168         function addmultiplemarker_global_settings_page() {
     188        public function addmultiplemarker_global_settings_page() {
    169189            // Include file.
    170             require_once( ADDMULTIPLEMARKER_PLUGIN_DIR . 'admin/admin-options.php' );
     190            require_once ADDMULTIPLEMARKER_PLUGIN_DIR . 'admin/admin-options.php';
    171191        }
    172192
    … …  
    174194         * Setting configuration.
    175195         */
    176         function addmultiplemarker_map_integration_callback() {
     196        public function addmultiplemarker_map_integration_callback() {
    177197            // Include file.
    178             require_once( ADDMULTIPLEMARKER_PLUGIN_DIR . 'admin/map-integration.php' );
     198            require_once ADDMULTIPLEMARKER_PLUGIN_DIR . 'admin/map-integration.php';
    179199        }
    180200    }
    181 
    182201}
    183 
    184 // Admin ajax to submit all the markers detail into the database.
    185 add_action( 'wp_ajax_addmultiplemarker_save_maps_data', 'addmultiplemarker_save_maps_data' );
    186 add_action( 'wp_ajax_nopriv_addmultiplemarker_save_maps_data', 'addmultiplemarker_save_maps_data' );
    187 function addmultiplemarker_save_maps_data() {
    188     if ( isset( $_POST['form'] ) ) {
    189     $unserialize_formdata = array();
    190     parse_str( $_POST['form'], $unserialize_formdata );
    191     if ( wp_verify_nonce( $unserialize_formdata['_wpnonce'] ) ) {
    192       $removeKeys = array( '_wpnonce', '_wp_http_referer', 'amm_search_area' );
    193       foreach ( $removeKeys as $key ) {
    194         unset( $unserialize_formdata[$key] );
    195       }
    196       $save_db = update_option( 'amm_maps_marker', $unserialize_formdata );
    197       if ( $save_db ) {
    198         $msg = array( 'result' => '1', 'message' => __( 'Your changes saved successfully.','addmultiplemarker' ) );
    199       }else{
    200         $msg = array( 'result' => '0', 'message' => __( 'You have not done any changes.','addmultiplemarker' ) );
    201       }
    202     } else {
    203       $msg = array( 'result' => '0', 'message' => __( 'Security check', 'addmultiplemarker' ) );
    204     }
    205   } else {
    206     $msg = array( 'result' => '0', 'message' => __( 'Unauthorize Access', 'addmultiplemarker' ) );
    207   }
    208   echo json_encode( $msg );
    209   wp_die();
    210 }
    211 
    212 add_action( 'wp_ajax_addmultiplemarker_reset_map', 'addmultiplemarker_reset_map' );
    213 add_action( 'wp_ajax_nopriv_addmultiplemarker_reset_map', 'addmultiplemarker_reset_map' );
    214 function addmultiplemarker_reset_map() {
    215     $option_deleted = delete_option('amm_maps_marker');
    216     return $option_deleted;
    217 }
    218 
    219 
    220 add_action( 'wp_ajax_amm_save_map_api', 'amm_save_map_api' );
    221 add_action( 'wp_ajax_nopriv_amm_save_map_api', 'amm_save_map_api' );
    222 function amm_save_map_api(){
    223     if ( isset( $_POST['apiKeyValue'] ) && $_POST['apiKeyValue'] != '' ){
    224         $existing_map_setting = get_option('amm_map_setting');
    225         $map_settings = array(
    226             'api'              => sanitize_text_field( $_POST['apiKeyValue'] ),
    227         );
    228 
    229         if ( $existing_map_setting ){
    230             unset( $existing_map_setting['api'] );
    231             $map_settings = array_merge( $map_settings, $existing_map_setting );
    232         }
    233 
    234         // Store value into option table.
    235         $setting_saved = update_option( 'amm_map_setting', $map_settings );
    236         if ($setting_saved){
    237             $msg = array( 'result' => '1', 'message' => __( 'Your changes saved successfully','addmultiplemarker' ) );
    238         }
    239     }else{
    240         $msg = array('result' => '0', 'message'=> __('Please Enter Valid Google Map Api Key','addmultiplemarker') );
    241     }
    242     echo wp_json_encode( $msg );
    243     wp_die();
    244 }

  • add-multiple-marker/trunk/index.php

    r1986887 r3433258  
    1 <?php
    2 # Silence is golden.
     1<?php // phpcs:ignoreFile
     2// Silence is golden.

  • add-multiple-marker/trunk/public/js/frontendscript.js

    r2608577 r3433258  
    1 // Global variable.
    2 var geocoder;
    3 var map;
     1const mapSettings = amm_frontend_obj.map_settings;
     2const mapType = mapSettings.map_style;
     3const mapStyleType = mapSettings.map_theme;
     4const mapStyles = {
     5  standard: [],
     6  silver: [{ "elementType": "geometry", "stylers": [{ "color": "#f5f5f5" }] }, { "elementType": "labels.icon", "stylers": [{ "visibility": "off" }] }, { "elementType": "labels.text.fill", "stylers": [{ "color": "#616161" }] }, { "elementType": "labels.text.stroke", "stylers": [{ "color": "#f5f5f5" }] }, { "featureType": "administrative.land_parcel", "elementType": "labels.text.fill", "stylers": [{ "color": "#bdbdbd" }] }, { "featureType": "poi", "elementType": "geometry", "stylers": [{ "color": "#eeeeee" }] }, { "featureType": "poi", "elementType": "labels.text.fill", "stylers": [{ "color": "#757575" }] }, { "featureType": "poi.park", "elementType": "geometry", "stylers": [{ "color": "#e5e5e5" }] }, { "featureType": "poi.park", "elementType": "labels.text.fill", "stylers": [{ "color": "#9e9e9e" }] }, { "featureType": "road", "elementType": "geometry", "stylers": [{ "color": "#ffffff" }] }, { "featureType": "road.arterial", "elementType": "labels.text.fill", "stylers": [{ "color": "#757575" }] }, { "featureType": "road.highway", "elementType": "geometry", "stylers": [{ "color": "#dadada" }] }, { "featureType": "road.highway", "elementType": "labels.text.fill", "stylers": [{ "color": "#616161" }] }, { "featureType": "road.local", "elementType": "labels.text.fill", "stylers": [{ "color": "#9e9e9e" }] }, { "featureType": "transit.line", "elementType": "geometry", "stylers": [{ "color": "#e5e5e5" }] }, { "featureType": "transit.station", "elementType": "geometry", "stylers": [{ "color": "#eeeeee" }] }, { "featureType": "water", "elementType": "geometry", "stylers": [{ "color": "#c9c9c9" }] }, { "featureType": "water", "elementType": "labels.text.fill", "stylers": [{ "color": "#9e9e9e" }] }],
     7  retro: [{ "elementType": "geometry", "stylers": [{ "color": "#ebe3cd" }] }, { "elementType": "labels.text.fill", "stylers": [{ "color": "#523735" }] }, { "elementType": "labels.text.stroke", "stylers": [{ "color": "#f5f1e6" }] }, { "featureType": "administrative", "elementType": "geometry.stroke", "stylers": [{ "color": "#c9b2a6" }] }, { "featureType": "administrative.land_parcel", "elementType": "geometry.stroke", "stylers": [{ "color": "#dcd2be" }] }, { "featureType": "administrative.land_parcel", "elementType": "labels.text.fill", "stylers": [{ "color": "#ae9e90" }] }, { "featureType": "landscape.natural", "elementType": "geometry", "stylers": [{ "color": "#dfd2ae" }] }, { "featureType": "poi", "elementType": "geometry", "stylers": [{ "color": "#dfd2ae" }] }, { "featureType": "poi", "elementType": "labels.text.fill", "stylers": [{ "color": "#93817c" }] }, { "featureType": "poi.park", "elementType": "geometry.fill", "stylers": [{ "color": "#a5b076" }] }, { "featureType": "poi.park", "elementType": "labels.text.fill", "stylers": [{ "color": "#447530" }] }, { "featureType": "road", "elementType": "geometry", "stylers": [{ "color": "#f5f1e6" }] }, { "featureType": "road.arterial", "elementType": "geometry", "stylers": [{ "color": "#fdfcf8" }] }, { "featureType": "road.highway", "elementType": "geometry", "stylers": [{ "color": "#f8c967" }] }, { "featureType": "road.highway", "elementType": "geometry.stroke", "stylers": [{ "color": "#e9bc62" }] }, { "featureType": "road.highway.controlled_access", "elementType": "geometry", "stylers": [{ "color": "#e98d58" }] }, { "featureType": "road.highway.controlled_access", "elementType": "geometry.stroke", "stylers": [{ "color": "#db8555" }] }, { "featureType": "road.local", "elementType": "labels.text.fill", "stylers": [{ "color": "#806b63" }] }, { "featureType": "transit.line", "elementType": "geometry", "stylers": [{ "color": "#dfd2ae" }] }, { "featureType": "transit.line", "elementType": "labels.text.fill", "stylers": [{ "color": "#8f7d77" }] }, { "featureType": "transit.line", "elementType": "labels.text.stroke", "stylers": [{ "color": "#ebe3cd" }] }, { "featureType": "transit.station", "elementType": "geometry", "stylers": [{ "color": "#dfd2ae" }] }, { "featureType": "water", "elementType": "geometry.fill", "stylers": [{ "color": "#b9d3c2" }] }, { "featureType": "water", "elementType": "labels.text.fill", "stylers": [{ "color": "#92998d" }] }],
     8  dark: [{ "elementType": "geometry", "stylers": [{ "color": "#212121" }] }, { "elementType": "labels.icon", "stylers": [{ "visibility": "off" }] }, { "elementType": "labels.text.fill", "stylers": [{ "color": "#757575" }] }, { "elementType": "labels.text.stroke", "stylers": [{ "color": "#212121" }] }, { "featureType": "administrative", "elementType": "geometry", "stylers": [{ "color": "#757575" }] }, { "featureType": "administrative.country", "elementType": "labels.text.fill", "stylers": [{ "color": "#9e9e9e" }] }, { "featureType": "administrative.land_parcel", "stylers": [{ "visibility": "off" }] }, { "featureType": "administrative.locality", "elementType": "labels.text.fill", "stylers": [{ "color": "#bdbdbd" }] }, { "featureType": "poi", "elementType": "labels.text.fill", "stylers": [{ "color": "#757575" }] }, { "featureType": "poi.park", "elementType": "geometry", "stylers": [{ "color": "#181818" }] }, { "featureType": "poi.park", "elementType": "labels.text.fill", "stylers": [{ "color": "#616161" }] }, { "featureType": "poi.park", "elementType": "labels.text.stroke", "stylers": [{ "color": "#1b1b1b" }] }, { "featureType": "road", "elementType": "geometry.fill", "stylers": [{ "color": "#2c2c2c" }] }, { "featureType": "road", "elementType": "labels.text.fill", "stylers": [{ "color": "#8a8a8a" }] }, { "featureType": "road.arterial", "elementType": "geometry", "stylers": [{ "color": "#373737" }] }, { "featureType": "road.highway", "elementType": "geometry", "stylers": [{ "color": "#3c3c3c" }] }, { "featureType": "road.highway.controlled_access", "elementType": "geometry", "stylers": [{ "color": "#4e4e4e" }] }, { "featureType": "road.local", "elementType": "labels.text.fill", "stylers": [{ "color": "#616161" }] }, { "featureType": "transit", "elementType": "labels.text.fill", "stylers": [{ "color": "#757575" }] }, { "featureType": "water", "elementType": "geometry", "stylers": [{ "color": "#000000" }] }, { "featureType": "water", "elementType": "labels.text.fill", "stylers": [{ "color": "#3d3d3d" }] }],
     9  night: [{ "elementType": "geometry", "stylers": [{ "color": "#242f3e" }] }, { "elementType": "labels.text.fill", "stylers": [{ "color": "#746855" }] }, { "elementType": "labels.text.stroke", "stylers": [{ "color": "#242f3e" }] }, { "featureType": "administrative.locality", "elementType": "labels.text.fill", "stylers": [{ "color": "#d59563" }] }, { "featureType": "poi", "elementType": "labels.text.fill", "stylers": [{ "color": "#d59563" }] }, { "featureType": "poi.park", "elementType": "geometry", "stylers": [{ "color": "#263c3f" }] }, { "featureType": "poi.park", "elementType": "labels.text.fill", "stylers": [{ "color": "#6b9a76" }] }, { "featureType": "road", "elementType": "geometry", "stylers": [{ "color": "#38414e" }] }, { "featureType": "road", "elementType": "geometry.stroke", "stylers": [{ "color": "#212a37" }] }, { "featureType": "road", "elementType": "labels.text.fill", "stylers": [{ "color": "#9ca5b3" }] }, { "featureType": "road.highway", "elementType": "geometry", "stylers": [{ "color": "#746855" }] }, { "featureType": "road.highway", "elementType": "geometry.stroke", "stylers": [{ "color": "#1f2835" }] }, { "featureType": "road.highway", "elementType": "labels.text.fill", "stylers": [{ "color": "#f3d19c" }] }, { "featureType": "transit", "elementType": "geometry", "stylers": [{ "color": "#2f3948" }] }, { "featureType": "transit.station", "elementType": "labels.text.fill", "stylers": [{ "color": "#d59563" }] }, { "featureType": "water", "elementType": "geometry", "stylers": [{ "color": "#17263c" }] }, { "featureType": "water", "elementType": "labels.text.fill", "stylers": [{ "color": "#515c6d" }] }, { "featureType": "water", "elementType": "labels.text.stroke", "stylers": [{ "color": "#17263c" }] }],
     10  aubergine: [{ "elementType": "geometry", "stylers": [{ "color": "#1d2c4d" }] }, { "elementType": "labels.text.fill", "stylers": [{ "color": "#8ec3b9" }] }, { "elementType": "labels.text.stroke", "stylers": [{ "color": "#1a3646" }] }, { "featureType": "administrative.country", "elementType": "geometry.stroke", "stylers": [{ "color": "#4b6878" }] }, { "featureType": "administrative.land_parcel", "elementType": "labels.text.fill", "stylers": [{ "color": "#64779e" }] }, { "featureType": "administrative.province", "elementType": "geometry.stroke", "stylers": [{ "color": "#4b6878" }] }, { "featureType": "landscape.man_made", "elementType": "geometry.stroke", "stylers": [{ "color": "#334e87" }] }, { "featureType": "landscape.natural", "elementType": "geometry", "stylers": [{ "color": "#023e58" }] }, { "featureType": "poi", "elementType": "geometry", "stylers": [{ "color": "#283d6a" }] }, { "featureType": "poi", "elementType": "labels.text.fill", "stylers": [{ "color": "#6f9ba5" }] }, { "featureType": "poi", "elementType": "labels.text.stroke", "stylers": [{ "color": "#1d2c4d" }] }, { "featureType": "poi.park", "elementType": "geometry.fill", "stylers": [{ "color": "#023e58" }] }, { "featureType": "poi.park", "elementType": "labels.text.fill", "stylers": [{ "color": "#3C7680" }] }, { "featureType": "road", "elementType": "geometry", "stylers": [{ "color": "#304a7d" }] }, { "featureType": "road", "elementType": "labels.text.fill", "stylers": [{ "color": "#98a5be" }] }, { "featureType": "road", "elementType": "labels.text.stroke", "stylers": [{ "color": "#1d2c4d" }] }, { "featureType": "road.highway", "elementType": "geometry", "stylers": [{ "color": "#2c6675" }] }, { "featureType": "road.highway", "elementType": "geometry.stroke", "stylers": [{ "color": "#255763" }] }, { "featureType": "road.highway", "elementType": "labels.text.fill", "stylers": [{ "color": "#b0d5ce" }] }, { "featureType": "road.highway", "elementType": "labels.text.stroke", "stylers": [{ "color": "#023e58" }] }, { "featureType": "transit", "elementType": "labels.text.fill", "stylers": [{ "color": "#98a5be" }] }, { "featureType": "transit", "elementType": "labels.text.stroke", "stylers": [{ "color": "#1d2c4d" }] }, { "featureType": "transit.line", "elementType": "geometry.fill", "stylers": [{ "color": "#283d6a" }] }, { "featureType": "transit.station", "elementType": "geometry", "stylers": [{ "color": "#3a4762" }] }, { "featureType": "water", "elementType": "geometry", "stylers": [{ "color": "#0e1626" }] }, { "featureType": "water", "elementType": "labels.text.fill", "stylers": [{ "color": "#4e6d70" }] }]
     11};
     12const markerData = amm_frontend_obj.amm_save_marker_option
     13// Drawing shape object.
     14const markers = markerData.amm_marker_type ? JSON.parse(markerData.amm_marker_type) : '';
     15const mapLatlngs = markerData.amm_marker_positions ? JSON.parse(markerData.amm_marker_positions) : '';
    416
    5 var mapStyles = amm_frontend_obj.map_settings.map_style;
    6 var mapStyleType = amm_frontend_obj.map_settings.map_theme;
    7 var map_full_screen = amm_frontend_obj.map_settings.map_full_screen;
    8 var map_type_control = amm_frontend_obj.map_settings.map_type_control;
    9 var map_street_view = amm_frontend_obj.map_settings.map_street_view;
    10 var map_street_view = amm_frontend_obj.map_settings.map_street_view;
    11 var selectedStyle,
    12     standard = [],
    13     silver = [ {"elementType":"geometry","stylers":[{"color":"#f5f5f5"}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"elementType":"labels.text.fill","stylers":[{"color":"#616161"}]},{"elementType":"labels.text.stroke","stylers":[{"color":"#f5f5f5"}]},{"featureType":"administrative.land_parcel","elementType":"labels.text.fill","stylers":[{"color":"#bdbdbd"}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#eeeeee"}]},{"featureType":"poi","elementType":"labels.text.fill","stylers":[{"color":"#757575"}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#e5e5e5"}]},{"featureType":"poi.park","elementType":"labels.text.fill","stylers":[{"color":"#9e9e9e"}]},{"featureType":"road","elementType":"geometry","stylers":[{"color":"#ffffff"}]},{"featureType":"road.arterial","elementType":"labels.text.fill","stylers":[{"color":"#757575"}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"color":"#dadada"}]},{"featureType":"road.highway","elementType":"labels.text.fill","stylers":[{"color":"#616161"}]},{"featureType":"road.local","elementType":"labels.text.fill","stylers":[{"color":"#9e9e9e"}]},{"featureType":"transit.line","elementType":"geometry","stylers":[{"color":"#e5e5e5"}]},{"featureType":"transit.station","elementType":"geometry","stylers":[{"color":"#eeeeee"}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#c9c9c9"}]},{"featureType":"water","elementType":"labels.text.fill","stylers":[{"color":"#9e9e9e"}]} ],
    14     retro = [ {"elementType":"geometry","stylers":[{"color":"#ebe3cd"}]},{"elementType":"labels.text.fill","stylers":[{"color":"#523735"}]},{"elementType":"labels.text.stroke","stylers":[{"color":"#f5f1e6"}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#c9b2a6"}]},{"featureType":"administrative.land_parcel","elementType":"geometry.stroke","stylers":[{"color":"#dcd2be"}]},{"featureType":"administrative.land_parcel","elementType":"labels.text.fill","stylers":[{"color":"#ae9e90"}]},{"featureType":"landscape.natural","elementType":"geometry","stylers":[{"color":"#dfd2ae"}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#dfd2ae"}]},{"featureType":"poi","elementType":"labels.text.fill","stylers":[{"color":"#93817c"}]},{"featureType":"poi.park","elementType":"geometry.fill","stylers":[{"color":"#a5b076"}]},{"featureType":"poi.park","elementType":"labels.text.fill","stylers":[{"color":"#447530"}]},{"featureType":"road","elementType":"geometry","stylers":[{"color":"#f5f1e6"}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#fdfcf8"}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"color":"#f8c967"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#e9bc62"}]},{"featureType":"road.highway.controlled_access","elementType":"geometry","stylers":[{"color":"#e98d58"}]},{"featureType":"road.highway.controlled_access","elementType":"geometry.stroke","stylers":[{"color":"#db8555"}]},{"featureType":"road.local","elementType":"labels.text.fill","stylers":[{"color":"#806b63"}]},{"featureType":"transit.line","elementType":"geometry","stylers":[{"color":"#dfd2ae"}]},{"featureType":"transit.line","elementType":"labels.text.fill","stylers":[{"color":"#8f7d77"}]},{"featureType":"transit.line","elementType":"labels.text.stroke","stylers":[{"color":"#ebe3cd"}]},{"featureType":"transit.station","elementType":"geometry","stylers":[{"color":"#dfd2ae"}]},{"featureType":"water","elementType":"geometry.fill","stylers":[{"color":"#b9d3c2"}]},{"featureType":"water","elementType":"labels.text.fill","stylers":[{"color":"#92998d"}]} ],
    15     dark = [ {"elementType":"geometry","stylers":[{"color":"#212121"}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"elementType":"labels.text.fill","stylers":[{"color":"#757575"}]},{"elementType":"labels.text.stroke","stylers":[{"color":"#212121"}]},{"featureType":"administrative","elementType":"geometry","stylers":[{"color":"#757575"}]},{"featureType":"administrative.country","elementType":"labels.text.fill","stylers":[{"color":"#9e9e9e"}]},{"featureType":"administrative.land_parcel","stylers":[{"visibility":"off"}]},{"featureType":"administrative.locality","elementType":"labels.text.fill","stylers":[{"color":"#bdbdbd"}]},{"featureType":"poi","elementType":"labels.text.fill","stylers":[{"color":"#757575"}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#181818"}]},{"featureType":"poi.park","elementType":"labels.text.fill","stylers":[{"color":"#616161"}]},{"featureType":"poi.park","elementType":"labels.text.stroke","stylers":[{"color":"#1b1b1b"}]},{"featureType":"road","elementType":"geometry.fill","stylers":[{"color":"#2c2c2c"}]},{"featureType":"road","elementType":"labels.text.fill","stylers":[{"color":"#8a8a8a"}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#373737"}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"color":"#3c3c3c"}]},{"featureType":"road.highway.controlled_access","elementType":"geometry","stylers":[{"color":"#4e4e4e"}]},{"featureType":"road.local","elementType":"labels.text.fill","stylers":[{"color":"#616161"}]},{"featureType":"transit","elementType":"labels.text.fill","stylers":[{"color":"#757575"}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#000000"}]},{"featureType":"water","elementType":"labels.text.fill","stylers":[{"color":"#3d3d3d"}]} ],
    16     night = [ {"elementType":"geometry","stylers":[{"color":"#242f3e"}]},{"elementType":"labels.text.fill","stylers":[{"color":"#746855"}]},{"elementType":"labels.text.stroke","stylers":[{"color":"#242f3e"}]},{"featureType":"administrative.locality","elementType":"labels.text.fill","stylers":[{"color":"#d59563"}]},{"featureType":"poi","elementType":"labels.text.fill","stylers":[{"color":"#d59563"}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#263c3f"}]},{"featureType":"poi.park","elementType":"labels.text.fill","stylers":[{"color":"#6b9a76"}]},{"featureType":"road","elementType":"geometry","stylers":[{"color":"#38414e"}]},{"featureType":"road","elementType":"geometry.stroke","stylers":[{"color":"#212a37"}]},{"featureType":"road","elementType":"labels.text.fill","stylers":[{"color":"#9ca5b3"}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"color":"#746855"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#1f2835"}]},{"featureType":"road.highway","elementType":"labels.text.fill","stylers":[{"color":"#f3d19c"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#2f3948"}]},{"featureType":"transit.station","elementType":"labels.text.fill","stylers":[{"color":"#d59563"}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#17263c"}]},{"featureType":"water","elementType":"labels.text.fill","stylers":[{"color":"#515c6d"}]},{"featureType":"water","elementType":"labels.text.stroke","stylers":[{"color":"#17263c"}]} ],
    17     aubergine = [ {"elementType":"geometry","stylers":[{"color":"#1d2c4d"}]},{"elementType":"labels.text.fill","stylers":[{"color":"#8ec3b9"}]},{"elementType":"labels.text.stroke","stylers":[{"color":"#1a3646"}]},{"featureType":"administrative.country","elementType":"geometry.stroke","stylers":[{"color":"#4b6878"}]},{"featureType":"administrative.land_parcel","elementType":"labels.text.fill","stylers":[{"color":"#64779e"}]},{"featureType":"administrative.province","elementType":"geometry.stroke","stylers":[{"color":"#4b6878"}]},{"featureType":"landscape.man_made","elementType":"geometry.stroke","stylers":[{"color":"#334e87"}]},{"featureType":"landscape.natural","elementType":"geometry","stylers":[{"color":"#023e58"}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#283d6a"}]},{"featureType":"poi","elementType":"labels.text.fill","stylers":[{"color":"#6f9ba5"}]},{"featureType":"poi","elementType":"labels.text.stroke","stylers":[{"color":"#1d2c4d"}]},{"featureType":"poi.park","elementType":"geometry.fill","stylers":[{"color":"#023e58"}]},{"featureType":"poi.park","elementType":"labels.text.fill","stylers":[{"color":"#3C7680"}]},{"featureType":"road","elementType":"geometry","stylers":[{"color":"#304a7d"}]},{"featureType":"road","elementType":"labels.text.fill","stylers":[{"color":"#98a5be"}]},{"featureType":"road","elementType":"labels.text.stroke","stylers":[{"color":"#1d2c4d"}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"color":"#2c6675"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#255763"}]},{"featureType":"road.highway","elementType":"labels.text.fill","stylers":[{"color":"#b0d5ce"}]},{"featureType":"road.highway","elementType":"labels.text.stroke","stylers":[{"color":"#023e58"}]},{"featureType":"transit","elementType":"labels.text.fill","stylers":[{"color":"#98a5be"}]},{"featureType":"transit","elementType":"labels.text.stroke","stylers":[{"color":"#1d2c4d"}]},{"featureType":"transit.line","elementType":"geometry.fill","stylers":[{"color":"#283d6a"}]},{"featureType":"transit.station","elementType":"geometry","stylers":[{"color":"#3a4762"}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#0e1626"}]},{"featureType":"water","elementType":"labels.text.fill","stylers":[{"color":"#4e6d70"}]} ];
    18 
    19 switch( mapStyleType ) {
    20   case "silver":
    21     selectedStyle = silver;
    22     break;
    23   case "retro":
    24     selectedStyle = retro;
    25     break;
    26   case "dark":
    27     selectedStyle = dark;
    28     break;
    29   case "night":
    30     selectedStyle = night;
    31     break;
    32   case "aubergine":
    33     selectedStyle = aubergine;
    34     break;
    35   default:
    36   selectedStyle = standard;
    37 }
    38 
    39 var markerData = amm_frontend_obj.amm_save_marker_option
    40 // Drawing shape object.
    41 if ( markerData.amm_marker_positions ) {
    42   var mapType = JSON.parse( markerData.amm_marker_type );
    43   var mapLatlngs = JSON.parse( markerData.amm_marker_positions );
    44 }
    4517// Map controller object.
    46 if ( markerData.amm_map_control ) {
    47   var mapControl = JSON.parse( markerData.amm_map_control );
     18if (markerData.amm_map_control) {
     19  var mapControl = JSON.parse(markerData.amm_map_control);
    4820}
    4921
    5022// Finally land all the map on the map.
    5123function initialize() {
    52   // option from backend
    53   var map_full_screen_status=false;
    54   var map_type_control_status=false;
    55   var map_street_view_status=false;
    56   if(map_full_screen=='on'){
    57     map_full_screen_status=true;
    58   }
     24  const mapFullScreenStatus = mapSettings.map_full_screen ? true : false;
     25  const mapTypeControlStatus = mapSettings.map_type_control ? true : false;
     26  const mapStreetViewStatus = mapSettings.map_street_view ? true : false;
    5927
    60   if(map_type_control=='on'){
    61     map_type_control_status=true;
    62   }
     28  const mapLat = (markerData.amm_map_control) ? mapControl[0].lat : 38.7520698;
     29  const mapLng = (markerData.amm_map_control) ? mapControl[0].lng : 33.3604434;
     30  const latlng = new google.maps.LatLng(mapLat, mapLng);
    6331
    64   if(map_street_view=='on'){
    65     map_street_view_status=true;
    66   }
    67   var mapLat = ( markerData.amm_map_control ) ? mapControl[0].lat : 38.7520698;
    68   var mapLng = ( markerData.amm_map_control ) ? mapControl[0].lng : 33.3604434;
    69   var latlng = new google.maps.LatLng( mapLat, mapLng );
    70   var myOptions = {
    71     zoom: ( markerData.amm_map_control ) ? mapControl[0].zoom : 5,
     32  const mapOptions = {
     33    zoom: (markerData.amm_map_control) ? mapControl[0].zoom : 5,
    7234    center: latlng,
    73     mapTypeControl: map_type_control_status,
    74     mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU },
     35    mapId: 'frontmap',
     36    mapTypeControl: mapTypeControlStatus,
    7537    navigationControl: true,
    76     mapTypeId: mapStyles,
    77     styles: selectedStyle,
    78     fullscreenControl: map_full_screen_status,
    79     streetViewControl: map_street_view_status,
     38    mapTypeId: mapType,
     39    fullscreenControl: mapFullScreenStatus,
     40    streetViewControl: mapStreetViewStatus,
    8041  };
    81   // multimarkers array.
    82   var multimarkers = [];
    83   map = new google.maps.Map( document.getElementById('frontmap'), myOptions );
    84   if ( mapLatlngs ) {
     42
     43  const map = new google.maps.Map(document.getElementById('frontmap'), mapOptions);
     44  const styledMapType = new google.maps.StyledMapType(
     45    mapStyles[mapStyleType],
     46    { name: mapStyleType }
     47  );
     48
     49  map.mapTypes.set("custom_style", styledMapType);
     50  map.setMapTypeId("custom_style");
     51
     52  if (mapLatlngs) {
     53    const bounds = new google.maps.LatLngBounds();
    8554    // Add map drawing tools.
    86     mapLatlngs.forEach(function( latlg, i ) {
    87       var geocoder = new google.maps.Geocoder;
    88       var infowindow = new google.maps.InfoWindow;
     55    mapLatlngs.forEach(function (latlg, i) {
     56      const shapeType = markers[0].type[i];
     57      let latlngs = {};
     58      // var geocoder = new google.maps.Geocoder;
     59      // var infowindow = new google.maps.InfoWindow;
    8960      var multipoint = [];
    90       // MapType Marker.
    91       if ( mapType[0].type[i] == 'marker' ) {
    92         var latlngs = {lat: parseFloat(latlg.lat), lng: parseFloat(latlg.lng)};
    93 
    94         var marker = new google.maps.Marker( {
     61      // markers.
     62      if ('marker' == shapeType) {
     63        latlngs = { lat: parseFloat(latlg.lat), lng: parseFloat(latlg.lng) };
     64        const marker = new google.maps.marker.AdvancedMarkerElement({
    9565          position: latlngs,
    9666          map: map,
    97           icon: latlg.img[0],
    98         } );
     67          content: document.createElement('div')
     68        });
     69        const img = document.createElement('img');
    9970
    100         google.maps.event.addListener( marker, 'click', function() {
    101           infowindow = new google.maps.InfoWindow({
    102             content: '<div><strong>' + latlg.title[0] + '</strong><br /><a href="https://www.google.com/maps/search/?api=1&query=' + parseFloat( latlg.lat ) + ',' + parseFloat( latlg.lng ) + '&query_place_id=' + latlg.place_id + '" target="_blank">Get Direction</a></div>',
    103             size: new google.maps.Size( 150, 50 )
     71        img.src = latlg.img[0];
     72        marker.content.appendChild(img);
     73        bounds.extend(latlngs);
     74        map.fitBounds(bounds);
     75
     76        google.maps.event.addListener(marker, 'click', function () {
     77          const markerTitle = latlg.title || '';
     78          const infowindow = new google.maps.InfoWindow({
     79            content: '<div style="max-width:300px;"><strong style="display:block; padding:5px;">' + markerTitle + '</strong><a href="https://www.google.com/maps/search/?api=1&query=' + parseFloat(latlg.lat) + ',' + parseFloat(latlg.lng) + '&query_place_id=' + latlg.place_id + '" style="display:block; padding:5px;" target="_blank">Get Direction</a></div>',
     80            size: new google.maps.Size(150, 50)
    10481          });
    105           infowindow.open( map, marker );
    106         } );
     82          infowindow.open(map, marker);
     83        });
    10784      }
    108       // MapType polygon & polyline.
    109       if ( mapType[0].type[i] == 'polygon' || mapType[0].type[i] == 'polyline' ) {
    110         latlg.poly.forEach( function( pos, j ) {
    111           multipoint.push( pos );
     85      // polygon & polyline markers.
     86      if ('polygon' == shapeType || 'polyline' == shapeType) {
     87        latlg.poly.forEach(function (pos, j) {
     88          multipoint.push(pos);
     89          latlngs = { lat: parseFloat(pos.lat), lng: parseFloat(pos.lng) };
     90          bounds.extend(latlngs);
     91          map.fitBounds(bounds);
    11292        });
    113      
     93
    11494        var triangleCoords = multipoint;
    11595        // Construct the polygon.
    116         var bermudaTriangle = new google.maps.Polygon( {
     96        var bermudaTriangle = new google.maps.Polygon({
    11797          paths: triangleCoords,
    118           strokeColor: latlg.fillcolor, 
     98          strokeColor: latlg.fillcolor,
    11999          strokeOpacity: 0.8,
    120100          strokeWeight: 3,
    121101          fillColor: latlg.fillcolor,
    122102          fillOpacity: 0.35
    123         } );
    124         bermudaTriangle.setMap( map );
     103        });
     104        bermudaTriangle.setMap(map);
    125105      }
    126       // MapType circle.
    127       if ( mapType[0].type[i] == 'circle' ) {
    128         var cityCircle = new google.maps.Circle( {
     106      // circle markers.
     107      if ('circle' == shapeType) {
     108        latlngs = { lat: parseFloat(latlg.circle.lat), lng: parseFloat(latlg.circle.lng) };
     109        var cityCircle = new google.maps.Circle({
    129110          strokeColor: latlg.fillcolor,
    130111          strokeOpacity: 0.8,
    … …  
    135116          center: latlg.circle,
    136117          radius: latlg.radius
    137         } );
     118        });
    138119      }
    139       // MapType rectangle.
    140       if ( mapType[0].type[i] == 'rectangle' ) {
    141         var rectangle = new google.maps.Rectangle( {
     120      // Rectangle markers.
     121      if ('rectangle' == shapeType) {
     122        latlngs = { lat: parseFloat(latlg[shapeType].north + latlg[shapeType].south) / 2, lng: parseFloat(latlg[shapeType].east + latlg[shapeType].west) / 2 }
     123        var rectangle = new google.maps.Rectangle({
    142124          strokeColor: latlg.fillcolor,
    143125          strokeOpacity: 0.8,
    … …  
    147129          map: map,
    148130          bounds: latlg.rectangle
    149         } );
     131        });
    150132      }
     133      bounds.extend(latlngs);
     134      map.fitBounds(bounds);
    151135    });
    152136  }
    153137}
    154 
    155 google.maps.event.addDomListener( window, 'load', initialize );

  • add-multiple-marker/trunk/readme.txt

    r2608577 r3433258  
    1 === Add Multiple Marker ===
    2 Contributors: girishpanchal, manishamakhija, nisargpandya, bhargavmehta, krishaweb
    3 Tags: marker, custom marker, map marker, drawing tools, multiple marker, multi marker, map, google maps, multi location, shortcode
    4 Requires at least: 4.4
    5 Tested up to: 5.8.1
    6 Stable tag: 1.2
    7 License: GPLv2 or later
    8 License URI: https://www.gnu.org/licenses/gpl-2.0.html
     1=== Multi Location Marker ===
     2Plugin Name: Multi Location Marker
     3Plugin URI: https://wordpress.org/plugins/add-multiple-marker
     4Author: krishaweb
     5Author URI: https://krishaweb.com/
     6Contributors: girishpanchal, manishamakhija, nisargpandya, krishaweb
     7Tags: locations, map, marker, google-maps, map-markers
     8Requires at least: 5.6
     9Tested up to: 6.9
     10Requires PHP: 8.2
     11Stable tag: 1.3
     12Copyright: (c) 2012-2026 KrishaWeb (info@krishaweb.com)
     13License: GPLv3 or later
     14License URI: http://www.gnu.org/licenses/gpl-3.0.html
    915
    10 Add Multiple Marker gives you feature to add multiple map locations on same map and display it in frontend using shortcode.
     16Multi Location Marker helps you add multiple map locations to a single map and display them on the frontend using a shortcode.
     17
    1118
    1219== Description ==
    1320
    14 Add Multiple Marker gives you various options to display multiple locations on single map by using different tools. It gives you various options like:
     21**Multi Location Marker** allows you to add and display multiple locations on a single Google Map using a shortcode. It helps you create an interactive and professional map for your website without any coding.
    1522
    16  *  Unlimited markers on single map
    17  *  Implement elegant styles on Google map
    18  *  Show your personalized title on markers
    19  *  Adjust zoom level
    20  *  Change marker image
    21  *  Drawing tools to define your service area
    22  *  Fetch your current geo-location and drop marker
    23  *  Get directions link in custom title
    24  *  Can delete marker and reset map
    25  *  Usage of Shortcode
     23You can manage unlimited markers from the admin panel, customize marker titles and icons, control map zoom and position, and define your service area using built-in drawing tools. The plugin also supports geo-location detection and direction links, making it easy for visitors to find and navigate to your locations.
     24
     25Designed for simplicity and performance, Multi Location Marker is ideal for businesses that want to showcase stores, offices, or service coverage areas clearly and efficiently.
     26
     27
     28#### Key Features
     29
     30* Add unlimited markers on a single Google Map
     31* Apply elegant Google Map styles
     32* Display custom titles on each marker
     33* Adjust map zoom level and center position
     34* Upload and use custom marker icons
     35* Use drawing tools to define and highlight your service area
     36* Automatically fetch your current geo-location and drop a marker
     37* Add a Get Directions link inside marker titles
     38* Reset the map or remove markers with a single click
     39* Display maps anywhere using a shortcode
     40* Works with pages, posts, and custom post types
     41
    2642
    2743== Installation ==
    2844
    29 This section describes how to install the plugin and get it working.
     45=== From Admin Dashboard ===
     461. In your WordPress Dashboard go to "Plugins" -> "Add Plugin".
     472. Search for "Multi Location Marker".
     483. Install the plugin by pressing the "Install" button.
     494. Activate the plugin by pressing the "Activate" button.
    3050
    31 e.g.
    32 
    33 1. Upload `add-multiple-marker.php` to the `/wp-content/plugins/` directory
    34 2. Activate the plugin through the 'Plugins' menu in WordPress.
    35 3. Go to Add Multiple Marker menu -> Map Integration and Enter Google Maps API Key. You can get Google Map API key from <a href="https://developers.google.com/maps/documentation/javascript/get-api-key">here</a>.
     51=== Manually ===
     521. From wordpress directories, Upload `Multi Location Marker` to the `/wp-content/plugins/` directory
     532. Now activate the plugin through the 'Plugins' menu in WordPress
    3654
    3755
    3856== Frequently Asked Questions ==
    3957
    40 = How can I set the position of map? =
     58= How do I set the map position? =
    4159
    42 At whatever position(i.e latitude and longitude) you save your map on backend, your map will display likewise on frontend.
     60The map position is based on the latitude and longitude saved in the backend. Once saved, the same position will be displayed on the frontend.
    4361
    44 = I have an idea for a great way to improve this plugin. =
     62= Is there any limit on the number of markers? =
    4563
    46 Great! I’d love to hear from you at <a href="mailto:support@krishaweb.com">support@krishaweb.com</a>
     64No. You can add unlimited markers on a single map.
     65
     66= Can I highlight my service or business area? =
     67
     68Yes. The plugin includes drawing tools that allow you to define and display your service or coverage area on the map.
     69
     70= Does this plugin support automatic location detection? =
     71
     72Yes. You can fetch your current geo-location and instantly place a marker.
     73
     74= How do I display the map on my website? =
     75
     76Simply copy the generated shortcode and paste it into any page, post, or widget area.
     77
     78= I have an idea or feature request. How can I share it? =
     79
     80We’d love to hear from you. Please contact us at <a href="mailto:support@krishaweb.com">support@krishaweb.com</a>
    4781
    4882
    … …  
    53873. Different Map Styling
    5488
     89
    5590== Changelog ==
    56  
     91
     92= 1.3 =
     93* Compatible with WordPress 6.8
     94* Fix - Title display issue
     95* Fix - Security Vulnerability
     96* Fix - Remove shape not working without page reload
     97* Fix - Display close (X) icon in sidebar hamburger menu
     98* Fix - Responsive view
     99
    57100= 1.2 =
    58 * Made compatible with WordPress 5.8.1 and Bugs Fixes
    59  
     101* Made compatible with WordPress 5.8.1 and Bugs Fixes.
     102
    60103= 1.1 =
    61104* Bugs Fixes
Note: See TracChangeset for help on using the changeset viewer.