Showing posts with label Google Map. Show all posts
Showing posts with label Google Map. Show all posts

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>