Google Map (GMAP3 Plugin)
This is google map with custom marker, you can define couple parameters:
- data-location – address to show
- data-height – map height (if undefined height will be 220px)
- data-offset – by how many map should be repositioned from marker center point (default -30)
- data-icon – adding custom icon to map in html
Google Map
It uses gmap3 plugin.
Documentation: here
HTML Markup:
|
1 2 3 4 5 6 7 8 |
<div class="hidemap"> <button class="mapToggle"> SHOW THE MAP </button> <div class="googlemapcontainer"> <div class="ct-googleMap" data-location="Richmond" data-height="460" data-offset="0" data-zoom="16" data-icon="../assets/images/tailor/map-marker-tailor.png"></div> </div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
function initmap() { var icongmap = $('.ct-googleMap').attr('data-icon'); if (($(".ct-googleMap").length > 0) && (typeof google === 'object' && typeof google.maps === 'object')) { $('.ct-googleMap').each(function () { var atcenter = ""; var $this = $(this); var location = $this.data("location"); var zoom = $this.data("zoom"); var offset = -30; if (validatedata($this.data("offset"))) { offset = $this.data("offset"); } if (validatedata(location)) { $this.gmap3({ marker: { //latLng: [40.616439, -74.035540], address: location, options: { //visible: false icon: new google.maps.MarkerImage(icongmap) }, callback: function (marker) { atcenter = marker.getPosition(); } |