Maps - gmaps.js

Plugin Information

Takes away some of the head aches from working with the Google Map API.

Plugin Name: Gmap
Author: Johan Sall Larsson
License: MIT licensed
Website: https://code.google.com
Dependencies:
None Required
<script src="vendor/plugins/gmap/jquery.ui.map.min.js"></script>
<script src="vendor/plugins/gmap/ui/jquery.ui.map.extensions.min.js"></script>

Method 1: From an HTML element

Open popup
Copy 

<a class="test-popup-link btn btn-primary" href="path-to-image.jpg">Open popup</a>
Copy 

$('.test-popup-link').magnificPopup({ 
  type: 'image'
  // other options
  // gallery:{enabled:true}
});

Extended Information

For more detailed documentation you should refer to the plugins original documentation. Several additional resources have been listed below which contain further useful information.

Documentation: http://hpneo.github.io/gmaps/documentation.html
Advanced Examples: http://hpneo.github.io/gmaps/examples.html

Maps - Gmap

Plugin Information

gmaps.js allows you to use the potential of Google Maps in a simple way.

Plugin Name: gmaps.js
Author: Gustavo Leon
License: MIT licensed
Website: http://hpneo.github.io/gmaps/
Git Branch: hpneo/gmaps
Dependencies:
None Required
<script src="vendor/plugins/map/gmaps.min.js"></script>

Basic GMap

Copy 

<div id="basic-gmap" class="map"></div>
Copy 

// Basic GMap
new GMaps({
  div: '#basic-gmap',
  lat: -12.043333,
  lng: -77.028333
});

Panorama GMap

Copy 

<div id="panorama-gmap" class="map"></div>
Copy 

// Streetview for panorama map
var panorama = GMaps.createPanorama({
    el: '#panorama-gmap',
    lat: 51.693249,
    lng: -0.419630,
    pov: {
        heading: 194,
        pitch: 8
    }
});

Searchable GMap

Copy 

<!-- Map Search Form -->
<form method="post" id="geocoding_form">
    <div class="col-xs-9 prn">
        <input type="text" class="form-control" id="address" name="address" placeholder="Enter an Address...">
    </div>
    <div class="col-xs-3">
        <input type="submit" class="btn btn-default light btn-block" value="Search">
    </div>
</form>

<!-- Gmap Container  -->
<div id="map" class="map"></div>
Copy 

// Init Map using GMaps plugin
var map = new GMaps({
    div: '#searchable-gmap',
    lat: -12.043333,
    lng: -77.028333,
});

// Add search bar to map
$('#geocoding_form').submit(function(e) {
    e.preventDefault();
    GMaps.geocode({
        address: $('#address').val().trim(),
        callback: function(results, status) {
            if (status == 'OK') {
                var latlng = results[0].geometry.location;
                map.setCenter(latlng.lat(), latlng.lng());
                map.addMarker({
                    lat: latlng.lat(),
                    lng: latlng.lng()
                });
            }
        }
    });
});

Extended Information

For more detailed documentation you should refer to the plugins original documentation. Several additional resources have been listed below which contain further useful information.

Documentation: http://hpneo.github.io/gmaps/documentation.html
Advanced Examples: http://hpneo.github.io/gmaps/examples.html

Maps - JVectorMap

Plugin Information

jVectorMap is a vector-based, cross-browser and cross-platform component for interactive geography-related data visualization on the web..

Plugin Name: JVectorMap
Author: Kirill Lebedev
License: MIT licensed
Website: http://jvectormap.com/
Git Branch: bjornd/jvectormap
Dependencies:
None Required
<script src="vendor/plugins/jvectormap/jquery.jvectormap.min.js"></script>
<script src="../../vendor/plugins/jvectormap/assets/jquery-jvectormap-us-lcc-en.js"></script>

jVectorMap requires additional map data to operate. "us-lcc-en.js" has been used for this example. You may need to set or use another map depending on what geographic location you wish to target.

Basic Map - United States

Copy 

 <div id="vectorMap" style="width: 100%; height: 300px;"></div>
Copy 

// Init Jvector Map
$('#vectorMap').vectorMap({
    map: 'us_lcc_en', // Set Map
    backgroundColor: 'transparent', // Map Background
    series: {
        markers: [{
            values: mapData, // modify marker data
            attribute: 'r', // modify marker radius
            scale: [3, 7] // modify marker scale
        }]
    },
    regionStyle: {
        initial: {
            fill: '#E5E5E5' // Region Background Color
        },
        hover: {
            "fill-opacity": 0.3 // Map Hover Color
        }
    },
    markers: [{ // Marker Locations
        latLng: [37.78, -122.41],
        name: 'San Francisco,CA'
    }, {
        latLng: [36.73, -103.98],
        name: 'Las Vegas,TX'
    }],
    markerStyle: {
        initial: {
            fill: '#a288d5', // marker color
            stroke: '#b49ae0', // marker outline
            "fill-opacity": 1, // color opacity
            "stroke-width": 10, // outline width
            "stroke-opacity": 0.3, // outline opacity
            r: 3
        }
    },
});

Extended Information

For more detailed documentation you should refer to the plugins original documentation. Several additional resources have been listed below which contain further useful information.

Documentation: http://jvectormap.com/documentation/
Advanced Examples: http://jvectormap.com/examples/world-gdp/
Additional Maps: http://jvectormap.com/maps/world/europe/

Maps - Mappelic

Plugin Information

A Custom Interactive Map jQuery Plugin.

Plugin Name: Mapplic
Author: Sekler
License: Commercial
Website: http://codecanyon.net/6275001
Dependencies:
<link href="vendor/plugins/mapplic/mapplic/mapplic.css" rel="stylesheet" type="text/css">
<script src="vendor/plugins/mapplic/mapplic/mapplic.js"></script>

Method 1: From an HTML element

Open popup
Copy 

<a class="test-popup-link btn btn-primary" href="path-to-image.jpg">Open popup</a>
Copy 

$('.test-popup-link').magnificPopup({ 
  type: 'image'
  // other options
  // gallery:{enabled:true}
});

Extended Information

For more detailed documentation you should refer to the plugins original documentation. Several additional resources have been listed below which contain further useful information.

Documentation: http://dimsemenov.com/docs
Advanced Examples: http://codepen.io/collection/nLcqo/
Return to Top