如何添加一个谷歌地图标记

How to add a Google Map Marker

本文关键字:谷歌 地图 图标 一个 何添加 添加      更新时间:2023-09-26

我将这张地图添加到我的网站,地图工作正常,但我无法获得标记显示。

我尝试添加代码:

var marker = new google.maps.Marker({
              position: myLatLng,
              map: map,
              title: 'My Marker'
             });

但是没有显示。下面是我的全部代码:

        var map;
        var myLatLng = new google.maps.LatLng(36.7394266,-119.792913);
      var marker = new google.maps.Marker({
              position: myLatLng,
              map: map,
              title: 'My Marker'
             });
        function initialize() {
            var roadAtlasStyles = [
  {
      "featureType": "road.highway",
      "elementType": "geometry",
      "stylers": [
        { "saturation": -100 },
        { "lightness": -8 },
        { "gamma": 1.18 }
      ]
  }, {
      "featureType": "road.arterial",
      "elementType": "geometry",
      "stylers": [
        { "saturation": -100 },
        { "gamma": 1 },
        { "lightness": -24 }
      ]
  }, {
      "featureType": "poi",
      "elementType": "geometry",
      "stylers": [
        { "saturation": -100 }
      ]
  }, {
      "featureType": "administrative",
      "stylers": [
        { "saturation": -100 }
      ]
  }, {
      "featureType": "transit",
      "stylers": [
        { "saturation": -100 }
      ]
  }, {
      "featureType": "water",
      "elementType": "geometry.fill",
      "stylers": [
        { "saturation": -100 }
      ]
  }, {
      "featureType": "road",
      "stylers": [
        { "saturation": -100 }
      ]
  }, {
      "featureType": "administrative",
      "stylers": [
        { "saturation": -100 }
      ]
  }, {
      "featureType": "landscape",
      "stylers": [
        { "saturation": -100 }
      ]
  }, {
      "featureType": "poi",
      "stylers": [
        { "saturation": -100 }
      ]
  }, {
  }
            ]
            var mapOptions = {
                zoom: 14,
                center: myLatLng,
                mapTypeControlOptions: {
                    mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'usroadatlas']
                }
            };
            map = new google.maps.Map(document.getElementById('map-canvas'),
                mapOptions);
            var styledMapOptions = {
            };
            var usRoadMapType = new google.maps.StyledMapType(
                roadAtlasStyles, styledMapOptions);
            map.mapTypes.set('usroadatlas', usRoadMapType);
            map.setMapTypeId('usroadatlas');
        }
        google.maps.event.addDomListener(window, 'load', initialize);

try define map before marker:

map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);
var marker = new google.maps.Marker({
          position: myLatLng,
          map: map,
          title: 'My Marker'
         });