Google Maps API, Can't get marker to show up at all

Question

I have the map up and running but I'm unable to plant a marker at the lat and long specified both in 'center' and 'position'. Does anyone see the error? I had this working earlier but after adding the style array, it stopped, I must have accidentally messed something up but I'm not seeing it now.

<div id="map"></div>

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

<script>
    var map;
    function initialize() {
        var mapOptions = {
            zoom: 17,
            center: new google.maps.LatLng(36, -110),
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            styles: styleArray,
            scrollwheel: false,
        };
        map = new google.maps.Map(document.getElementById('map'),
  mapOptions);
    }

    google.maps.event.addDomListener(window, 'load', initialize);

    var styleArray = [
        {
            featureType: "all",
            stylers: [ { saturation: -80 } ]
        },
        {
            featureType: "road.arterial",
            elementType: "geometry",
            stylers: [ { hue: "#00ffee" }, { saturation: 50 } ]
        },
        {
            featureType: "poi.business",
            elementType: "labels",
            stylers: [ { visibility: "off" } ]
        }
    ];

    var marker = new google.maps.Marker({
        position: (36, -110),
        title:"Hello World!",
        map: (google.maps.MapTypeId.ROADMAP),
    });

    marker.setMap(google.maps.MapTypeId.ROADMAP);

</script>

Answer 1

There are javascript errors in the posted code:

• InvalidValueError: setPosition: not a LatLng or LatLngLiteral: not an Object
• InvalidValueError: setMap: not an instance of Map; and not an instance of StreetViewPanorama

You have several issues with your code:

1. Your marker is instantiated outside the initialize function (so it is instantiated before the map variable is defined. Move it inside the initialize function.

2. The marker.setMap function takes a google.maps.Map object as its argument, this is incorrect:

    marker.setMap(google.maps.MapTypeId.ROADMAP); 

should be:

marker.setMap(map);

3. This is incorrect, position needs to be a google.maps.LatLng object or a google.maps.LatLngLiteral , (36, -110) is neither, and the map property needs to be a google.maps.LatLng ; this:

    var marker = new google.maps.Marker({ position: (36, -110), title:"Hello World!", map: (google.maps.MapTypeId.ROADMAP), }); 

should be:

var marker = new google.maps.Marker({
    position: google.maps.LatLng(36, -110),
    title:"Hello World!",
    map: map,
});

proof of concept fiddle

code snippet:

 var map; function initialize() { var mapOptions = { zoom: 17, center: new google.maps.LatLng(36, -110), mapTypeId: google.maps.MapTypeId.ROADMAP, styles: styleArray, scrollwheel: false, }; map = new google.maps.Map(document.getElementById('map'), mapOptions); var marker = new google.maps.Marker({ position: new google.maps.LatLng(36, -110), title: "Hello World!", map: map, }); marker.setMap(map); } google.maps.event.addDomListener(window, 'load', initialize); var styleArray = [{ featureType: "all", stylers: [{ saturation: -80 }] }, { featureType: "road.arterial", elementType: "geometry", stylers: [{ hue: "#00ffee" }, { saturation: 50 }] }, { featureType: "poi.business", elementType: "labels", stylers: [{ visibility: "off" }] }]; google.maps.event.addDomListener(window, "load", initialize); 

 html, body, #map { height: 100%; width: 100%; margin: 0px; padding: 0px } 

 <script src="https://maps.googleapis.com/maps/api/js"></script> <div id="map"></div> 

Answer 2

4 Steps to make your marker appear.

• Put your key in the JS library. Like this: https://maps.googleapis.com/maps/api/js?sensor=false&key=[YOUR GOOGLE KEY] Visit this page for detail.

• Put your code of creating marker into your initialize method, just make sure it is initialized after the map is created.

• The marker position should be an instance new google.maps.LatLng(36, -110) instead of your code (36, -110)
• marker.setMap method is unnecessary, we can remove it.