kreativan
3/8/2019 - 9:13 AM

Google Map pw markup

Google Map pw markup

<?php
/**
 *  Google Map Markup
 *  Display google map by providing lat and lng or by address.
 *  If lat and lng are provided, address will be ignored, 
 *  otherwise adddress will be used to center the map.
 *
 *  @author Ivan Milincic <kreativan@outlook.com>
 *  @copyright 2019 Kreativan
 *  
 *  @var id
 * 
 *  @var address   string
 *  @var lat       string 
 *  @var lng       string
 * 
 *  @var zoom      string/integer
 *  @var height    integer
 *  
 *  @var icon      image url
 *  @var style     map style file name 
 * 
*/

$address        = !empty($address) ? $address : setting("siteAddress");
$lat            = !empty($lat) ? $lat : "";
$lng            = !empty($lng) ? $lng : "";

$zoom           = !empty($zoom) ? $zoom : "14";
$height         = !empty($height) ? $height : "400";

$icon           = !empty($icon) ? $icon : "";
$style          = !empty($style) ? $style : "";

$id             = !empty($id) ?  $id : "map";

?>

<div class="tm-google-map">

    <script>
    
        /**
         *  Run initMap callback on window load.
         *  Callback is defined on google maps api script url 
         * 
         */
        window.initMap = function(){

            /**
             *  Init Google Map
             *  Run this fucntion to init the map. You need to provide lat and lng.
             *  @var myLat       
             *  @var myLng
             *
             */
            function initGoogleMap(myLat, myLng) {

                var location = {lat: myLat, lng: myLng};

                var map = new google.maps.Map(document.getElementById('<?= $id ?>'), {
                    center: location,
                    zoom: <?= $zoom ?>,
                    draggable: true,
                    scrollwheel: false,
                    fullscreenControl:true,
                    zoomControl: true,
                    mapTypeControl: true,
                    streetViewControl: true,
                    <?php if($style != "" && $style != "default"):?>
                        styles: <?php include("./../lib/map-styles/{$style}.php");?>
                    <?php endif;?>
                });
                var marker = new google.maps.Marker({
                    position: location,
                    map: map,
                    <?php if($icon != ""):?>
                        icon: '<?= $icon ?>',
                    <?php endif;?>
                });

            }

            /**
             *  Init Google Map By Address
             *  Get @var lat and @var lng using google geocoder.
             *  Then run the @function initGoogleMap() to init the map with resulting lat and lng
             *
             */
            function initMapByAddress(my_address) {

                var geocoder;
                geocoder = new google.maps.Geocoder();

                geocoder.geocode({'address': my_address}, function(results, status) {

                    if (status == 'OK') {
                        thisLat = results[0].geometry.location.lat();
                        thisLng = results[0].geometry.location.lng();
                        initGoogleMap(thisLat, thisLng); // run the function with the data we got
                    } else {
                        console.log('Geocode was not successful for the following reason: ' + status);
                    }

                });

            }

            <?php if($lat != "" && $lng != "") :?>
                initGoogleMap(<?= $lat ?>, <?= $lng ?>);
            <?php else :?>
                initMapByAddress("<?= $address ?>");
            <?php endif;?>    

        }
    </script>

    <div id="<?= $id ?>" style="height:<?= $height ?>px;width:100%;"></div>
    
</div>