javascripthtmlgoogle-maps-api-3google-maps-markers

Google Maps API - show marker from select


I have Google maps on site (www.maclife.pl/pl/kontakt) with 4 markers. I don't know how I can move map between markers when I change select options (like First marker...)

    var map;
    function initialize(){
        var mapOptions = {
            scrollwheel: false,
            zoom: 15,
            center: new google.maps.LatLng(52.2081935, 21.0220677)
        };
        map = new google.maps.Map(document.getElementById('google-maps'), mapOptions);

        var markers = [
            ['MacLife - Warszawa, Puławska', 52.2082716, 21.0218746, ''],
            ['MacLife - Warszawa, Łukowska', 52.2360077, 21.1121838, ''],
            ['MacLife - Warszawa, Jana Pawła II', 52.250402, 20.986717, ''],
            ['MacLife - Radom, B. Chrobrego', 51.4063449, 21.155306, '']
        ];

        for (var i = 0; i < markers.length; i++){
            marker=addMarker(i);
        }

        google.maps.event.trigger(addMarker(2) ,'click');

        function addMarker(i){
            var draftMarker = markers[i];
            var myLatLng = new google.maps.LatLng(draftMarker[1], draftMarker[2]);
            var marker = new google.maps.Marker({
                position: myLatLng,
                map: map,
                title: draftMarker[0]
            });

            google.maps.event.addListener(marker, 'click', function(){
                info.setContent(draftMarker[3]);
                info.open(map,marker);
            });
            return marker;
        }
    }

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

Solution

    1. create an array to hold references to the google.maps.Marker objects in the global scope:

      var gmarkers = [];

    2. push your markers onto that array when you create them:

       function addMarker(i) {
           var draftMarker = markers[i];
           var myLatLng = new google.maps.LatLng(draftMarker[1], draftMarker[2]);
           var marker = new google.maps.Marker({
               position: myLatLng,
               map: map,
               title: draftMarker[0]
           });
           google.maps.event.addListener(marker, 'click', function () {
               info.setContent(draftMarker[3]);
               info.open(map, marker);
           });
           gmarkers.push(marker);
           return marker;
       }
      
    1. If you want a sidebar or a dropdown, create it dynamically when you create the marker:

      function addMarker(i) {
          var draftMarker = markers[i];
          var myLatLng = new google.maps.LatLng(draftMarker[1], draftMarker[2]);
          var marker = new google.maps.Marker({
              position: myLatLng,
              map: map,
              title: draftMarker[0]
          });
          google.maps.event.addListener(marker, 'click', function () {
              info.setContent(draftMarker[3]);
              info.open(map, marker);
          });
          gmarkers.push(marker);
          side_bar_html += '<option value=' + (gmarkers.length-1) + '>' + draftMarker[0] + '<\/option>';
          return marker;
      }
      

    working fiddle

    code snippet:

    var map;
    var info = new google.maps.InfoWindow();
    var gmarkers = [];
    var side_bar_html = "";
    
    function initialize() {
        var mapOptions = {
          scrollwheel: false,
          zoom: 15,
          center: new google.maps.LatLng(52.2081935, 21.0220677)
        };
        map = new google.maps.Map(document.getElementById('google-maps'), mapOptions);
    
        var markers = [
          ['MacLife - Warszawa, Puławska', 52.2082716, 21.0218746, '0'],
          ['MacLife - Warszawa, Łukowska', 52.2360077, 21.1121838, '1'],
          ['MacLife - Warszawa, Jana Pawła II', 52.250402, 20.986717, '2'],
          ['MacLife - Radom, B. Chrobrego', 51.4063449, 21.155306, '3']
        ];
    
        for (var i = 0; i < markers.length; i++) {
          marker = addMarker(i);
        }
    
        // put the assembled side_bar_html contents into the side_bar div
        document.getElementById("side_bar").innerHTML = "<select onchange='myclick(this.value);'>" + side_bar_html + "</select>";
    
        google.maps.event.trigger(gmarkers[2], 'click');
        map.setCenter(gmarkers[2].getPosition());
    
        function addMarker(i) {
          var draftMarker = markers[i];
          var myLatLng = new google.maps.LatLng(draftMarker[1], draftMarker[2]);
          var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            title: draftMarker[0]
          });
    
          google.maps.event.addListener(marker, 'click', function() {
            info.setContent(draftMarker[3]);
            info.open(map, marker);
          });
          gmarkers.push(marker);
          side_bar_html += '<option value=' + (gmarkers.length - 1) + '>' + draftMarker[0] + '<\/option>';
    
          return marker;
        }
      }
      // This function picks up the click and opens the corresponding info window
    
    function myclick(i) {
      map.setCenter(gmarkers[i].getPosition());
      google.maps.event.trigger(gmarkers[i], "click");
    }
    
    google.maps.event.addDomListener(window, 'load', initialize);
    html,
    body,
    #google-maps {
      height: 500px;
      width: 500px;
      margin: 0px;
      padding: 0px
    }
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
    <div id="google-maps" style="border: 2px solid #3872ac;"></div>
    <div id="side_bar"></div>