Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
  <head>
<meta name="description" content="[add your bin description]" />
    <script src="https://maps.googleapis.com/maps/api/js"></script>
  </head>
  <body>
    <div id="map_canvas"></div>
  </body>
</html>
 
#map_canvas {
width: 620px;
height: 620px;
}
​
​
 
function initialize() {
        
        var styles = [
  {
    "featureType": "road.local",
    "elementType": "geometry",
    "stylers": [
      { "color": "#cfcfcf" }
    ]
  },{
    "featureType": "road.arterial",
    "elementType": "geometry",
    "stylers": [
      { "color": "#242223" }
    ]
  },{
    "featureType": "road.highway",
    "elementType": "geometry",
    "stylers": [
      { "color": "#242223" }
    ]
  },{
    "featureType": "road.local",
    "elementType": "labels.text.fill",
    "stylers": [
      { "color": "#242223" }
    ]
  },{
    "featureType": "road.arterial",
    "elementType": "labels.text.fill",
    "stylers": [
      { "color": "#ffffff" }
    ]
  },{
    "featureType": "road.highway",
    "elementType": "labels.text.fill",
    "stylers": [
      { "color": "#ffffff" }
    ]
  },{
    "featureType": "road.local",
    "elementType": "labels.text.stroke",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "road.arterial",
    "elementType": "labels.text.stroke",
    "stylers": [
      { "color": "#242223" }
    ]
  },{
    "featureType": "road.highway",
    "elementType": "labels.text.stroke",
    "stylers": [
      { "color": "#242223" }
    ]
  },{
    "featureType": "landscape.man_made",
    "elementType": "geometry.fill",
    "stylers": [
      { "color": "#ffffff" }
    ]
  },{
    "featureType": "poi",
    "elementType": "labels.icon",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "poi",
    "elementType": "labels.text.fill",
    "stylers": [
      { "color": "#242223" }
    ]
  },{
    "featureType": "poi",
    "elementType": "labels.text.stroke",
    "stylers": [
      { "color": "#ffffff" }
    ]
  },{
    "featureType": "poi.park",
    "elementType": "geometry",
    "stylers": [
      { "color": "#efefef" }
    ]
  },{
    "featureType": "poi.school",
    "elementType": "geometry",
    "stylers": [
      { "color": "#efefef" }
    ]
  },{
    "featureType": "poi.medical",
    "elementType": "geometry",
    "stylers": [
      { "color": "#efefef" }
    ]
  },{
    "featureType": "poi.business",
    "elementType": "geometry",
    "stylers": [
      { "color": "#efefef" }
    ]
  },{
    "featureType": "transit.station.rail",
    "elementType": "labels.text.fill",
    "stylers": [
      { "color": "#242223" }
    ]
  },{
    "featureType": "transit.station.rail",
    "elementType": "labels.text.stroke",
    "stylers": [
      { "color": "#ffffff" }
    ]
  },{
    "featureType": "transit.station.rail",
    "elementType": "labels.icon",
    "stylers": [
      { "color": "#1abfdb" }
    ]
  },{
    "featureType": "water",
    "elementType": "geometry",
    "stylers": [
      { "color": "#1abfdb" }
    ]
  },{
    "featureType": "administrative.neighborhood",
    "elementType": "labels.text.fill",
    "stylers": [
      { "color": "#242223" }
    ]
  },{
    "featureType": "administrative.neighborhood",
    "elementType": "labels.text.stroke",
    "stylers": [
      { "color": "#ffffff" }
    ]
  },{
    "featureType": "administrative.locality",
    "elementType": "labels.text.fill",
    "stylers": [
      { "color": "#242223" }
    ]
  },{
    "featureType": "administrative.locality",
    "elementType": "labels.text.stroke",
    "stylers": [
      { "color": "#ffffff" }
    ]
  }
];
        var map_options = {
          mapTypeControlOptions: {
          mapTypeIds: ['Styled']},
          zoom: 15,
          center: new google.maps.LatLng(51.518484,-0.139942),
          mapTypeId: 'Styled'
        };
        
        var map = new google.maps.Map(document.getElementById('map_canvas'), map_options);
​
        setMarkers(map, cafes);
        setMarkers(map, shops);
        setMarkers(map, galleriesMuseums);
        
        var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled'});
        
        map.mapTypes.set('Styled', styledMapType);
  
  //var myLatLng = new google.maps.LatLng(51.516459, -0.138405);  
  
   /*var testMarker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      title: 'Yalla Yalla'
  });*/
  
var contentString1 = '<div class="infoWindowStyle">'+
    '<p>Kaffeine is our closest favourite coffee shop.'+
    'They have very good coffee and a small selection of'+
    'quality loose leaf teas as well. Their menu changes'+
    'weekly, but always includes sweet and savoury baked'+
    'goods, sandwiches and salads. Their menu can be found'+
    'on their website. Linda recommends the banana bread,'+
    'toasted and with butter!'+
    '</div>';
  
var infoWindow = new google.maps.InfoWindow({
  content: contentString1
});
  
  google.maps.event.addListener(marker1, 'click', function() {
  infoWindow.open(map,marker1);
});
        
} // End initialize function(?)
​
var cafes = [
  ['Kaffeine', 51.518484,-0.139942, 10],
  ['The Green Man', 51.518951,-0.139529, 9],
  ['Store Street Espresso', 51.520093, -0.130173, 8],
  ['Nordic Bakery', 51.519281, -0.149580, 7],
  ['Scandinavian Kitchen', 51.518991, -0.140836, 6]
];
      
