Maps

It’s possible to embed a Google Map with a placemarker on a web page. These are used for things such as showing an office location at different campuses. Larger maps are used for the campus map and accessible building features map.

Development info

  • Stylesheet location: /source-v6/styles/components/_maps.scss
  • The map styles include a border. Don’t add any additional styles, such as a drop shadow.
  • all maps default to 100% width and 400px height. You can overwrite these values in the head, and/or use a size-percent-x class on the map-container div (will only adjust the width, the height remains the same)
  • There isn’t currently a way to add maps in the WordPress editor without accessing the source code
  • In the content area:
    <div class="map-container">
      <div class="mapcanvas"></div>
    </div>
  • In the scripts section at the bottom of the page (edit the mapCenterArray coordinates, and adjust for the number of embedded maps – remove or add coordinate entries):
    <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script> 
    <script type="text/javascript" src="https://www.pcc.edu/about/locations/map/scripts/markerwithlabel_packed.js"></script> 
    <script type="text/javascript">
    var pccStyle = [
    	{ "featureType": "all", "elementType": "labels", "stylers": [ { "visibility": "off" } ] }, // turn labels off
    	{ "featureType": "poi.park", "elementType": "geometry", "stylers": [ { "visibility": "on" }, { "saturation": -34 }, { "lightness": 21 } ] },	// point of interests
    	{ "featureType": "poi.park", "elementType": "labels.text", "stylers": [ { "visibility": "on" } ] },
    	{ "featureType": "poi.park", "elementType": "labels.text.fill", "stylers": [ { "color": "#93a294" } ] },
    	{ "featureType": "poi.park", "elementType": "labels.icon", "stylers": [ { "visibility": "on" }, { "saturation": -34 }, { "lightness": 21 } ] },
    	{ "featureType": "poi.school", "elementType": "geometry", "stylers": [ { "visibility": "on" } ] },
    	{ "featureType": "road", "elementType": "geometry", "stylers": [ { "visibility": "on" }, { "saturation": -36 }, { "lightness": 19 } ] },	// roads
    	{ "featureType": "road", "elementType": "labels", "stylers": [ { "visibility": "on" } ] },
    	{ "featureType": "road", "elementType": "labels.text.fill", "stylers": [ { "color": "#808080" } ] },
    	{ "featureType": "road", "elementType": "labels.text.stroke", "stylers": [ { "saturation": -36 }, { "lightness": 19 } ] },
    	{ "featureType": "road", "elementType": "labels.icon", "stylers": [ { "visibility": "on" }, { "saturation": -36 }, { "lightness": 19 } ] },
    	{ "featureType": "water", "elementType": "geometry", "stylers": [ { "visibility": "on" } ] },	// water 
    	{ "featureType": "water", "elementType": "labels", "stylers": [ { "visibility": "on" } ] }
    ]
    var styledMapOptions = { name: "PCC"};
    var pccMapType = new google.maps.StyledMapType (pccStyle, styledMapOptions);
    var kmlPath = 'https://www.pcc.edu/about/locations/map/kml/job-intern.kml';
    var mapCenterArray = [
    	{"lat":45.43806, "lng":-122.73182},
    	{"lat":45.56389, "lng":-122.67446},
    	{"lat":45.56596, "lng":-122.86056},
    	{"lat":45.50652, "lng":-122.58003}
    ]
    $(document).ready(function() {
    	
    $('.mapcanvas').each(function(i) {
    	var campusLat = mapCenterArray[i].lat;
    	var campusLng = mapCenterArray[i].lng;
    	var campusCenter = new google.maps.LatLng(campusLat,campusLng);
    	var mapOptions = {
    	  zoom: 17,
    	  center: campusCenter,
    	  streetViewControl: false,
    	  mapTypeControl:  false,
    	  mapTypeIds: ['pcc', google.maps.MapTypeId.SATELLITE] 
    	};
    	var map = new google.maps.Map(this, mapOptions);
    	map.mapTypes.set('pcc', pccMapType);
    	map.setMapTypeId('pcc');	
    	createLabels(map);
    	var placemarkLayer = new google.maps.KmlLayer(kmlPath, { clickable: false, map:map, preserveViewport: true });
    });
    
    }); // end of doc ready
    
    function createLabels(map) {
    	//$.getScript('http://blogs.pcc.edu/accessibility/placemarks-data/?setting=locations', function() { 
    	$.getScript('https://www.pcc.edu/about/locations/map/placemarks-data/?setting=locations', function() { 
    		var labelsArray = json["locations"];													// get all locations from the admin interface	
    		$.each(labelsArray, function(i) {													 	// for each campus
    			var buildingLabelsArray = labelsArray[i]["locations"];
    			$.each(buildingLabelsArray, function(i) { 											// for each building
    				labelName = buildingLabelsArray[i]["slug"];														
    				labelName = labelName.substr(labelName.indexOf("-") + 1); 						// fix up slug to be abbreviation
    				labelLat = buildingLabelsArray[i]["lat"];
    				labelLng = buildingLabelsArray[i]["lng"];
    				if (labelLat) {																	// check for a position
    					//console.info(labelName);
    					var label = new MarkerWithLabel({
    						map: map,
    						position: new google.maps.LatLng(labelLat,labelLng),
    						labelContent: labelName,
    						icon: "https://www.pcc.edu/about/locations/map/images/floorplans/invisible.png",
    						zIndex: -10,
    						clickable: false,
    						labelClass: "building-labels",
    						crossImage: "https://www.pcc.edu/about/locations/map/images/floorplans/invisible.png"
    					});
    				}
    			});
    		});
    	});
    }  
    </script>

Styling

Embedded maps, in most cases, look just like they do on Google Maps.

Responsive behavior

Embedded maps shrink or expand with the window size. They also use Google’s responsive touch feature:

  • Use two fingers to move the map
  • Use one finger to move the page (scroll)

There are examples of embedded Google maps on the internships page.

Map for each campus with placemarkers example