Custom markers on Google Maps

Google did a great job with Google Maps from developers point of view. Recent V3 version of Maps API is very simple to use in projects. Recently I created an example how to embed map on the site and display custom markers on it. Markers handle mouse onClick event as well. This example is using Google Maps API Version 3. You can see the result below.

Custom marker example

Markers have mouse click support. Aren't these little penguins cute ? Try to find all of them ), they handle clicks as well.

Google maps custom marker code

All the code is 25 lines on JavaScript below.
document.write('<div id="gmap" style="width:500px; height:500px;"></div>');
// Get center
var map_center = new google.maps.LatLng(50.1700235000, 4.7319823000);
 
// Load google map
var map = new google.maps.Map( document.getElementById("gmap"),  {
	zoom: 3,
	center: map_center,
	mapTypeId: google.maps.MapTypeId.HYBRID,
	panControl: false,
	streetViewControl: false,
	mapTypeControl: false
});
 
var pos;
var marker;
for(var i = 0 ; i < 10 ; i++) {
	pos = new google.maps.LatLng(Math.floor(Math.random()*100), Math.floor(Math.random()*50));
	marker = new google.maps.Marker({
		position: pos, 
		map: map, 
		title: 'Title',
		icon: '/other/gmap/marker.gif'
	});
	var storyClick = new Function("event", "alert('Click on marker "+i+" ');");
	google.maps.event.addListener(marker, 'click', storyClick);
}
 
Download javascript google maps marker code Do not forget to include Google Maps API into your page <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> See also my post for capturing Google Maps regions to image file like png or jpeg .

3 comments

  1. Yeah, it can be pretty useful. Where is the JS sample code? Good to have it in the post. 😉
    I need to try it for “I’ve been here” kinda image.

Leave a Reply

Your email address will not be published.