Change icon mark of google maps API

Question

Change icon mark of google maps API

Navigation

#1 by (1 votes)

0

I have a map with custom markers taken from a MySQL database. With this code inserted inside the variable locations the coordinates directions of my table.

var locations = [
      <?php
        foreach ($rows as $row) {
       ?>
      <?php if ($row['parametro'] != "5"): ?>
        <?php echo "{lat: " . $row['lat'] . ", lng: " . $row['lng'] . "},"; ?>
       <?php endif; ?>
      <?php } ?>
      ]

It would stay this way

var locations = [
        {lat: 51.958623, lng: -0.159154},
        {lat: 51.958623, lng: -0.159154},
        {lat: 51.958623, lng: -0.159154},
        etc etc etc
      ]

And it works correctly, but I would like to know how to change the icons of brands like this, in custom icons

This is the complete code

var map = new google.maps.Map(document.getElementById('map'), {
              zoom: 8,
              center: {lat: 41.6041581, lng: -3.980962}
            });

            var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';


            var markers = locations.map(function(location, i) {
              return new google.maps.Marker({
                position: location,
                label: labels[i % labels.length]
              });
            });

            var markerCluster = new MarkerClusterer(map, markers,
                {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
          }

javascript php google-maps

asked by Tefef 19.09.2018 в 12:15

source

1 answer

Problems when consulting the database with a Laravel drop-down list Call javascript function from a string

score 1 · Accepted Answer

As it is in the documentation of the Google Maps API the image of the icons is set in the configuration of the objects Marker .

In your case it would be something such that;

var map = new google.maps.Map(document.getElementById('map'), {
              zoom: 8,
              center: {lat: 41.6041581, lng: -3.980962}
            });

            var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

            //Guardar el icono o imagen en una variable
            var img = "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png"
            
            var markers = locations.map(function(location, i) {
              return new google.maps.Marker({
                position: location,
                label: labels[i % labels.length],
                //Añadir en la configuracion
                icon: img
              });
            });

            var markerCluster = new MarkerClusterer(map, markers,
                {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
          }