Google Maps API - Add List of Markers
Jump to navigation
Jump to search
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
- Google Maps API - more examples.
