gistfile1.js

function initialize() {
        var mapOptions = {
         zoom: 4,
          center: new google.maps.LatLng(37.996163,-95.009766),
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          mapTypeControl: false,
          panControl: false,
        };

        var styles = [
           {
            "featureType": "water",
            "stylers": [
              { "color": "#2b334d" }
            ]
          },{
            "featureType": "administrative",
            "elementType": "labels.text.fill",
            "stylers": [
              { "color": "#777777" },
              { "weight": 8 }
            ]
          },{
            "featureType": "poi",
            "elementType": "labels.text.fill",
            "stylers": [
              { "color": "#777777" },
              { "weight": 8 }
            ]
          },{
            "featureType": "poi",
            "elementType": "labels.text.stroke",
            "stylers": [
              { "visibility": "off" }
            ]
          },{
            "featureType": "administrative",
            "elementType": "labels.text.stroke",
            "stylers": [
              { "visibility": "off" }
            ]
          },{
            "featureType": "administrative.province",
            "elementType": "labels.text",
            "stylers": [
              { "visibility": "off" }
            ]
          },{
            "featureType": "administrative.country",
            "elementType": "labels.text",
            "stylers": [
              { "visibility": "off" }
            ]
          },
          {
            "featureType": "landscape.natural.terrain",
            "elementType": "geometry",
            "stylers": [
              { "visibility": "off" }
            ]
          }

        ];

        var styledMap = new google.maps.StyledMapType(styles,
          {name: "Styled Map"});


        var map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);
        // Define Marker properties
        var guideshop = new google.maps.MarkerImage('marker.svg',
          // This marker is 129 pixels wide by 42 pixels tall.
          new google.maps.Size(65, 57),
          // The origin for this image is 0,0.
          new google.maps.Point(0,0),
          // The anchor for this image is the base of the flagpole at 18,42.
          new google.maps.Point(0, 57)
        );
        // Add Marker
        var gs_hq = new google.maps.Marker({
          position: new google.maps.LatLng(40.7440659, -73.991013),
          map: map,
          icon: guideshop, // This path is the custom pin to be shown. Remove this line and the proceeding comma to use default pin
          title: "New York City, HQ"
        });

        var gs_pa = new google.maps.Marker({
          position: new google.maps.LatLng(37.421029, -122.147718),
          map: map,
          icon: guideshop // This path is the custom pin to be shown. Remove this line and the proceeding comma to use default pin
        });

        // Add listener for a click on the pin
        google.maps.event.addListener(gs_hq, 'click', function() {
          gs_hq_popover.open(map, gs_hq);
          jQuery("div.location").parent().parent().css({"overflow":"visible"});
          jQuery("div.location").parent().css({"overflow":"visible"});
        });

        google.maps.event.addListener(gs_pa, 'click', function() {
          gs_pa_popover.open(map, gs_pa);
          jQuery("div.location").parent().parent().css({"overflow":"visible"});
          jQuery("div.location").parent().css({"overflow":"visible"});
        });

        var gs_hq_info = '<div class="location">'+
        '<img src="gs_hq.jpg" width="100%">'+
        '<h2>'+
          'New York City, HQ'+
        '</h2>'+
        '<h3>45 W 25th St, Floor 5</h3>'+
          '<dl class="hours">'+
            '<dt>Mon - Fri:</dt>'+
            '<dd>9:00am - 8:00pm</dd>'+
            '<dt>Sat:</dt>'+
            '<dd>10:00am - 7:00pm</dd>'+
            '<dt>Sun:</dt>'+
            '<dd>11:00am - 6:00pm</dd>'+
          '</dl>'+
        '<a class="button primary" href="#" onclick="setster_widget_nyc.show(); return false;">'+
          'Schedule an appointment'+
        '</a>'+
      '</div>';

      var gs_pa_info = '<div class="location">'+
        '<img src="gs_pa.jpg" width="100%">'+
        '<h2>'+
          'Palo Alto'+
        '</h2>'+
        '<h3>975 S California Ave</h3>'+
          '<dl class="hours">'+
            '<dt>Mon - Fri:</dt>'+
            '<dd>9:00am - 8:00pm</dd>'+
            '<dt>Sat:</dt>'+
            '<dd>10:00am - 7:00pm</dd>'+
            '<dt>Sun:</dt>'+
            '<dd>11:00am - 6:00pm</dd>'+
          '</dl>'+
        '<a class="button primary" href="#" onclick="setster_widget_nyc.show(); return false;">'+
          'Schedule an appointment'+
        '</a>'+
      '</div>';


        // Add information window
        var gs_hq_popover = new google.maps.InfoWindow({
          content:  gs_hq_info
        });

         // Add information window
        var gs_pa_popover = new google.maps.InfoWindow({
          content:  gs_pa_info
        });

         map.mapTypes.set('map_style', styledMap);
         map.setMapTypeId('map_style');

      }