All geek questions in one place

A good way to load multiple lat / long points from a database into google map markers?

I have a table containing several addresses, including their Lat / Long coordinates, and I want to place many of these markers directly on the google map using the asp.net web forms and the Google Maps V3 Javascript API.

The tutorials show how to add one marker:
http://code.google.com/apis/maps/documentation/javascript/overlays.html#Markers

 var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
  var myOptions = {
    zoom: 4,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  var marker = new google.maps.Marker({
      position: myLatlng, 
      map: map, 
      title:"Hello World!"
  });

My question is, after I loaded a lot of servers with multiple addresses (codebehind), what is a good way to output this set in html, so that client-side javascript can iterate the collection and placemarks on the map.

Update

, html , script? ( script , .) javascript, json, ? , .

+3
5

, .

, , API v3:

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Multiple Markers</title> 
  <script src="http://maps.google.com/maps/api/js?sensor=false" 
          type="text/javascript"></script>

  <script type="text/javascript">

    var map;

    // Cretes the map
    function initialize() {
      map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: new google.maps.LatLng(-33.92, 151.25),
        mapTypeId: google.maps.MapTypeId.ROADMAP
      });
    }

    // This function takes an array argument containing a list of marker data
    function generateMarkers(locations) {
      for (var i = 0; i < locations.length; i++) {  
        new google.maps.Marker({
          position: new google.maps.LatLng(locations[i][1], locations[i][2]),
          map: map,
          title: locations[i][0]
        });
      }
    }
  </script>

</head> 
<body> 
  <div id="map" style="width: 500px; height: 400px;"></div>
</body>
</html>

script <body>.

<body> 
  <div id="map" style="width: 500px; height: 400px;"></div>

  <script type="text/javascript">
    window.onload = function () {
      initialize();
      generateMarkers(
        ['Bondi Beach', -33.890542, 151.274856],
        ['Coogee Beach', -33.923036, 151.259052],
        ['Cronulla Beach', -34.028249, 151.157507],
        ['Manly Beach', -33.800101, 151.287478],
        ['Maroubra Beach', -33.950198, 151.259302]
      );
    };
  </script>
</body>

['Bondi Beach', -33.890542, 151.274856] ... , . , .

+6

, . script, JSON lat. , , .

, , . , , .

0

, generateMarkers . [i] [1] generateMarkers, . json. .

generateMarkers([
 {'0':'Bondi Beach', '1':-33.890542, '2':151.274856},
 {'0':'Coogee Beach', '1':-33.923036, '2':151.259052},
 {'0':'Cronulla Beach', '1':-34.028249, '2':151.157507},
 {'0':'Manly Beach', '1':-33.800101, '2':151.287478},
 {'0':'Maroubra Beach', '1':-33.950198, '2':151.259302}
]);
0

:

<script type="text/javascript">
    var arr = [
            ['Bondi Beach', -33.890542, 151.274856],
            ['Coogee Beach', -33.923036, 151.259052],
            ['Cronulla Beach', -34.028249, 151.157507],
            ['Manly Beach', -33.800101, 151.287478],
            ['Maroubra Beach', -33.950198, 151.259302]
    ]
        window.onload = function () {
          initialize();
          generateMarkers(arr);
        };

      </script>
0

Source: https://habr.com/ru/post/1754932/

More articles:


All Articles