Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

GoogleMaps API fix for links on pins

Discussion in 'Website Coding & Programming Forum:' started by designbychris, Jul 30, 2014.

  1. designbychris

    designbychris New Member

    Hello everyone, long loooooong time since i've been on here.. Im afraid to say that life / work etc got in the way a bit.. but i'm back temporarily :)

    I was wondering if anyone has any major experience with Google Maps API and could possibly help me?

    I'm working on a site that uses the Google Maps API to create a map and then put pins on it. I need to force the pins to open as a standard target="_self" insead of using this stupid modal window. Can anyone help? The code is below:

    HTML:
    jQuery(document).ready(function(){
    var map_instance = jQuery.MapifyPro.Instance.create(<?php echo $mpfy_instances; ?>);
    map_instance.routes = <?php echo json_encode($routes); ?>;
    map_instance.tooltip_background = <?php echo json_encode($tooltip_background); ?>;
    
    var center = <?php echo json_encode($center); ?>;
    var zoom = {
        'zoom': <?php echo $zoom_level; ?>,
        'enabled': <?php echo ($zoom_enabled) ? 'true' : 'false'; ?>
    };
    var search_radius = <?php echo $search_radius; ?>;
    var settings = {
        'mapTypeId': <?php echo json_encode($google_map_mode); ?>,
        'map_mode': <?php echo json_encode($mode); ?>,
        'search_center': <?php echo json_encode($search_center); ?>,
        'filters_center': <?php echo json_encode($filters_center); ?>,
        'style': <?php echo $google_map_style; ?>,
        'clustering_enabled': <?php echo json_encode($clustering_enabled); ?>,
        'background': <?php echo json_encode($background); ?>
    };
    if (settings.map_mode == 'image') {
        settings['image_source'] = <?php echo json_encode($tileset_url); ?>;
    }
    var inst = new jQuery.MapifyPro.Google(center, zoom, search_radius, <?php echo json_encode($pins); ?>, map_instance, settings);
    
    jQuery(map_instance.container).find('a.mpfy-pin[href=#]').click(function(e) {
        e.preventDefault();
        return false;
    });
    
    var is_phone = jQuery.MapifyPro.isPhone();
    var is_tablet = jQuery.MapifyPro.isTablet();
    var is_touch_device = jQuery.MapifyPro.isTouchDevice();
    
    if (is_phone) {
        jQuery(map_instance.container).find('a.mpfy-pin').not('.mpfy-pin[href=#]').bind('click', function(e) {
            e.preventDefault();
    
            jQuery('#fancybox-loading').show();
            jQuery.get(jQuery(this).attr('href'), {}, function(response) {
                jQuery('body').addClass('mpfy-popup-open');
                jQuery('#fancybox-loading').hide();
    
                jQuery('.mpfy-popup-cnt').html(response);
                jQuery('.mpfy-popup').show();
    
                jQuery('.mpfy-pin-popup .gallery .list li a').click(function() {
                    jQuery('.mpfy-pin-popup .gallery .list li a').removeClass('active');
                    jQuery(this).addClass('active');
    
                    var index = jQuery('.mpfy-pin-popup .gallery .list li a').index(this);
                    jQuery('.mpfy-pin-popup .gallery .holder .item').hide();
                    jQuery('.mpfy-pin-popup .gallery .holder .item:eq(' + index.toString() + ')').show();
                    jQuery('.mpfy-pin-popup .caption').show().html(jQuery(this).next().html());
                    if (!jQuery(this).next().html()) {
                        jQuery('.mpfy-pin-popup .caption').hide();
                    }
                    return false;
                });
    
                jQuery('.mpfy-pin-popup .gallery .list li a:first').click();
    
                if (jQuery('.popup-slider .list li').length > 1) {
                    jQuery('.popup-slider .list').jcarousel({
                        scroll: 1
                    });
                }
    
                var gallery_holder = jQuery('.mpfy-popup .gallery').get(0);
                var hammertime = Hammer(gallery_holder, {
                    drag: false,
                    prevent_mouseevents: true,
                    transform: false,
                    swipe_velocity: 0.1
                });
                hammertime.on("swipeleft", function(e) {
                    var target = jQuery('.mpfy-pin-popup .gallery .list li a.active').parent().next().find('a:first');
                    if (target.length) {
                        target.click();
                        var index = jQuery('.mpfy-pin-popup .gallery .list li a').index(target);
                        jQuery('.popup-slider .list').jcarousel('scroll', index + 1);
                    }
                    e.preventDefault();
                });
                hammertime.on("swiperight", function(e) {
                    var target = jQuery('.mpfy-pin-popup .gallery .list li a.active').parent().prev().find('a:first');
                    if (target.length) {
                        target.click();
                        var index = jQuery('.mpfy-pin-popup .gallery .list li a').index(target);
                        jQuery('.popup-slider .list').jcarousel('scroll', index + 1);
                    }
                    e.preventDefault();
                });
            });
    
            return false;
        });
        jQuery('.mpfy-popup .close').click(function() {
            jQuery('.mpfy-popup').hide();
            jQuery('body').removeClass('mpfy-popup-open');
            jQuery.MapifyPro.hideTooltips();
            return false;
        });
    } else {
        jQuery(map_instance.container).find('a.mpfy-pin:not([href=#])').fancybox({
            type: 'ajax',
            autoDimensions: false,
            width: 960,
            height: 595,
            padding: 0,
            scrolling: 'auto',
            overlayColor: "#000",
            overlayOpacity: 0.85,
            beforeLoad: function() {
                jQuery('#fancybox-wrap').addClass('mpfy-override-fancybox');
            },
            afterShow: function(){
                jQuery('body').addClass('mpfy-popup-open');
                jQuery('.mpfy-pin-popup .gallery .list li a').click(function() {
                    var index = jQuery('.mpfy-pin-popup .gallery .list li a').index(this);
                    jQuery('.mpfy-pin-popup .gallery .holder .item').hide();
                    jQuery('.mpfy-pin-popup .gallery .holder .item:eq(' + index.toString() + ')').show();
                    jQuery('.mpfy-pin-popup .caption').show().html(jQuery(this).next().html());
                    if (!jQuery(this).next().html()) {
                        jQuery('.mpfy-pin-popup .caption').hide();
                    }
                    return false;
                });
    
                jQuery('.mpfy-pin-popup .gallery .list li a:first').click();
    
                if (jQuery('.popup-slider .list li').length > 7) {
                    jQuery('.popup-slider .list').jcarousel({
                        scroll: 1
                    });
                }
    
                jQuery.fancybox.reposition();
    
                jQuery('.mpfy-share').appendTo('.fancybox-outer')
            },
            afterClose: function() {
                jQuery('body').removeClass('mpfy-popup-open');
                jQuery('#fancybox-wrap').removeClass('mpfy-override-fancybox');
            }
        });
        if (is_tablet) {
            jQuery('#fancybox-wrap').addClass('fancybox-tablet');
        }
    }
    
    <?php if (isset($_GET['mpfy-pin'])) : ?>
        var open_pin = <?php echo $_GET['mpfy-pin']; ?>;
        (function(instance) {
    
            setTimeout(function() {
                var a = jQuery(instance.container).find('a.mpfy-pin[data-id="' + open_pin + '"]');
                if (a.length) {
                    for (var i = 0; i < instance.markers.length; i++) {
                        var m = instance.markers[i];
                        if (m._mpfy.pin_id == open_pin) {
                            m.getMap().setCenter(m.getPosition());
                            break;
                        }
                    }
                    a.trigger('click');
                }
            }, 1);
    
        })(map_instance);
    <?php endif; ?>});
    I know it has something to do with the bit in the middle area stating the ajax container. I just cant find a way of just making it open a standard link.

    Any help would be great!

    Chris
     
  2. designbychris

    designbychris New Member

    I got it working :) sorry :)
     

Share This Page