Thursday, October 23, 2014

google map example using in codeigniter php page with session save Latitude and Longitude

HTML part

                                <div class="googlemap">
                                    <?php
                                    $this->load->library('session');
                                    $bounds = $this->session->userdata('googlemap_bounds');
                                    $bound_lat = 49.463251;
                                    $bound_lng = 105.964504;
                                    $gmap_zoom = 15;
                                    if (isset($bounds) && !empty($bounds)) {
                                        $bound_array = explode(',', $bounds);
                                        if (!empty($bound_array)) {
                                            $bound_lat = ($bound_array[0] + $bound_array[2]) / 2;
                                            $bound_lng = ($bound_array[1] + $bound_array[3]) / 2;
                                            $gmap_zoom = $bound_array[4];
                                        }
                                    }
                                    if (isset($zar['googlemap']) && !empty($zar['googlemap'])):
                                        ?>                               
                                        <div class="title">
                                            Газрын байршил
                                        </div>
                                        <div class="embed-responsive embed-responsive-16by9">
                                            <?php
                                            echo $zar['googlemap'];
                                            ?>                                           
                                        </div>
                                    <?php endif; ?>
                                    <div class="title">
                                        Газрын байршил
                                    </div>
                                   
                                    <div id="map_canvas" class="embed-responsive embed-responsive-16by9"></div>
                                   
                                </div>

JS code

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
                                        function initialize() {
                                            var initialBounds = null;
                                            var mapCanvas = document.getElementById('map_canvas');
                                            var mapOptions = {
                                                center: new google.maps.LatLng(<?php echo $bound_lat; ?>, <?php echo $bound_lng; ?>),
                                                zoom: <?php echo $gmap_zoom; ?>,
                                                mapTypeId: google.maps.MapTypeId.HYBRID
                                            };
                                            var map = new google.maps.Map(mapCanvas, mapOptions);
                                            var styles = [
                                                {
                                                    featureType: "all",
                                                    elementType: "labels",
                                                    stylers: [
                                                        {visibility: "on"}
                                                    ]
                                                }
                                            ];
                                            map.setOptions({styles: styles});
                                            google.maps.event.addListener(map, 'bounds_changed', function () {
                                                try {
                                                    var zoom = map.getZoom();
                                                    var bounds = map.getBounds();
                                                    var ne = bounds.getNorthEast();
                                                    var sw = bounds.getSouthWest();
                                                    var msg = 'gmb=' + ne.lat() + ',' + ne.lng() + ',' + sw.lat() + ',' + sw.lng() + ',' + zoom;
                                                    if (initialBounds === null) {
                                                        initialBounds = bounds;
                                                    } else {
                                                        var link = '<?php echo site_url('zarwrite/gmap?'); ?>' + msg;
                                                        h2o.action(link, function (result) {
                                                            if (result.success) {
                                                                $('.googlemap .title').html(result.data);
                                                            }
                                                        });
                                                    }
                                                } catch (err) {
                                                    alert(err);
                                                }
                                            });
                                        }
                                        google.maps.event.addDomListener(window, 'load', initialize);
                                    </script>

No comments: