使用用户定义的函数时地图消失

Question

I'm new to Js and I have a problem I can't fix. I'm trying to write a function that makes faster the creation of markers on a Google map. The problem is that when I want to call the function either the whole map disappears or if I place the call function elsewhere the map don't disappears but the function does not work. I think my problem is a syntax problem. Here is the code with call function placed in a random place for illustrative purposes:

var map;
 function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
   center: {lat: 37.621389, lng: -122.378945},
   zoom: 9
 });

 function addMarker(posx, title) {
  var marker = new google.maps.Marker( {
   position: posx,
   map: map,
   title: title
 });
 }
}

addMarker ({lat: 37.621389, lng: -122.378945}, {'SFO'});

It's my first time asking here so please if I need to provide more information or any other tips regarding asking properly and comply with the standards of SO, let me know.

Answer 1

The problem relays in the Maps API asynchronous loading. I am guessing the first error in the console.

Uncaught ReferenceError: addMarker is not defined

Move addMarker definition to the global scope and call it inside iniMap when you know for sure the map is fully loaded and its instance is defined. Also the second parametr title should be a string, not an object.

var map;

function initMap() {

    map = new google.maps.Map(document.getElementById('map'), {
     center: {lat: 37.621389, lng: -122.378945},
     zoom: 9
    });
    // now add the marker.
    addMarker ({lat: 37.621389, lng: -122.378945}, 'SFO');
    //_____________________________________________^___^

}

function addMarker(posx, title) {
   var marker = new google.maps.Marker( {
     position: posx,
     map: map,
     title: title
   });
}

Answer 2

Two issues:

1. You need to call the addMarker function after the map is initialized by initMap . The simplest way to do that is to call it inside the initMap function.

2. The second argument to addMarker (the marker's title) needs to be a string.

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

 <div id="map"></div> <script> var map; function initMap() { map = new google.maps.Map(document.getElementById('map'), { center: { lat: 37.621389, lng: -122.378945 }, zoom: 9 }); function addMarker(posx, title) { var marker = new google.maps.Marker({ position: posx, map: map, title: title }); } addMarker({lat: 37.621389,lng: -122.378945}, 'SFO'); } </script> <script src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>