Google Map Menu

Google Map Menu.markdown

Google Map Menu

Just a tabbed menu of google maps.

Forked from Mark Holmes's Pen Google Map Menu.

A Pen by ne.mmoj on CodePen.

License.

index.html

<div id="map-canvas">
</div>
<span id="active"></span>
<ul class="nav">
  <li class="active" id="NewYork">New York</li>
  <li id="London">London</li>
  <li id="Paris">Paris</li>
  <li id="HongKong">Hong Kong</li>
</ul>

script.js

function initialize() {
  var mapOptions = {
    center: {
      lat: 40.7499256, 
      lng: -73.9854028
    },
    zoom: 14,
    zoomControl: false,
    panControl: false,
    streetViewControl: false
  };
  
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  
  var img = "http://i.stack.imgur.com/JWM0W.png";
  
  var NewYork = new google.maps.Marker({
      position: mapOptions.center,
      map: map,
      icon: img
   });
  
  var London = new google.maps.Marker({
      position: {lat: 51.5106122, lng: -0.1529072},
      map: map,
      icon: img
   });
  
  var Paris = new google.maps.Marker({
      position: {lat: 48.8588589, lng: 2.3470599},
      map: map,
      icon: img
   });
  
  var HongKong = new google.maps.Marker({
      position: {lat: 22.2753729, lng: 114.1757384},
      map: map,
      icon: img
   });
  
  var markers = {
    'NewYork': NewYork,
    'London': London,
    'Paris': Paris,
    'HongKong': HongKong
  };
  
  var styles = [
    {
        "featureType": "water",
        "elementType": "geometry.fill",
        "stylers": [
            {
                "color": "#d3d3d3"
            }
        ]
    },
    {
        "featureType": "transit",
        "stylers": [
            {
                "color": "#808080"
            },
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "road.highway",
        "elementType": "geometry.stroke",
        "stylers": [
            {
                "visibility": "on"
            },
            {
                "color": "#b3b3b3"
            }
        ]
    },
    {
        "featureType": "road.highway",
        "elementType": "geometry.fill",
        "stylers": [
            {
                "color": "#ffffff"
            }
        ]
    },
    {
        "featureType": "road.local",
        "elementType": "geometry.fill",
        "stylers": [
            {
                "visibility": "on"
            },
            {
                "color": "#ffffff"
            },
            {
                "weight": 1.8
            }
        ]
    },
    {
        "featureType": "road.local",
        "elementType": "geometry.stroke",
        "stylers": [
            {
                "color": "#d7d7d7"
            }
        ]
    },
    {
        "featureType": "poi",
        "elementType": "geometry.fill",
        "stylers": [
            {
                "visibility": "on"
            },
            {
                "color": "#ebebeb"
            }
        ]
    },
    {
        "featureType": "administrative",
        "elementType": "geometry",
        "stylers": [
            {
                "color": "#a7a7a7"
            }
        ]
    },
    {
        "featureType": "road.arterial",
        "elementType": "geometry.fill",
        "stylers": [
            {
                "color": "#ffffff"
            }
        ]
    },
    {
        "featureType": "road.arterial",
        "elementType": "geometry.fill",
        "stylers": [
            {
                "color": "#ffffff"
            }
        ]
    },
    {
        "featureType": "landscape",
        "elementType": "geometry.fill",
        "stylers": [
            {
                "visibility": "on"
            },
            {
                "color": "#efefef"
            }
        ]
    },
    {
        "featureType": "road",
        "elementType": "labels.text.fill",
        "stylers": [
            {
                "color": "#696969"
            }
        ]
    },
    {
        "featureType": "administrative",
        "elementType": "labels.text.fill",
        "stylers": [
            {
                "visibility": "on"
            },
            {
                "color": "#737373"
            }
        ]
    },
    {
        "featureType": "poi",
        "elementType": "labels.icon",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "poi",
        "elementType": "labels",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "road.arterial",
        "elementType": "geometry.stroke",
        "stylers": [
            {
                "color": "#d6d6d6"
            }
        ]
    },
    {
        "featureType": "road",
        "elementType": "labels.icon",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {},
    {
        "featureType": "poi",
        "elementType": "geometry.fill",
        "stylers": [
            {
                "color": "#dadada"
            }
        ]
    }
];
  
  map.setOptions({styles: styles});
  
  function getCoords (position) {
     var text = position.replace(/[()]/g,'').split(", ");
     var lat = Number(text[0]);
     var lng = Number(text[1]);
    
     return {
       lat: lat,
       lng: lng
     };
  }
  
   $('.nav li').on('click', function () {
     $('.nav li').removeClass('active');
     $(this).addClass('active');
     var id = $(this).attr('id');
     $('#active').animate({
       'margin-left': $(this).offset().left
     });
     var position = String(markers[id].getPosition());
     map.panTo(new google.maps.LatLng(getCoords(position).lat, getCoords(position).lng));
   });
  
 }

 google.maps.event.addDomListener(window, 'load', initialize);

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDq-nop1pQDEC8and1e460pn46PezNZiWE"></script>

style.css

* {
  box-sizing: border-box !important;
}

html, body { 
  height: 100%; 
  margin: 0; 
  padding: 0;
}

#map-canvas {
  height: 85%;
  width: 100%;
}

#overlay {
  background-color: black;
  height: 100%;
  width: 100%;
  z-index: 1000;
}

#active {
  background-color: #333;
  display: block;
  margin-bottom: -5px;
  height: 5px;
  width: 25.08%;
  position: relative;
  z-index: 999;
}

.active {

}

.nav {
  display: table;
  height: 15%;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  
  li {
    border-left: 1px solid #E5E5E5;
    color: #787878;
    cursor: pointer;
    display: table-cell;
    font-family: 'Sanchez', serif;
    text-align: center;
    vertical-align: middle;
    width: 25%;
    -webkit-transition: all 0.5s linear;
    transition: all 0.5s linear;
  }
  
  li:first-child {
    border-left: none;
  }
}

styles

<link href="http://fonts.googleapis.com/css?family=Sanchez" rel="stylesheet" />