新增座標

Step1. 設置地圖
(a) 標註經緯度
(b) 設定center(中心)、zoom(縮放)

      var myLatlng = new google.maps.LatLng(-25.363882,131.044922); //與之相同 => {lat: -25.363882, lng: 131.044922};
      var mapOptions = {
        zoom: 4,
        center: myLatlng
      }
      var map = new google.maps.Map(document.getElementById("map"), mapOptions);
      

Step2. 放置座標
(a) 可以直接在marker內給予map值
(b) 可以在外層利用'setMap()'方法

      var marker = new google.maps.Marker({
          position: myLatlng,
          title:"Hello World!",
          //map: map, => (a)
      });

      // To add the marker to the map, call setMap();
      marker.setMap(map); => (b)

      

移除座標

      marker.setMap(null);
      

手動增加座標

先載入api

      <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAeXLUmJBsHsbllQA-APXny49W_HJC41gY"></script>
      

      var $labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
      var $labelIndex = 0;

      function initialize() {
        var $bangalore = { lat: 12.97, lng: 77.59 };
        var $map2 = new google.maps.Map(document.getElementById('map2'), {
          zoom: 12,
          center: $bangalore,
        });

        google.maps.event.addListener($map2, 'click', function(event) {
          addMarker(event.latLng, $map2);
        });

        addMarker($bangalore, $map2);
      }

      function addMarker(location, map) {
        var $marker = new google.maps.Marker({
          position: location,
          label: $labels[$labelIndex++ % $labels.length],
          map: map
        });
      }

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

      

加入icon

      var $map3 = new google.maps.Map(document.getElementById('map3'), {
        zoom: 4,
        center: {lat: -33, lng: 151}
      });

      var $image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
      var $beachMarker = new google.maps.Marker({
        position: {lat: -33.890, lng: 151.274},
        map: $map3,
        icon: $image
      });
      

加入複雜icon

    function initMap() {
      var $map4 = new google.maps.Map(document.getElementById('map4'), {
        zoom: 10,
        center: {lat: -33.9, lng: 151.2}
      });

      setMarkers($map4);
    }

    var beaches = [
        ['Bondi Beach', -33.890542, 151.274856, 4],
        ['Coogee Beach', -33.923036, 151.259052, 5],
        ['Cronulla Beach', -34.028249, 151.157507, 3],
        ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
        ['Maroubra Beach', -33.950198, 151.259302, 1]
    ];

    function setMarkers(map) {
      var image = {
        url: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
        //寬高
        size: new google.maps.Size(20, 32),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(0, 32)
      };
      //定義可點擊範圍
      var shape = {
        coords: [1, 1, 1, 20, 18, 20, 18, 1],
        type: 'poly'
      };
      for (var i = 0; i < beaches.length; i++) {
        var beach = beaches[i];
        var marker = new google.maps.Marker({
          position: {lat: beach[1], lng: beach[2]},
          map: map,
          icon: image,
          shape: shape,
          title: beach[0],
          zIndex: beach[3]
        });
      }
    }