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

Question

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

111 Views Asked by o_s_a_k_a At 04 April 2025 at 14:08

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>

Original Q&A

There are 1 best solutions below

**geocodezip** · Accepted Answer

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>

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

There are 1 best solutions below

Related Questions in HTML

Related Questions in GOOGLE-MAPS

Related Questions in MARKER

Trending Questions

Popular # Hahtags

Popular Questions