Google Maps API has a few predetermined shapes including the classic red marker, arrows, and circles. You can also use your own image. For more options, you can draw custom SVG shapes using SVG path notation.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple Google Map with two Markers with InfoWindows and custom SVG marker</title>
<style>
body{
padding:20px
font-family: Arial;
font-size: 16px;
}
#map-canvas, #side-bar {
height: 500px;
width: 600px;
}
pre {
border:1px solid #D6E0F5;
padding:5px;
margin:5px;
background:#EBF0FA;
}
/* fix for unwanted scroll bar in InfoWindow */
.scrollFix {
line-height: 1.35;
overflow: hidden;
white-space: nowrap;
}
</style>
<script src="http://maps.googleapis.com/maps/api/js" type="text/javascript"></script>
<script type="text/javascript">
"use strict";
// variable to hold a map
var map;
// variable to hold current active InfoWindow
var activeInfoWindow ;
// ------------------------------------------------------------------------------- //
// initialize function
// ------------------------------------------------------------------------------- //
function initialize() {
// map options - lots of options available here
var mapOptions = {
zoom : 10,
draggable: true,
center : new google.maps.LatLng(44.9600, -93.1000),
mapTypeId : google.maps.MapTypeId.ROADMAP
};
// create map in div called map-canvas using map options defined above
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
// define two Google Map LatLng objects representing geographic points
var stPaul = new google.maps.LatLng(44.95273,-93.08915);
var minneapolis = new google.maps.LatLng(44.97994,-93.26630);
// place two markers
fnPlaceMarkers(stPaul,"St Paul", "blue");
fnPlaceMarkers(minneapolis,"Minneapolis","green");
}
// ------------------------------------------------------------------------------- //
// create markers on the map
// ------------------------------------------------------------------------------- //
function fnPlaceMarkers(myLocation,myCityName,fillColour){
// create SVG Icon
// The lowercase 'm' is "relative" moveto
// the lowercase 'z' closes the path
// more on SVG path command: http://www.w3.org/TR/SVG/paths.html
var myIcon = {
path: 'M 0,0, 0,-40, 20,-30 , 0,-20, z',
fillColor: fillColour,
fillOpacity: 0.7,
scale: 1,
strokeColor: 'black',
strokeWeight: 2
};
// create marker and put it on map
var marker = new google.maps.Marker({
position: myLocation,
icon: myIcon,
map: map
});
// create an InfoWindow
var infoWnd = new google.maps.InfoWindow();
// add content to your InfoWindow
infoWnd.setContent('<div class="scrollFix">' + 'Welcome to ' + myCityName + '</div>');
// add listener on InfoWindow - close last infoWindow before opening new one
google.maps.event.addListener(marker, 'click', function() {
//Close active window if exists - [one might expect this to be default behaviour no?]
if(activeInfoWindow != null) activeInfoWindow.close();
// Open InfoWindow
infoWnd.open(map, marker);
// Store new open InfoWindow in global variable
activeInfoWindow = infoWnd;
});
}
// ------------------------------------------------------------------------------- //
// initial load
// ------------------------------------------------------------------------------- //
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<a href="../index.php">BACK</a><br>
<br/>
<h3>Simple Google Map with two Markers with InfoWindows and custom SVG marker</h3>
<ul>
<li>Click on Marker to activate infoWindow</li>
<li>Click on other marker or X in right corner or other Marker to close infoWindow</li>
</ul>
<br/>
<div id="map-canvas"></div>
<br/>
<br/>