adding multiple points to a map using v3 of the Javascript API

demo

1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
   
2. <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
   
3. <script type="text/javascript">
   
4.     $(document).ready(function() { initialize(); });
   
5. 
   
6.     function initialize() {
   
7.         var map_options = {
   
8.             center: new google.maps.LatLng(33.84659,-84.35686),
   
9.             zoom: 14,
   
10.             mapTypeId: google.maps.MapTypeId.ROADMAP
    
11.         };
    
12. 
    
13.         var google_map = new google.maps.Map(document.getElementById("map_canvas"), map_options);
    
14. 
    
15.         var info_window = new google.maps.InfoWindow({
    
16.             content: 'loading'
    
17.         });
    
18. 
    
19.         var t = [];
    
20.         var x = [];
    
21.         var y = [];
    
22.         var h = [];
    
23. 
    
24.         t.push('Location Name 1');
    
25.         x.push(33.84659);
    
26.         y.push(-84.35686);
    
27.         h.push('<p><strong>Location Name 1</strong><br/>Address 1</p>');
    
28. 
    
29.         t.push('Location Name 2');
    
30.         x.push(33.846253);
    
31.         y.push(-84.362125);
    
32.         h.push('<p><strong>Location Name 2</strong><br/>Address 2</p>');
    
33. 
    
34.         var i = 0;
    
35.         for ( item in t ) {
    
36.             var m = new google.maps.Marker({
    
37.                 map:       google_map,
    
38.                 animation: google.maps.Animation.DROP,
    
39.                 title:     t[i],
    
40.                 position:  new google.maps.LatLng(x[i],y[i]),
    
41.                 html:      h[i]
    
42.             });
    
43. 
    
44.             google.maps.event.addListener(m, 'click', function() {
    
45.                 info_window.setContent(this.html);
    
46.                 info_window.open(<code><span class="pln">google_map</span></code>, this);
    
47.             });
    
48.             i++;
    
49.         }
    
50.     }
    
51. </script>
    
52. <div id="map_canvas" style="width:400px;height:400px;">Google Map</div>

复制代码

You may also consider Geographic Information Systems

demo

Batchgeo.com is great!  Here's a couple of things I learned: 1) Before uploading to www.batchgeo.com, you can add or remove any columns you want.  And, (2) you have to have the first column named "Title" in your spreadsheet before you upload it to www.batchgeo.com.  Any column heading other than "Title" will return the question mark for the title of the marker.  (I had tried "Customer".  Got a "?")  Obviously, what you put in the "Title" column is what will return as the title on the marker.  (I only figured this out AFTER I entered 141 customer names into the title area of the markers.)

1.        Go to www.batchgeo.com.
2.        Copy the Contact List from the Excel spreadsheet and paste into the area indicated on the batchgeo.com screen.
3.        Click “Map Now” button.
4.        Click “Run Geocoder” button.
5.        Save the results as a KML file to your hard drive by clicking “Google Earth KML” button.
6.        Go to www.maps.google.com
7.        Sign into your account.
8.        Click “My Maps” then “Create new map”
9.        Name the map and (CAREFUL) choose “Public” (all info goes on the web) or “Unlisted” (info is only shared with those you send the link to.)
10.        Now click “Import” and locate the file on the drive.  Click “Open” then “Upload File”.
11.        Make changes to the title, icons, etc as needed.
12.        Click “Save” periodically.  (Learned from experience.)
13.        Click “Done” when done and sign out of the account.
14.        Now you can use the “Send” link at the upper right corner of the map to send the link to others.