CODEWITHSUNDEEP
htmlgoogle-mapsmarker
o_s_a_k_a
o_s_a_k_a

Reputation: 71

Custom icon path for marker web Google map? (Uncaught ReferenceError: map is not defined)

Need help to fix my JS as the customed map marker is not displayed. It give me the next error { "message": "Uncaught ReferenceError: map is not defined", "filename": "http://stacksnippets.net/js", "lineno": 77, "colno": 14 }

I used the Google documentation, but didn't relized a problem, maybe is is because I add a style array for my map?

html, body, #myMap{
	height:100%;
	width: 100%;
	margin: 0;
	padding: 0;
}
<!DOCTYPE html>
<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD11wffq7WZNtYAPTRJ-0x9cEzCTn8IkWw&signed_in=true"></script>
    <script>	
		var styleArray;
		var mapOptions;
		var marker;
		var myMap;
				
		function init() {

		var styleArray = [
			{
			  featureType: 'all',
			  stylers: [
				{ saturation: -95 }
			  ]
			},{
			  featureType: 'road.arterial',
			  elementType: 'geometry',
			  stylers: [
				      { color: '#ffffff' },
					    { lightness: 100 },
						{ visibility: 'simplified' }
			  ]
			},{
			  featureType: 'poi.business',
			  elementType: 'labels',
			  stylers: [
				{ visibility: 'off' }
			  ]
			}
		  ];

		  var mapOptions = {
			zoom: 1,
			center: new google.maps.LatLng(-45.363, 131.044),
			disableDefaultUI: true,
			styles: styleArray
		  };

		  var myMap = new google.maps.Map(document.getElementById('myMap'), mapOptions);
		  
		  var custom = {
				path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z',
				fillColor: '#4f4f4f',
				fillOpacity: .9,
				scale: 1,
				strokeColor: '#4f4f4f',
				strokeWeight: 1,
			  };

		  var marker = new google.maps.Marker({
			position: map.getCenter(),
			icon: custom,
			map: myMap,
			draggable: true,
			});
		}		
		
		google.maps.event.addDomListener(window, 'load', init);
	</script>
    </head>	
    <body>
      <div id="myMap"></div>
    </body>
  </html>

Upvotes: 0

Views: 97

Answers (1)

geocodezip
geocodezip

Reputation: 161404

The variable map doesn't exist (as the error message indicates) in this line:

position: map.getCenter(),

Your code calls the google.maps.Map object myMap. So that should be position: myMap.getCenter(),

Fixed snippet:

html,
body,
#myMap {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD11wffq7WZNtYAPTRJ-0x9cEzCTn8IkWw"></script>
  <script>
    var styleArray;
    var mapOptions;
    var marker;
    var myMap;

    function init() {

      var styleArray = [{
        featureType: 'all',
        stylers: [{
          saturation: -95
        }]
      }, {
        featureType: 'road.arterial',
        elementType: 'geometry',
        stylers: [{
          color: '#ffffff'
        }, {
          lightness: 100
        }, {
          visibility: 'simplified'
        }]
      }, {
        featureType: 'poi.business',
        elementType: 'labels',
        stylers: [{
          visibility: 'off'
        }]
      }];

      var mapOptions = {
        zoom: 1,
        center: new google.maps.LatLng(-45.363, 131.044),
        disableDefaultUI: true,
        styles: styleArray
      };

      var myMap = new google.maps.Map(document.getElementById('myMap'), mapOptions);

      var custom = {
        path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z',
        fillColor: '#4f4f4f',
        fillOpacity: .9,
        scale: 1,
        strokeColor: '#4f4f4f',
        strokeWeight: 1,
      };

      var marker = new google.maps.Marker({
        position: myMap.getCenter(),
        icon: custom,
        map: myMap,
        draggable: true,
      });
    }

    google.maps.event.addDomListener(window, 'load', init);
  </script>
</head>

<body>
  <div id="myMap"></div>
</body>

</html>

Upvotes: 1

Related Questions