Как изменить маркер карты google на моем сайте

Question

Как изменить маркер карты google и добавить два маркера на мой сайт.

В настоящее время я использую следующий код:

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-адрес изображения. API Карт Google автоматически изменит размер значка.

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

}); 

Пожалуйста, ознакомьтесь с this article добавить несколько маркеров

Answer 2

Чтобы настроить изображение вы можете передать 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>