title: Draw particular elements on a map
body: <p><img src="https://i.stack.imgur.com/sBXsW.png" alt="&quot;image map&quot;.">
  The symbols on the map are custom markers that I added to the map thanks to Google API. </p>
  
  <p>To set their position, I use some coords stored in my database. </p>
  
  <p>I want to change it with some rectangles like this:</p>
  
  <p><img src="https://i.stack.imgur.com/bUAFr.png" alt="image"></p>
  
  <p>I can't use one unique "sample rectangle" to repeat, because it will not follow the road orientation.</p>
  
  <p>This is my code (PHP/JavaScript).</p>
  
  <pre><code>&lt;?php 
  $array_sensori = array();
  $array_sensori = SensoreDAO::readArrayAllSensori($_SESSION['id_comune'], 0; ?&gt;
     &lt;script&gt;
  function initMap() {
      var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 20,
      mapTypeId: 'terrain',
      mapTypeControl: false,
      styles: [{featureType: "poi", elementType: "labels", stylers: [{ visibility: "off" }]}, {featureType: "landscape", stylers: [{ visibility: "simplified"}]}],
      streetViewControl: false,
      center: segn
  });
  &lt;?php /*
  var marker = new google.maps.Marker({
      position: segn,
      map: map
  }); */
  ?&gt;
  &lt;?php 
  $i = 1;
  $sensore = new Sensore();       
  
  foreach ($array_sensori as $sensore){
      echo 'var contentString'.$i.' = \'&lt;div id="content"&gt;\'+
                          \'&lt;h1 id="firstHeading" class="firstHeading"&gt;Sensore '.$sensore-&gt;getIdSens().'&lt;/h1&gt;\'+
                          \'&lt;div id="bodyContent"&gt;\'+
                          \'&lt;p&gt;Strada: '.StradaDAO::readStrada($sensore-&gt;getIdStrada()).'&lt;br&gt;\'+
                          \'Comune: '.ComuneDAO::readComune($sensore-&gt;getIdComune()).'&lt;/p&gt;\'+
                          \'&lt;/div&gt;&lt;/div&gt;\'
      ';
  
      $cambio_stato = new CambioStato();
  
      try{
          $cambio_stato = CambioStatoDAO::readLastById($sensore-&gt;getIdSens());
      }catch (DaoException $e){
          //echo "Caught LoginException ('{$e-&gt;getMessage()}')&lt;br&gt;{$e}&lt;br&gt;";
          $cambio_stato-&gt;setStato(0);
      }
  
      switch ($cambio_stato-&gt;getStato()){
          case 1:
              $ico ='Ico_Sensori_Occupato.png';
              break;
          case 0:
              $ico ='Ico_Sensori_Libero.png';
              break;
          }
  
      echo 'var infowindow'.$i.' = new google.maps.InfoWindow({
              content: contentString'.$i.'
              });
          var prev_infowindow =false;
  
          var icon_source =\'../main/images/'.$ico.'\';
  
          var marker'.$i.' = new google.maps.Marker({
              position: {lat: '.$sensore-&gt;getLatitudine().', lng: '.$sensore-&gt;getLongitudine().'},
              map: map,
              icon: icon_source,
              });
  
  
          marker'.$i.'.addListener(\'click\', function() {
              if( prev_infowindow ) {
                  prev_infowindow.close();
              }
  
              prev_infowindow = infowindow'.$i.';
              infowindow'.$i.'.open(map, marker'.$i.');
  
              if (marker'.$i.'.getAnimation() !== null) {
                   marker'.$i.'.setAnimation(null);
              } else {
                   marker'.$i.'.setAnimation(google.maps.Animation.BOUNCE);
              }
  
              setTimeout(function () {marker'.$i.'.setAnimation(null); }, 3000);
          });
  
      ';
      $i++;
  }?&gt;
  }
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>Explanation of my code.</strong></p>
  
  <ul>
  <li>I take from the DB an array with my elements,their coords and some info. (They are objects of a class "Sensore" )</li>
  <li>Than I initialize the map and for each element of the array I set a custom marker.</li>
  <li>CambioStato is to read the state of these sensors and based on it, I choose a different icon for the marker through the switch.</li>
  </ul>
  
  <p>How can I achieve my requirements?</p>
  
  <p>I tried to draw polylines. This fails unless I can change the shape of the line. i.e. square and with different colors borders. </p>
  
  <p>I tried to draw rectangles. This failed because I have a lot of sensor and to draw it with Google API I need the coordinates of the four vertices.</p>