google.maps.event.addDomListener(window, "load", init);
var map;
function init() {
var mapOptions = {
center: new google.maps.LatLng(37.789251, -122.388505),
zoom: 15,
zoomControl: false,
disableDoubleClickZoom: false,
mapTypeControl: false,
scaleControl: false,
scrollwheel: false,
panControl: false,
streetViewControl: false,
draggable: true,
overviewMapControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [
{
featureType: "administrative",
elementType: "labels",
stylers: [{ visibility: "off" }],
},
{
featureType: "administrative.province",
elementType: "all",
stylers: [{ visibility: "off" }],
},
{
featureType: "landscape",
elementType: "all",
stylers: [
{ saturation: -100 },
{ lightness: 65 },
{ visibility: "on" },
{ color: "#f5f7f9" },
],
},
{
featureType: "poi",
elementType: "all",
stylers: [
{ saturation: -100 },
{ lightness: 51 },
{ visibility: "off" },
],
},
{
featureType: "road",
elementType: "all",
stylers: [{ visibility: "off" }],
},
{
featureType: "road",
elementType: "geometry",
stylers: [{ visibility: "on" }],
},
{
featureType: "road",
elementType: "labels.icon",
stylers: [{ visibility: "off" }],
},
{
featureType: "road.highway",
elementType: "all",
stylers: [{ saturation: -100 }, { visibility: "simplified" }],
},
{
featureType: "road.highway",
elementType: "geometry",
stylers: [{ lightness: "25" }],
},
{
featureType: "road.highway",
elementType: "labels.icon",
stylers: [{ visibility: "on" }],
},
{
featureType: "road.arterial",
elementType: "all",
stylers: [
{ saturation: -100 },
{ lightness: 30 },
{ visibility: "on" },
],
},
{
featureType: "road.arterial",
elementType: "geometry",
stylers: [{ visibility: "on" }],
},
{
featureType: "road.arterial",
elementType: "labels",
stylers: [{ visibility: "on" }],
},
{
featureType: "road.local",
elementType: "all",
stylers: [
{ saturation: -100 },
{ lightness: 40 },
{ visibility: "on" },
],
},
{
featureType: "road.local",
elementType: "geometry",
stylers: [{ visibility: "on" }, { lightness: "2" }, { gamma: "1.59" }],
},
{
featureType: "road.local",
elementType: "geometry.stroke",
stylers: [{ visibility: "off" }],
},
{
featureType: "road.local",
elementType: "labels",
stylers: [{ visibility: "simplified" }, { lightness: "49" }],
},
{
featureType: "road.local",
elementType: "labels.icon",
stylers: [{ visibility: "on" }],
},
{
featureType: "transit",
elementType: "all",
stylers: [{ saturation: -100 }, { visibility: "on" }],
},
{
featureType: "transit",
elementType: "labels",
stylers: [{ visibility: "on" }],
},
{
featureType: "transit",
elementType: "labels.icon",
stylers: [{ visibility: "on" }],
},
{
featureType: "transit.line",
elementType: "geometry",
stylers: [{ visibility: "off" }],
},
{
featureType: "transit.line",
elementType: "labels",
stylers: [{ visibility: "off" }],
},
{
featureType: "transit.station",
elementType: "all",
stylers: [{ visibility: "off" }],
},
{
featureType: "transit.station.airport",
elementType: "all",
stylers: [{ visibility: "off" }],
},
{
featureType: "transit.station.bus",
elementType: "geometry",
stylers: [{ visibility: "off" }],
},
{
featureType: "transit.station.bus",
elementType: "labels",
stylers: [{ visibility: "off" }],
},
{
featureType: "transit.station.rail",
elementType: "all",
stylers: [{ visibility: "on" }],
},
{
featureType: "transit.station.rail",
elementType: "labels.icon",
stylers: [{ visibility: "on" }],
},
{
featureType: "water",
elementType: "geometry",
stylers: [
{ lightness: -25 },
{ saturation: -97 },
{ color: "#7d8790" },
],
},
{
featureType: "water",
elementType: "labels",
stylers: [
{ visibility: "on" },
{ lightness: -25 },
{ saturation: -100 },
],
},
],
};
var mapElement = document.getElementById("goog-map");
var map = new google.maps.Map(mapElement, mapOptions);
var locations = [
[
"Pier 24 Photography",
"A place to view and think about photography.",
"415.512.7424",
"info@pier24.org",
"https://www.pier24.org",
37.78948076985498,
-122.38699838465578,
"https://pier24.org/pilarafoundation/wp-content/themes/p24/images/map-logo.png",
],
[
"Ferry Building",
"undefined",
"undefined",
"undefined",
"undefined",
37.79517706301043,
-122.38755780881502,
"https://pier24.org/pilarafoundation/wp-content/themes/p24/images/map-ferrybuilding.png",
],
[
"AT&T Park",
"undefined",
"undefined",
"undefined",
"undefined",
37.77857750539374,
-122.38280291798401,
"https://pier24.org/pilarafoundation/wp-content/themes/p24/images/map-attpark.png",
],
[
"Public Parking",
"undefined",
"undefined",
"undefined",
"undefined",
37.78570343441522,
-122.38103851622469,
"https://pier24.org/pilarafoundation/wp-content/themes/p24/images/map-publicparking.png",
],
];
for (i = 0; i < locations.length; i++) {
if (locations[i][1] == "undefined") {
description = "";
} else {
description = locations[i][1];
}
if (locations[i][2] == "undefined") {
telephone = "";
} else {
telephone = locations[i][2];
}
if (locations[i][3] == "undefined") {
email = "";
} else {
email = locations[i][3];
}
if (locations[i][4] == "undefined") {
web = "";
} else {
web = locations[i][4];
}
if (locations[i][7] == "undefined") {
markericon = "";
} else {
markericon = locations[i][7];
}
marker = new google.maps.Marker({
icon: markericon,
position: new google.maps.LatLng(locations[i][5], locations[i][6]),
map: map,
title: locations[i][0],
desc: description,
tel: telephone,
email: email,
web: web,
});
link = "";
}
}
#goog-map {
height:600px;
width:1400px;
}
.gm-style-iw * {
display: block;
}
.gm-style-iw h4, .gm-style-iw p {
margin: 0;
padding: 0;
}
.gm-style-iw a {
color: #4272db;
display: inline-block;
margin: 10px 0;
}
