Javascript Question posted in
A very good W3school tutorial can be found here.

Google maps api | Advanced marker (javascript) – change color to the marker

Good morning everyone, I have a problem that I can’t solve.

I would like to be able to change color to google maps markers from html/javascript.

I tried to follow the online documentation, but I didn’t understand much about it (I know I could put it via icon, but that doesn’t really satisfy me, from the documentation it seems that you can just customize the marker).

Following the documentation, I added the marker library in my script that links to the api.

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MY_KEY&callback=initMap&sensor=false&language=it&libraries=marker"></script>

Then I create my script to insert the marker (this is my basic working script, so without the advanced markers)

<script type="text/javascript">
function carica_variabili() {

//definizione coordinate su cui centrare la mappa
//inizializzazione vettori
var lat = new Array();
var long = new Array();
var descr = new Array();
var icona = new Array();

 lat[0]="44.8814093";
 long[0]="10.9912888";
 descr[0]="TCA PRODUCTION Srl (004176)";

 lat[1]="45.5193158";
 long[1]="10.1769702";
 descr[1]="GRAZIOLI SRL (007484)";

var lat_centro = lat[0];
var long_centro = long[0];

//Opzioni della mappa: zoom livello 14, centrata su un punto particolare,
var Opzioni = {
        zoom: 8, center: new google.maps.LatLng(lat_centro, long_centro),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scaleControl: false   }

var map = new google.maps.Map(document.getElementById("map_canvas"), Opzioni);
//ciclo FOR per la lettura dei valori dei vettori e relativa visualizzazione su
//mappa
var i = 0;
for (i=0; i<lat.length; i++)
    { // var marker = new google.maps.marker({
        var marker = new google.maps.Marker({
      position: new google.maps.LatLng(lat[i], long[i]),
      map: map,
      label: "A",
      //animation: google.maps.Animation.DROP,
      title: descr[i]});

      }

}
</script>

Have any of you worked with these markers before, do you have any idea how they work?

I had tried adding a PinElement and putting it as “content:” inside my for loop (changing the marker creation from “var marker = new google.maps.Marker” to “var marker = new google.maps.marker.AdvancedMarkerElement”)

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    So, here what i've found:

    Apparently to use AdvancedMarkers you need to have a mapId, without it it doesn't work (I purposely decided not to put it in because I didn't think it was necessary)

    So once I create my map with the appropriate id.

    var Opzioni = {
    zoom: 8, center: new google.maps.LatLng(lat_centro, long_centro),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    scaleControl: false,
    mapId:"MY_ID"}

    var map = new google.maps.Map(document.getElementById("map_canvas"), Opzioni);

    I went into my for loop to write precisely the pinElement and there it was, all working!

    var i = 0;
for (i=0; i<lat.length; i++)
   {(function(i){ // var marker = new google.maps.marker({
   const pinBackground = new google.maps.marker.PinElement({
   background: color[i]
});
    
var marker = new google.maps.marker.AdvancedMarkerElement({
  position: new google.maps.LatLng(lat[i], long[i]),
  map: map,
  //animation: google.maps.Animation.DROP,
  title: descr[i],
  content: pinBackground.element
  });
  
if (contentString[i]) {
    const infowindow = new google.maps.InfoWindow({
        content: contentString[i],
        ariaLabel: descr[i]
});

marker.addListener("click", () => {
infowindow.open({
  anchor: marker,
  map});
        });
    }
})(i);
}}

    Here the result


  2. 0

    When I first encounter something I do not know or fully understand I usually try to work my way from examples.

    You can get example code from here: https://developers.google.com/maps/documentation/javascript/markers#maps_marker_simple-javascript

    here an example of setting a custom icon: https://developers.google.com/maps/documentation/javascript/markers#icons

    I like SGV format icons because it saves me the trouble of having to setup files and load them from the scripts. From there I can define color, shape, size.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search