Event's VENUE map not working.

Discussion in 'Subrion CMS Plugins Discussion' started by jey, Dec 31, 2016.

  1. jey

    jey New Member

    Hi everyone,

    The event's VENUE map is not working after a member posted a new event. What is the solution? I have added Google Maps API key in 'Google Map plugin' and also Google API Key in 'Google Tools plugin'.

    Thanks and Regards.

    Attached Files:

    • er1.jpg
      er1.jpg
      File size:
      21.2 KB
      Views:
      5
  2. jey

    jey New Member

    Attached Files:

    • er2.jpg
      er2.jpg
      File size:
      34.3 KB
      Views:
      10
  3. CKENT

    CKENT New Member

    I had this same issue and went digging. There is a new version of the Events plugin but even that does not work properly. Not to highjack your thread but the new version 4.0.2 is supposed to have the google API issue fixed but unfortunately when installing causes the front end to go to a blank screen. Hopefully we can get some help here to get the issue resolved.
  4. jey

    jey New Member

    Yes, and during posting, we are able to type the venue, but no google map or any indication to confirm the right spot. Any suggestion?
  5. Dayir_A.

    Dayir_A. Staff Member

    Hello @CKENT & @jey

    The development version of the plugin Events was updated regarding latest changes in the core. I.e. it is compatible with Subrion 4.1.0

    In order to fix Google map missin API key issue in admin panel, please see this commit:

    https://github.com/intelliants/subrion-plugin-events/commit/61f0f3faca8dd842d6bd5723e835087bb044719b

    Thanks.
  6. CKENT

    CKENT New Member

    Dayir, where is the new version that fixes the issue with the blank screen and the API? The plugin on the plugins page still shows 4.0.1, the one on GIT show 4.0.2. Where is the new version that works properly?
  7. Dayir_A.

    Dayir_A. Staff Member

    Hello @CKENT,

    You can find all our stable plugins on subrion.org/plugins. If you use plugins from github.com then you can encounter with some unexpected errors as github.com is platform for development and plugins that you'll find there can be not stable or not finished.
    That's why we highly recommend our customers to use plugins from subrion.org/plugins

    Thanks.
  8. jey

    jey New Member

    Hi Dayir, thanks for your help, but it's still 'events_4.0.1.zip' downloading from subrion.org/plugins .


  9. SmaRTeY

    SmaRTeY New Member

    Hi there,

    in addition to the KEY fix mentioned above, enabling the map routine to work, I have changed the Admin javascript resulting in the following new behaviour:

    1) When Admin goes to the events after a user submitted a new event and opens a newly posted event for review the map now shows the actual location as submitted by the user. Difference with Original code is that it ALWAYS showed the default usa location instead of the location submitted by the user who posted the new event.

    2) When Admin presses 'save' after review of the event the location is now properly saved so that the map is properly displayed when visitors are viewing the new approved event. Ofcourse the admin also still has to make the new event 'Active'. In Original situation the map was only shown properly when Admin changed the input of the Venue field and then save the event and made it active.

    I know there is still room for improvement but for me this is way better already than current situation with event plugin.

    To get it to work you need to replace (all) the code in the file: /plugins/events/js/admin/manage.js with the code below:

    Code (Text):
    $(function()
    {
        intelli.marker = null;

        var mapInfo = $('#item-gmap-data');

        var itemPosition = {
            lat: $('input[name="latitude"]', mapInfo).val(),
            lng: $('input[name="longitude"]', mapInfo).val()
        };

        $('#address_fieldzone').parent().append($('#js-gmap-wrapper'));
        $('#js-gmap-wrapper').removeClass('hidden');

        var map = new google.maps.Map(document.getElementById('js-gmap-renderer'), {mapTypeId: google.maps.MapTypeId.ROADMAP});
        var geocoder = new google.maps.Geocoder();

        intelli.geocoder = geocoder;
        intelli.map = map;

        if (itemPosition.lat.length != 0 && itemPosition.lng.length != 0)
        {
            map.setZoom(11);
            geooptions = {latLng: new google.maps.LatLng(parseFloat(itemPosition.lat), parseFloat(itemPosition.lng))};
        }
        else
        {
            map.setZoom(3);
            geooptions = {address: 'USA'};
        }

        var d = document.getElementById('venue');
        if(d.value != '') {
            map.setZoom(3);
            geooptions = {address: d.value};
        }

        geocoder.geocode(geooptions, function(results, status)
        {
            if (status == google.maps.GeocoderStatus.OK)
            {
                intelli.marker = new google.maps.Marker(
                    {
                        map: map,
                        position: results[0].geometry.location,
                        draggable: true
                    });

                map.setCenter(results[0].geometry.location);

                google.maps.event.addListener(
                    intelli.marker,
                    'drag',
                    function()
                    {
                        $('input[name="longitude"]', mapInfo).val(intelli.marker.position.lng());
                        $('input[name="latitude"]', mapInfo).val(intelli.marker.position.lat());
                    }
                );
                $('input[name="longitude"]', mapInfo).val(intelli.marker.position.lng());
                $('input[name="latitude"]', mapInfo).val(intelli.marker.position.lat());
            }
        });

        google.maps.event.trigger(intelli.map, 'resize');
        if (intelli.marker !== null)
        {
            intelli.map.setCenter(intelli.marker.getPosition());
        }


        $('#venue').on('input', function()
        {
            var fullAddress = '';

            if ('' != $(this).val())
            {
                fullAddress += ' ' + $(this).val();
            }

            intelli.geocoder.geocode({address: fullAddress}, function(results, status)
            {
                if (status == google.maps.GeocoderStatus.OK)
                {
                    intelli.marker.setPosition(results[0].geometry.location);
                    map.setCenter(results[0].geometry.location);

                    $('input[name="longitude"]', mapInfo).val(intelli.marker.position.lng());
                    $('input[name="latitude"]', mapInfo).val(intelli.marker.position.lat());
                }
            });
        });
    });
    Hope someone finds it usefull and remember to backup the Original file before replacing the code! ;)

    P.S: This code is targeted towards the situation where newly posted events have to be reviewed first by Admin before available to your submitters/visitors.

    P.S.2: I also have a fix for the KEY in place so that Admin can set it in config, will post later. This is already done in Github.

    P.S.3: Also a fix making the Event 'body' multi-language (cosmetics), will also post later.
    P.S.4: Will make a fix for the auto-approve situation soon and post it also.


    Regards,
    Eric
    Last edited: Jan 11, 2017

Share This Page