Question

I am having a little trouble with implementing the Google Maps APi styled map, I can get the location and custom marker working, by removing the var styles & map.setoptions) but soon as I try to add the google styles coding back in the map no longer works, any ideas??

<script type="text/javascript">
      function initialize() {
        var styles = [ 
          { 
          featureType: "water", 
          elementType: "geometry.fill",
          stylers: [ 
            { color: "#73b6e6" }
            ] 
            },{
          featureType: "road.highway",
          elementType: "geometry.fill",
          stylers: [ 
            { color: "#ffffff" } 
            ] 
            },{
          featureType: "road.highway",
          elementType: "geometry.stroke",
          stylers: [
            { color: "#c8c8c8" }
            ] 
            },{
          featureType: "road.local",
          stylers: [ 
            { color: "#ffffff" } 
            ] 
            },{
          featureType: "road.arterial",
          elementType: "geometry.fill", 
          stylers: [ 
            { color: "#ffffff" } 
            ] 
            },{
          featureType: "road.arterial",
          elementType: "geometry.stroke",
          stylers: [ 
            { color: "#c8c8c8" } 
            ] 
            },{
          featureType: "road.highway",
          elementType: "labels.text.stroke",
          stylers: [ 
            { visibility: "off" } 
            ] 
            },{
          featureType: "road.arterial", 
          elementType: "labels.text.stroke",
          stylers: [ { visibility: "off" } 
            ] 
            },{
          featureType: "poi",
          elementType: "labels",
          stylers: [ { "visibility": "off" } 
            ] 
            },{
          featureType: "poi.park",
          stylers: [ { color: "#cae6a9" } 
            ] 
            },{
          featureType: "administrative.neighborhood",
          elementType: "labels.text.fill",
          stylers: [ { "visibility": "off" } 
            ] 
            }
        ];
        map.setOptions({styles: styles});
        var mapOptions = {
          center: new google.maps.LatLng(-34.94533,138.58934),
          zoom: 14,
          scrollwheel: false,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("location-map"),
            mapOptions);
        var image = 'images/main/location.png';
        var myLatLng = new google.maps.LatLng(-34.94533,138.58934);
        var beachMarker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            icon: image
        });
      };
    </script>

HTML Code

<div id="location-map" style="background-color: #E5E3DF; overflow: hidden;">
</div>

Answer 1

the map var does not exist before you create, yet you are calling map.setOptions before this line:

var map = new google.maps.Map(document.getElementById("location-map"),
            mapOptions);

Just move this line:

map.setOptions({styles: styles});

after this one:

var map = new google.maps.Map(document.getElementById("location-map"),
            mapOptions);