Google Map not displaying after applying custom style - google-maps

Question

I have nearly finished the code below which displays markers from an array, each with their own infoBox.
The final step is to style the map but despite following many online tutorials to the letter (changing the relevant bits to match my code) all I am getting is a totally grey map.
Here is my code:
// Set up map
var map;
var pop_up_info = "border: 0px solid black; background-color: #ffffff; padding:15px; margin-top: 8px; border-radius:10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; box-shadow: 1px 1px #888;";
google.maps.event.addDomListener(window, 'load', initialize);
function initialize() {
var store_pins = new Array();
var pin_marker = new Array();
var pin_info = new Array();
var pin_infoop = new Array();
var pin_infotxt = new Array();
// Style Map
var style_map = [
{
"featureType": "administrative",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "poi",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "transit",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "road",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "landscape",
"stylers": [
{ "visibility": "on" },
{ "color": "#ffffff" }
]
},{
"featureType": "water",
"stylers": [
{ "visibility": "on" },
{ "color": "#00ffff" }
]
}
];
var styledMap = new google.maps.StyledMapType(style_map,{name: "Styled Map"});
store_pins = [
[‘Test Pin 1’, 55.144178, -2.254122,'pin','bellinghamcoop.jpg’,’Test Pin 1’],
[‘Test Pin 2’, 55.018754, -1.672230,'rugby','kingparktigers.jpg’,’Test Pin 2’]
];
var myOptions = {
zoom: 3,
minZoom: 3,
center: google.maps.LatLng(55.144178,-2.254122),
mapTypeControlOptions:
{
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
}
}
map = new google.maps.Map(document.getElementById("trackingT-map"), myOptions);
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
// Main Loop
for(i=0;i<store_pins.length;i++)
{
var pos = new google.maps.LatLng(store_pins[i][1], store_pins[i][2]);
var pinIcon = {
url: 'icons/shirtpin.png',
//The size image file.
size: new google.maps.Size(50, 55),
//The point on the image to measure the anchor from. 0, 0 is the top left.
origin: new google.maps.Point(0, 0),
//The x y coordinates of the anchor point on the marker. e.g. If your map marker was a drawing pin then the anchor would be the tip of the pin.
anchor: new google.maps.Point(25, 20)
};
var pinShape = {
coord: [0,0,50,55],
type: 'rect'
};
pin_marker[i] = new google.maps.Marker(
{
position: pos,
map: map,
title: store_pins[i][0],
icon: pinIcon,
shape: pinShape,
zIndex: 107
}
);
//Creates the information to go in the pop-up info box.
pin_infotxt[i] = document.createElement("div");
pin_infotxt[i].style.cssText = pop_up_info;
pin_infotxt[i].innerHTML = '<span class="pop_up_box_text"><img src="content/TShirts/'+store_pins[i][4]+'" border="0" id="imgid'+i+'"/><h align="center">'+store_pins[i][5]+'</h></span>';
pin_infoop[i] = {
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(-241, 0),
zIndex: null,
boxStyle: {
background: "url('infobox/pop_up_box_top_arrow.png') no-repeat",
opacity: 1,
width: "380px"
},
closeBoxMargin: "10px 2px 2px 2px",
closeBoxURL: "icons/button_close.png",
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
pane: "floatPane",
enableEventPropagation: false,
content: pin_infotxt[i]
};
google.maps.event.addListener(pin_marker[i], 'click', (function(marker, i) {
return function() {
for ( h = 0; h < pin_marker[i].length; h++ ) {
pin_marker[h].infobox.close();
}
map.panTo(this.position);
map.setZoom(15);
pin_info[i].open(map, this);
}
})(pin_marker[i], i));
pin_info[i] = new InfoBox(pin_infoop[i]);
}
};
I am sure it will be something simple.
Hope someone can help.
Jim

Answer 1

The simplest way to do it is to just apply the styles to the map:
var myOptions = {
zoom: 3,
minZoom: 3,
center: map_center,
styles: style_map,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("trackingT-map"), myOptions);
proof of concept fiddle (unless you really want to have another map type)
code snippet:
var map;
var pop_up_info = "border: 0px solid black; background-color: #ffffff; padding:15px; margin-top: 8px; border-radius:10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; box-shadow: 1px 1px #888;";
google.maps.event.addDomListener(window, 'load', initialize);
var store_pins = [];
var pin_marker = [];
var pin_info = [];
var pin_infoop = [];
function initialize() {
var map_center = new google.maps.LatLng(55.144178, -2.254122);
// Style Map
var style_map = [{
"featureType": "administrative",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "poi",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "transit",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "road",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "landscape",
"stylers": [{
"visibility": "on"
}, {
"color": "#ffffff"
}]
}, {
"featureType": "water",
"stylers": [{
"visibility": "on"
}, {
"color": "#00ffff"
}]
}];
// var styledMap = new google.maps.StyledMapType(style_map,{name: "Styled Map"});
store_pins = [
['Test Pin 1', 55.144178, -2.254122, 'pin', 'bellinghamcoop.jpg', 'Test Pin 1'],
['Test Pin 2', 55.018754, -1.672230, 'rugby', 'kingparktigers.jpg', 'Test Pin 2']
];
var myOptions = {
zoom: 3,
minZoom: 3,
center: map_center,
styles: style_map,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("trackingT-map"), myOptions);
// Main Loop
for (i = 0; i < store_pins.length; i++) {
var pos = new google.maps.LatLng(store_pins[i][1], store_pins[i][2]);
var pinIcon = {
url: 'icons/shirtpin.png',
//The size image file.
size: new google.maps.Size(50, 55),
//The point on the image to measure the anchor from. 0, 0 is the top left.
origin: new google.maps.Point(0, 0),
//The x y coordinates of the anchor point on the marker. e.g. If your map marker was a drawing pin then the anchor would be the tip of the pin.
anchor: new google.maps.Point(25, 20)
};
var pinShape = {
coord: [0, 0, 50, 55],
type: 'rect'
};
pin_marker[i] = new google.maps.Marker({
position: pos,
map: map,
title: store_pins[i][0],
// icon: pinIcon,
// shape: pinShape,
zIndex: 107
});
pin_infoop[i] = {
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(-75, 0),
zIndex: null,
boxStyle: {
background: "white",
opacity: 1,
width: "150px"
},
closeBoxMargin: "10px 2px 2px 2px",
closeBoxURL: "icons/button_close.png",
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
pane: "floatPane",
enableEventPropagation: false,
content: store_pins[i][5]
};
pin_info[i] = new InfoBox(pin_infoop[i]);
google.maps.event.addListener(pin_marker[i], 'click', (function(marker, i) {
return function() {
map.panTo(this.position);
map.setZoom(10);
pin_info[i].open(map, this);
}
})(pin_marker[i], i));
}
};
#trackingT-map {
height: 400px;
width: 400px;
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script src="http://www.staff.org.au/infobox.js"></script>
<div id="trackingT-map"></div>