zkt24-sk1/assets/libs/js/google_map.js

  $(function() {
            //******************************************//
            // Basic Map
            //******************************************//
            var map;
            map = new GMaps({
                div: '#map',
                lat: -12.043333,
                lng: -77.028333
            });

            //******************************************//
            // Map Events
            //******************************************//
            var map_1;
            map_1 = new GMaps({
                div: '#map_1',
                zoom: 16,
                lat: -12.043333,
                lng: -77.028333,
                click: function(e) {
                    alert('click');
                },
                dragend: function(e) {
                    alert('dragend');
                }
            });

            //******************************************//
            // Markers
            //******************************************//
            var map_2;
            map_2 = new GMaps({
                div: '#map_2',
                lat: -12.043333,
                lng: -77.028333
            });
            map_2.addMarker({
                lat: -12.043333,
                lng: -77.03,
                title: 'Lima',
                details: {
                    database_id: 42,
                    author: 'HPNeo'
                },
                click: function(e) {
                    if (console.log)
                        console.log(e);
                    alert('You clicked in this marker');
                }
            });
            map_2.addMarker({
                lat: -12.042,
                lng: -77.028333,
                title: 'Marker with InfoWindow',
                infoWindow: {
                    content: '<p>HTML Content</p>'
                }
            });

            //******************************************//
            // Polylines
            //******************************************//
            var map_3;
            map_3 = new GMaps({
                div: '#map_3',
                lat: -12.043333,
                lng: -77.028333,
                click: function(e) {
                    console.log(e);
                }
            });

            path1 = [
                [-12.044012922866312, -77.02470665341184],
                [-12.05449279282314, -77.03024273281858],
                [-12.055122327623378, -77.03039293652341],
                [-12.075917129727586, -77.02764635449216],
                [-12.07635776902266, -77.02792530422971],
                [-12.076819390363665, -77.02893381481931],
                [-12.088527520066453, -77.0241058385925],
                [-12.090814532191756, -77.02271108990476]
            ];

            map_3.drawPolyline({
                path: path1,
                strokeColor: '#131540',
                strokeOpacity: 0.6,
                strokeWeight: 6
            });

            //******************************************//
            // Polygons
            //******************************************//
            var map_4;
            map_4 = new GMaps({
                div: '#map_4',
                lat: -12.043333,
                lng: -77.028333
            });

            var path2 = [
                [-12.040397656836609, -77.03373871559225],
                [-12.040248585302038, -77.03993927003302],
                [-12.050047116528843, -77.02448169303511],
                [-12.044804866577001, -77.02154422636042]
            ];

            polygon = map_4.drawPolygon({
                paths: path2,
                strokeColor: '#BBD8E9',
                strokeOpacity: 1,
                strokeWeight: 3,
                fillColor: '#BBD8E9',
                fillOpacity: 0.6
            });

            //******************************************//
            // Routes
            //******************************************//
            var map_5;
            map_5 = new GMaps({
                div: '#map_5',
                lat: -12.043333,
                lng: -77.028333
            });
            map_5.drawRoute({
                origin: [-12.044012922866312, -77.02470665341184],
                destination: [-12.090814532191756, -77.02271108990476],
                travelMode: 'driving',
                strokeColor: '#131540',
                strokeOpacity: 0.6,
                strokeWeight: 6
            });

            //******************************************//
            // Routes Advance
            //******************************************//
            var map_6;
            map_6 = new GMaps({
                div: '#map_6',
                lat: -12.043333,
                lng: -77.028333
            });
            $('#start_travel').click(function(e) {
                e.preventDefault();
                map_6.travelRoute({
                    origin: [-12.044012922866312, -77.02470665341184],
                    destination: [-12.090814532191756, -77.02271108990476],
                    travelMode: 'driving',
                    step: function(e) {
                        $('#instructions').append('<li>' + e.instructions + '</li>');
                        $('#instructions li:eq(' + e.step_number + ')').delay(450 * e.step_number).fadeIn(200, function() {
                            map_6.setCenter(e.end_location.lat(), e.end_location.lng());
                            map_6.drawPolyline({
                                path: e.path,
                                strokeColor: '#131540',
                                strokeOpacity: 0.6,
                                strokeWeight: 6
                            });
                        });
                    }
                });
            });

            //******************************************//
            // Street View Panoramas
            //******************************************//
            panorama = GMaps.createPanorama({
                el: '#panorama',
                lat: 42.3455,
                lng: -71.0983
            });

            //******************************************//
            // Map Types
            //******************************************//
            var map_7;
            map_7 = new GMaps({
                div: '#map_7',
                lat: -12.043333,
                lng: -77.028333,
                mapTypeControlOptions: {
                    mapTypeIds: ["hybrid", "roadmap", "satellite", "terrain", "osm"]
                }
            });
            map_7.addMapType("osm", {
                getTileUrl: function(coord, zoom) {
                    return "https://a.tile.openstreetmap.org/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
                },
                tileSize: new google.maps.Size(256, 256),
                name: "OpenStreetMap",
                maxZoom: 18
            });
            map_7.setMapTypeId("osm");

            //******************************************//
            // Fusion Tables layers
            //******************************************//
            var map_8, infoWindow1;
            infoWindow = new google.maps.InfoWindow({});
            map_8 = new GMaps({
                div: '#map_8',
                zoom: 11,
                lat: 41.850033,
                lng: -87.6500523
            });
            map_8.loadFromFusionTables({
                query: {
                    select: '\'Geocodable address\'',
                    from: '1mZ53Z70NsChnBMm-qEYmSDOvLXgrreLTkQUvvg'
                },
                suppressInfoWindows: true,
                events: {
                    click: function(point) {
                        infoWindow.setContent('You clicked here!');
                        infoWindow.setPosition(point.latLng);
                        infoWindow.open(map_8.map_8);
                    }
                }
            });

            //******************************************//
            // KML layers
            //******************************************//
            var map_9, infoWindow2;
            infoWindow2 = new google.maps.InfoWindow({});
            map_9 = new GMaps({
                div: '#map_9',
                zoom: 12,
                lat: 40.65,
                lng: -73.95
            });
            map_9.loadFromKML({
                url: 'http://api.flickr.com/services/feeds/geo/?g=322338@N20&lang=en-us&format=feed-georss',
                suppressInfoWindows: true,
                events: {
                    click: function(point) {
                        infoWindow2.setContent(point.featureData.infoWindowHtml);
                        infoWindow2.setPosition(point.latLng);
                        infoWindow2.open(map_9.map_9);
                    }
                }
            });

            //******************************************//
            // Geofences
            //******************************************//
            var map_10;
            map_10 = new GMaps({
                div: '#map_10',
                lat: -12.043333,
                lng: -77.028333
            });
            var path3 = [];
            var p = [
                [-12.040397656836609, -77.03373871559225],
                [-12.040248585302038, -77.03993927003302],
                [-12.050047116528843, -77.02448169303511],
                [-12.044804866577001, -77.02154422636042]
            ];
            for (var i in p) {
                latlng = new google.maps.LatLng(p[i][0], p[i][1]);
                path3.push(latlng);
            }
            polygon = map_10.drawPolygon({
                paths: path3,
                strokeColor: '#BBD8E9',
                strokeOpacity: 1,
                strokeWeight: 3,
                fillColor: '#BBD8E9',
                fillOpacity: 0.6
            });
            map_10.addMarker({
                lat: -12.043333,
                lng: -77.028333,
                draggable: true,
                fences: [polygon],
                outside: function(m, f) {
                    alert('This marker has been moved outside of its fence');
                }
            });
        });