Google Maps API - Add List of Markers

From NoskeWiki
Jump to: navigation, search
Displaying ~25 randomly generated points - but goes to 1000 easily.

About

NOTE: This page is a daughter page of: Google Maps API


This piece of code allows you add a bunch of markers onto a map, by giving lat, lng and htmlContents to display when the icon is clicked. I tested on 1000 icons and it worked pretty smoothly - you just need to enter them in the text box on the left in tab-separated form (lat, lng, contents)... and you might want to alter the code to chose a smaller or larger custom icon.

WARNING: If you want to display 100,000s of markers you may need to use one of the recommended clustering approaches to render them on the map - as too many png will otherwise slow it down. I recommend js-marker-clusterer as one I'm *fairly sure* (but not certain) I've used once before.

Add a Large Number of Custom Map Markers to the Map

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <title>Add List of Markers</title>
  <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
 
<style>
html, body, #map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px
  }
textarea {
  vertical-align: top;
  font-size: 50%;
}
</style>
 
<script type="text/javascript">
var map;  // Google map element.
 
/*
 * Initializes 'map' element.
 */
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
                            zoom: 1,
                            center: new google.maps.LatLng(0, 0),
                            mapTypeId: google.maps.MapTypeId.ROADMAP
                            });
}
 
 
/**
 * Adds points from 'txt-locations' onto the map as markers.
 */
function addLocationsToMap() {
  var input = document.getElementById('txt-locations').value;
  var location_lines = input.split("\n");
 
  var infowindow = new google.maps.InfoWindow();
 
  var image = {
    url: 'http://andrewnoske.com/hidden/google_maps/icons/red_dot_4x4.png',
    size: new google.maps.Size(18, 18),   // Icon size.
    origin: new google.maps.Point(0, 0),  // Icon origin.
    anchor: new google.maps.Point(9, 9)   // Anchor in middle.
  };
 
  var lat, lng, htmlContent;
  for (var i = 0; i < location_lines.length; i++) {
    var location = location_lines[i].split("\t");
    if (location.length < 2)
      continue;
    lat = parseFloat(location[0].trim());
    lng = parseFloat(location[1].trim());
    htmlContent = (location.length >= 2) ? location[2].trim() : '';
    addMarkerToMap(map, infowindow, i, lat, lng, htmlContent, image);
  }
}
 
 
/**
 * Adds a marker to the map.
 * @param {google.maps.Map} mapElement Map to add marker to.
 * @param {google.maps.InfoWindow} infowindow InfoWindow for displaying content.
 * @param {integer} i Level for listener. Should increment each time.
 * @param {float} lat Latitude.
 * @param {float} lng Longitude.
 * @param {string} htmlContent Html string to show when marker is click.
 *     Leave empty string for no listener.
 * @param {Object} imageIcon Image to use for icon, set as nothing to use
 *     default icon.
 */
function addMarkerToMap(mapElement, infowindow, i,
                        lat, lng, htmlContent, imageIcon) {
  var marker = new google.maps.Marker({
      position: new google.maps.LatLng(lat, lng),
      map: mapElement
  });
 
  if (imageIcon) {
    marker.setIcon(imageIcon);
  }
 
  if (htmlContent) {
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            infowindow.setContent(htmlContent);
            infowindow.open(mapElement, marker);
        }
    })(marker, i));
  }
}
 
</script>
 
</head>
<body>
  <table style="width:100%; height: 100%;">
    <tr>
      <td style="width:100px; vertical-align:text-top;">
  <div id="panel">
    <textarea id="txt-locations" rows="20" cols="60" wrap="off"
        title="Add list in tab seperated form: lat   lng   [htmlContent]">
-33.890542	151.274856	<b>Bondi</b>, NSW, Australia
26.142025	-81.809510	<b>Naples</b>, FL, USA</textarea><br>
    <input id="btn-addmarkers" type="button" value="Add Markers >" onclick="addLocationsToMap()">
  </div>
      </td>
      <td>
 
  <div id="map" style="height: 100%;"></div>
      </td>
    </tr>
  </table>
 
<script>
initMap();
</script>
 
</body>
</html>
 
<!-- ACKNOWLEDGEMENTS:
Based on code from: https://developers.google.com/maps/documentation/javascript/markers#complex_icons !-->


See Also


Links