var shops = [
  ['Sainsburys Local', 51.518153, -0.138662, 5],
  ['Topshop', 51.515616, -0.141310, 4],
  ['London Graphic Centre', 51.520611, -0.134650, 3]
];
      
var galleriesMuseums = [
  ['Fashion Space Gallery', 51.515380, -0.142469, 2],
  ['Getty Images Gallery', 51.516305, -0.139148, 1]
];
​
function setMarkers(map, locations) {
​
  var image1 = {
    url: 'http://www.linda-vuorenvirta.com/misc/athlon_map_icons_cafe-restaurant.png',
    size: new google.maps.Size(30, 41),
    origin: new google.maps.Point(0,0),
    anchor: new google.maps.Point(15, 41)
  };
  
   var image2 = {
    url: 'http://www.linda-vuorenvirta.com/misc/athlon_map_icons_shop.png',
    size: new google.maps.Size(30, 41),
    origin: new google.maps.Point(0,0),
    anchor: new google.maps.Point(15, 41)
  };
  
    var image3 = {
    url: 'http://www.linda-vuorenvirta.com/misc/athlon_map_icons_gallery-museum.png',
    size: new google.maps.Size(30, 41),
    origin: new google.maps.Point(0,0),
    anchor: new google.maps.Point(15, 41)
  };
  
    for (var i = 0; i < cafes.length; i++) {
    var cafe = cafes[i];
    var myLatLng1 = new google.maps.LatLng(cafe[1], cafe[2]);
    var marker1 = new google.maps.Marker({
        position: myLatLng1,
        map: map,
        icon: image1,
        shape: shape,
        title: cafe[0],
        zIndex: cafe[3]
        });
      }
  
    for (var j = 0; j < shops.length; j++) {
    var shop = shops[j];
    var myLatLng2 = new google.maps.LatLng(shop[1], shop[2]);
    var marker2 = new google.maps.Marker({
        position: myLatLng2,
        map: map,
        icon: image2,
        shape: shape,
        title: shop[0],
        zIndex: shop[3]
        });
      }
  
    for (var k = 0; k < galleriesMuseums.length; k++) {
    var galleryMuseum = galleriesMuseums[k];
    var myLatLng3 = new google.maps.LatLng(galleryMuseum[1], galleryMuseum[2]);
    var marker3 = new google.maps.Marker({
        position: myLatLng3,
        map: map,
        icon: image3,
        shape: shape,
        title: galleryMuseum[0],
        zIndex: galleryMuseum[3]
        });
    }
  
    } // End "setMarkers" function
​
  var shape = {
      coords: [0, 0, 0, 30, 30, 30, 30, 0],
      type: 'poly'
  };
​
      google.maps.event.addDomListener(window, 'load', initialize);
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
lvuorenvirtapro
0viewers