google map api multi markers

Question

i have to make a map for a company and i have to put the company logo on one marker, and a container icon on 10 others markers but i don' t know how to do it: this is my current code : ( so i have the first marker with my logo but its a personal image so can't see the marker ) do i have to make a new variable like "marker2" ? and make new variables for each position of the icons ?

var nice = new google.maps.LatLng(43.7101728,7.2619532);
var centre = new google.maps.LatLng(43.7101728,7.2619532);
var marker;
var map;

function initialize() { 
  var mapOptions = {
    zoom: 14,
    center: nice,

                };

  

  map = new google.maps.Map(document.getElementById('map-canvas'),
          mapOptions);

  marker = new google.maps.Marker({
    map:map,
    draggable:false,
    animation: google.maps.Animation.DROP,
    position: centre,
 icon:'image/abi06B.png'
  });
  
  
  
  google.maps.event.addListener(marker, 'click', toggleBounce);
}

function toggleBounce() {

  if (marker.getAnimation() != null) {
    marker.setAnimation(null);
  } else {
    marker.setAnimation(google.maps.Animation.BOUNCE);
  }
}

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

   

#map-canvas { 
       position: absolute;    
       height: 100%;
       width:100%;
  
}

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>


  <div id="map-canvas">
    </div>

Answer 1

to answer your question of
do i have to make a new variable like "marker2" ?
it would be a yes and a no.

It seem like you might not be 100% sure about what these code does:

  map = new google.maps.Map(document.getElementById('map-canvas'),
          mapOptions);

  marker = new google.maps.Marker({
    map:map,
    draggable:false,
    animation: google.maps.Animation.DROP,
    position: centre,
    icon:'image/abi06B.png'
  });

the map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); line, if for creating a google map in the 'map-canvas' element, and this function returns a reference to the map object, so that you can modify it later.

then, marker = new google.maps.Marker({ map:map,..... makes a marker with the settings you provided, which include title, or the icon image. This function also return a reference, which is a reference to the marker you just created, which is used for future modification you might need for your marker (changing the icon, or deleting)

so.. you need to do new google.maps.Marker a few (10) times, probably in a loop. But if you don't need the reference for modifying your markers later on, you don't need to make marker2, you can just use marker

Answer 2

actually i find a solution, it' s look .... amateurism but it s work

function initialize() {
  var mapOptions = {
    zoom: 14,
    center: new google.maps.LatLng(43.7101728,7.2619532)
  }
  var map = new google.maps.Map(document.getElementById('map-canvas'),
                                mapOptions);

  var image = 'image/abi06map.png';
  var image2 = 'image/garbage3.png';
  var Abi = new google.maps.Marker({
      position: new google.maps.LatLng(43.7101728,7.2619532),
      map: map,
      icon: image
  });
  var Container1 = new google.maps.Marker({
      position: new google.maps.LatLng(43.301728,7.2219532),
      map: map,
      icon: image2
  });
  
  var Container2 = new google.maps.Marker({
      position: new google.maps.LatLng(43.301728,7.2219532),
      map: map,
      icon: image2
  });
  
  var Container3 = new google.maps.Marker({
      position: new google.maps.LatLng(43.301728,7.2219532),
      map: map,
      icon: image2
  });
  
  var Container4 = new google.maps.Marker({
      position: new google.maps.LatLng(43.301728,7.2219532),
      map: map,
      icon: image2
  });
  
  var Container5 = new google.maps.Marker({
      position: new google.maps.LatLng(43.301728,7.2219532),
      map: map,
      icon: image2
  });
  
  var Container6 = new google.maps.Marker({
      position: new google.maps.LatLng(43.301728,7.2219532),
      map: map,
      icon: image2
  });
  
  var Container7 = new google.maps.Marker({
      position: new google.maps.LatLng(43.301728,7.2219532),
      map: map,
      icon: image2
  });
  
  var Container8 = new google.maps.Marker({
      position: new google.maps.LatLng(43.301728,7.2219532),
      map: map,
      icon: image2
  });
  
  var Container9 = new google.maps.Marker({
      position: new google.maps.LatLng(43.301728,7.2219532),
      map: map,
      icon: image2
  });
  
  var Container10 = new google.maps.Marker({
      position: new google.maps.LatLng(43.301728,7.2219532),
      map: map,
      icon: image2
  });
  
  var Cannes = new google.maps.Marker({
      position: new google.maps.LatLng(43.301728,7.2219532),
      map: map,
      icon: image1
  });
  
}

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