bitacora/public/js/pages/maps/map-google.init.js

/*************************************************************************************/
// -->Template Name: Bootstrap Press Admin
// -->Author: Themedesigner
// -->Email: niravjoshi87@gmail.com
// -->File: google_map_init
/*************************************************************************************/

$(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");
    },
  });
});