Skip to content Skip to sidebar Skip to footer

Setcenter With Array Values - Google Maps Api

I am trying to the values of an Javascript multidimensional array in a HTML menu with setCenter. HTML Menu Sample
  • <li><aonclick="map.setCenter(new google.maps.LatLng(cityList[0][1], cityList[0][2])); return false"><script>document.write(cityList[0][0]);</script></a></li>

    working code snippet:

    var map;
    var cityList = [
      ['Atlanta, GA', 33.840644, -84.238972, 1, "text 0"],
      ['Austin, TX', 30.402887, -97.721606, 2, "text 1"],
      ['Boston, MA', 42.364247, -71.078575, 3, "text 2"],
      ['Chicago, IL', 41.898111, -87.638394, 4, "text 3"]
    ];
    
    functioninitialize() {
      var mapOptions = {
        zoom: 6,
        center: new google.maps.LatLng(46.8, 1.7),
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
    
      map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
    
      setMarkers(map, cityList);
    }
    
    functionsetMarkers(map, locations) {
      var bounds = new google.maps.LatLngBounds();
      var image = 'http://maps.google.com/mapfiles/ms/icons/blue.png';
      for (var i = 0; i < locations.length; i++) {
        var city = locations[i];
        var myLatLng = new google.maps.LatLng(city[1], city[2]);
        bounds.extend(myLatLng);
        var infoWindow = new google.maps.InfoWindow();
        var marker = new google.maps.Marker({
          position: myLatLng,
          map: map,
          icon: image
        });
        document.getElementById('sidebar').innerHTML += '<li><a onclick="map.setCenter(new google.maps.LatLng(' + city[1] + ',' + city[2] + ')); return false">' + city[0] + '</a></li>';
    
        (function(i) {
          google.maps.event.addListener(marker, "click", function() {
            var galeries = locations[i];
            infoWindow.close();
            infoWindow.setContent(
              "<div id='boxcontent'><a href='" + city[0] + "'><strong style='color:black'>" + galeries[0] + "</strong></a><br />" + city[4] + "</div>");
            infoWindow.open(map, this);
          });
        })(i);
      }
      map.fitBounds(bounds);
    }
    
    google.maps.event.addDomListener(window, 'load', initialize);
    html,
    body,
    #map_canvas {
      height: 100%;
      width: 100%;
      margin: 0px;
      padding: 0px
    }
    <scriptsrc="https://maps.googleapis.com/maps/api/js"></script><tableborder="1"style="height:100%; width:100%"><trstyle="height:100%; width:100%"><tdstyle="height:100%; width:80%"><divid="map_canvas"style="border: 2px solid #3872ac;"></div></td><tdstyle="height:100%; width:20%"><divid="sidebar"></div></td></tr></table>
  • Post a Comment for "Setcenter With Array Values - Google Maps Api"