Is there better way to make google map work?

Question

I'm using cakephp and this project is about estates. I'm trying to put estates with picture on google map. My current code is like

<script>
    var map;
    var infoWindow;
    function initMap() {
      map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: 36.591258, lng: 136.624976},
        zoom: 9,
        styles:[
          {
              "featureType": "landscape",
              "elementType": "all",
              "stylers": [
                  {
                      "color": "#e4e4e4"
                  }
              ]
          },
          {
              "featureType": "poi",
              "elementType": "all",
              "stylers": [
                  {
                      "visibility": "off"
                  }
              ]
          },
          {
              "featureType": "road",
              "elementType": "all",
              "stylers": [
                  {
                      "saturation": -100
                  },
                  {
                      "lightness": 45
                  }
              ]
          },
          {
              "featureType": "road.highway",
              "elementType": "all",
              "stylers": [
                  {
                      "visibility": "simplified"
                  }
              ]
          },
          {
              "featureType": "road.highway",
              "elementType": "geometry.fill",
              "stylers": [
                  {
                      "color": "#fc9700"
                  }
              ]
          },
          {
              "featureType": "road.arterial",
              "elementType": "geometry.fill",
              "stylers": [
                  {
                      "color": "#c5c5c5"
                  }
              ]
          },
          {
              "featureType": "road.arterial",
              "elementType": "labels.icon",
              "stylers": [
                  {
                      "visibility": "off"
                  }
              ]
          },
          {
              "featureType": "road.local",
              "elementType": "all",
              "stylers": [
                  {
                      "visibility": "on"
                  }
              ]
          },
          {
              "featureType": "transit",
              "elementType": "all",
              "stylers": [
                  {
                      "visibility": "off"
                  }
              ]
          },
          {
              "featureType": "water",
              "elementType": "all",
              "stylers": [
                  {
                      "color": "#999797"
                  },
                  {
                      "visibility": "on"
                  }
              ]
          }
      ],
      });
      <?php foreach ($rooms as $k => $room): ?>
          var marker = new google.maps.Marker({
              position: {lat: <?= h($room['estate_latitude']) ?>, lng: <?= h($room['estate_longitude']) ?>},
              map: map,
              icon: new google.maps.MarkerImage(
                 '<?= $this->Url->build('/') ?>img/ico_pin.svg',
                  new google.maps.Size(30, 30),
                  new google.maps.Point(0, 0),
                  new google.maps.Point(21, 21)
              ),  
          });
          infoWindow<?= $k ?> = new google.maps.InfoWindow({
            content: '<div class="area_wall_balloon"></div><div class="img_arrow"></div>'
          });
           marker.addListener('click', function() {
           infoWindow<?= $k ?>.open(map, marker);
          });
      <?php endforeach; ?>
      var mapStyle = [ {
          "stylers": [ {
          "saturation": -100,
          } ],
      } ];
    }
</script>

enter image description here The problem that I'm trying to solve is that when I click 2, 1's window shows up :( I added the screenshot. I would appreciate it if you could give me advices.

using a php loop to make javascript code is probably a bad idea - look at the code you generated *in the browser* and if you know javascript, you'll see the problem — Jaromanda X, Apr 27 '20 at 09:27

score 0 · Accepted Answer · answered Apr 27 '20 at 09:35

0

You are totally mixing JavaScript and PHP. As I am seeing you you are creating multiple events for multiple markers. Means if there are 1000 markers then why are you using 1000 event triggers. For this use only one event which render the markers details.

answered Apr 27 '20 at 09:35

Devansh

52
7

Yeah I was thinking that I need to make 1000 event triggers if there are 1000 markers. How should I make only one event which render the markers details? – Wes Apr 27 '20 at 09:39
Just pass event in the callback and check events data. – Devansh Apr 27 '20 at 09:43
Could you give me some sample code? – Wes Apr 27 '20 at 13:08

Is there better way to make google map work?

1 Answers1