Google Maps API - Add List of Markers

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


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>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <title>Add List of Markers</title>
  <script src="" type="text/javascript"></script>

html, body, #map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px
textarea {
  vertical-align: top;
  font-size: 50%;

<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: '',
    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)
    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) {
  if (htmlContent) {
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
  , marker);
    })(marker, i));


  <table style="width:100%; height: 100%;">
      <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 id="map" style="height: 100%;"></div>



Based on code from: !-->

See Also