Current File : /home/pacjaorg/public_html/km/components/com_djclassifieds/layouts/formgooglemap.php

<?php
/**
 * @package DJ-Classifieds
 * @copyright Copyright (C) DJ-Extensions.com, All rights reserved.
 * @license http://www.gnu.org/licenses GNU/GPL
 * @author url: http://dj-extensions.com
 * @author email contact@dj-extensions.com
 */
 
defined('_JEXEC') or die;

JHtml::_('jquery.framework');

$lat = $displayData['lat'];
$lon = $displayData['lon'];
$icon_img = !empty($displayData['icon_img']) ? $displayData['icon_img'] : null;
$par = $displayData['par'];

?>

<div class="djmap_intro">
    <div class="djmap_intro_desc"><?php echo JText::_('COM_DJCLASSIFIEDS_ADDITEM_SELECT_ON_MAP'); ?></div>
    <span class="button" type="button" id="map_use_my_location"><?php echo JText::_('COM_DJCLASSIFIEDS_USE_MY_LOCATION')?></span>
    <?php if($par->get('show_address','1')){?>
        <span class="button" type="button" id="map_update_latlng"><?php echo JText::_('COM_DJCLASSIFIEDS_UPDATE_USING_ADDRESS')?></span>
    <?php } ?>									
    <div class="clear_both"></div>
    <div id="mapalert"><?php echo JText::_('COM_DJCLASSIFIEDS_WE_CANT_FIND_COORDS_ON_ADDRESS'); ?></div>
</div>
<div id="djmap" style="width:100%;height:300px;"></div>

<script>
    if(typeof google !== 'undefined' && typeof google.maps !== 'undefined'){
        var djmap = null;
        var djmarker = null;
        var start_lat = '<?php echo $lat; ?>';
        var start_lon = '<?php echo $lon; ?>';
        var start_zoom = <?php echo $par->get('gm_zoom','10'); ?>;
        var my_lat = start_lat;
        var my_lng = start_lon;
        var geokoder = new google.maps.Geocoder();
        var scrollw = <?php echo $par->get('gm_scrollwheel','1') ? 'true' : 'false'; ?>;

        jQuery(function(){
		    initDjMap();
	    });
    }

    function initDjMap()
    {
        var coord = new google.maps.LatLng(start_lat, start_lon);

        var mapOpts = {
            zoom: start_zoom,
            scrollwheel: scrollw,
            center: coord,
            mapTypeControl: true,
            navigationControl: true,
            zoomControl: true,        
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            styles: <?php echo trim($par->get('gm_styles','')) == '' ? '[]' : $par->get('gm_styles'); ?>
        }

        djmap = new google.maps.Map(document.getElementById('djmap'), mapOpts);

        <?php if($icon_img){ ?>
        <?php $icon_size = getimagesize(JPATH_ROOT.'/'.$icon_img); ?>
        var size = new google.maps.Size(<?php echo $icon_size[0].','.$icon_size[1]; ?>);
        var start_point = new google.maps.Point(0,0);
        var anchor_point = new google.maps.Point(<?php echo ($icon_size[0]/2).','.$icon_size[1]; ?>);
        var icon = new google.maps.MarkerImage("<?php echo JUri::root().$icon_img; ?>", size, start_point, anchor_point);
        <?php }else{ ?>
        var icon = '';
        <?php } ?>

        djmarker = new google.maps.Marker({
            position: coord,
            draggable: true,
            visible: true,
            clickable: false,
            icon: icon,	
            map: djmap
        });

        google.maps.event.addListener(djmarker, 'dragend', function(event) {
            latlng = djmarker.getPosition();
            my_lat = latlng.lat();
            my_lng = latlng.lng();
            jQuery('#latitude').val(my_lat);
            jQuery('#longitude').val(my_lng);
        });

        google.maps.event.trigger(djmap, 'resize');
        djmap.setCenter(new google.maps.LatLng(my_lat,my_lng));
        
        djmap.setZoom(djmap.getZoom());

        jQuery('#latitude').on('change', function(){
            my_lat = this.value;
            coord = new google.maps.LatLng(my_lat, my_lng);
            djmarker.setPosition(coord);
            djmap.setCenter(coord);
        });
        jQuery('#longitude').on('change', function(){
            my_lng = this.value;
            coord = new google.maps.LatLng(my_lat, my_lng);
            djmarker.setPosition(coord);
            djmap.setCenter(coord);
        });
        jQuery('#map_use_my_location').on('click', function(){
            if(navigator.geolocation){
                navigator.geolocation.getCurrentPosition(showDJPosition);
            }
        });
        jQuery('#map_update_latlng').on('click', function(){
            updateLatLngFromAddress();
        });
        jQuery(document).on("change", "#address, [name=\'regions[]\']", function(){
            updateLatLngFromAddress();
        });
    }
    
    function showDJPosition(position)
    {
        setDJLocationCookie(position);

        my_lat = position.coords.latitude;
        my_lng = position.coords.longitude;
        document.getElementById('latitude').value = my_lat;
        document.getElementById('longitude').value = my_lng;
        var coord = new google.maps.LatLng(my_lat, my_lng);
        djmarker.setPosition(coord);
        djmap.setCenter(coord);
        geokoder.geocode({'latLng': coord}, function(results, status){
            if (status == google.maps.GeocoderStatus.OK){
                if(results){
                    if(jQuery('#address').length && !jQuery('#address').val()){
                        jQuery('#address').val(results[0].formatted_address);
                    }
                    results[0].address_components.forEach(function(item, index){
                        if(item.types.indexOf('postal_code') != -1){
                            if(jQuery('#post_code').length && !jQuery('#post_code').val()){
                                jQuery('#post_code').val(item.short_name);
                            }
                        }
                    });
                }
            }
        });
    }

    function updateLatLngFromAddress()
    {
        var address_arr = [];
        var address_raw = jQuery('#address').val();
        jQuery('[name="regions[]"]').each(function(){
            if(jQuery(this).val() && parseInt(jQuery(this).val())){
                var $reg = jQuery(this).find('option:selected');
                if($reg.attr('data-geoloc') != '0'){
                    address_arr.push($reg.text());
                }
            }
        });
        if(jQuery('#address').val()){
            address_arr.push(jQuery("#address").val());
        }
        if(jQuery('#post_code').length && jQuery('#post_code').val()){
            address_arr.push(jQuery("#post_code").val());
        }
        var address = address_arr.join(', ');
        if(!address){
            if(jQuery('#reg_0').val() == '' || jQuery('#reg_0').val() == '0'){
                my_lat = '';
                my_lng = '';
                jQuery("#latitude").val(my_lat);
                jQuery("#longitude").val(my_lng);
                var coord = new google.maps.LatLng(start_lat, start_lon);
                djmarker.setPosition(coord);
                djmap.setCenter(coord);
            }
            return;
        }
        geokoder.geocode({address: address}, function (results, status){
            if(address_raw != jQuery("#address").val()){ // if address changed from autocomplete
                return;
            }
            if(status == google.maps.GeocoderStatus.OK){
                my_lat = results[0].geometry.location.lat();
                my_lng = results[0].geometry.location.lng();
                document.getElementById('latitude').value = my_lat;
                document.getElementById('longitude').value = my_lng;
                var coord = new google.maps.LatLng(my_lat, my_lng);
                djmarker.setPosition(coord);
                djmap.setCenter(coord);
            }else{
                jQuery('#mapalert').css('display','block');
                setTimeout(function(){
                    jQuery('#mapalert').css('display','none');
                }, 3000);
            }
        });
    }

</script>