如何更改我网站中的谷歌地图标记

Question

如何更改谷歌地图标记并在我的网站中添加两个标记。

目前我正在使用以下代码：

function init_map(lat,lng,ZmLevel) {
   var myOptions = {
      zoom:ZmLevel,center:new google.maps.LatLng(lat,lng),
      mapTypeId: google.maps.MapTypeId.ROADMAP
   };

   map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);        
   <?php 
      $sql = "select * from locator_areas where cid=$city";
      $res = mysql_query($sql);
      while($row=mysql_fetch_assoc($res)) {
   ?>
         marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(<?php echo $row['latitude']; ?>,<?php echo $row['longitude']; ?>)});

         infowindow = new google.maps.InfoWindow({
            content:'<div style="color:#000000;"><?php echo str_replace("\'","`",$row['address']); ?></div>'
         });

         bindInfoWindow(marker, map, infowindow);

   <?php }?>
}

function bindInfoWindow(marker, map, infowindow) {
   google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map,marker);
   });
}

function loadCity() {
   var cid = $('#city_name').val();
   window.location = "?cid="+cid;
}

我想更改标记，并想为公司的一些新开张网点再添加一个标记

Answer 1

要指定这样的图标，请将标记的图标属性设置为图像的 URL。 Google Maps API 会自动调整图标大小。

 var marker = new google.maps.Marker({
                map: map,
                position: new google.maps.LatLng(<?=$row['latitude']?>,<?=$row['longitude']?>), 
                icon: imageURL

 });

请阅读this article添加多个标记

Answer 2

要自定义marker 的图像，您可以将icon 属性传递给Marker 承包商。当然，如果你想创建一个markers“组”，只需将所有组的标记设置为相同的图像即可。

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

  var pos = [
    {
      location: {lat: -25.463882, lng: 120.047922},
      image: 'http://cdn1.iconfinder.com/data/icons/Map-Markers-Icons-Demo-PNG/32/Map-Marker-Marker-Outside-Pink.png'
    },
    {
      location: {lat: -25.763882, lng: 130.844992},
      image: 'http://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/Map-Marker-Ball-Azure-icon.png'
    }
  ];

  for (var i in pos) {
    var marker = new google.maps.Marker({
      position: pos[i].location,
      icon: pos[i].image,
      map: map
    });  
  }
}

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

<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap&signed_in=true" async defer></script>