<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAGJJyh5sMFSsUDh-kzkFwLsvQw28KBrtgk"></script>
<div id="map_canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>
<style>
html,
body,
#map_canvas {
height: 500px;
width: 500px;
margin: 0px;
padding: 0px
}
</style>
<script>
function initialize() {
var latlng = new google.maps.LatLng(47.605, -122.2);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var marker = new google.maps.Marker({
map: map,
position: latlng,
icon: pinSymbol('red')
});
var marker1 = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(47.5, -122.0),
icon: pinSymbol('#7CFC00')
});
var marker2 = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(47.6, -122.3),
icon: pinSymbol('orange')
});
var marker3 = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(47.7, -122.1),
icon: pinSymbol('yellow')
});
}
function pinSymbol(color) {
return {
path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',
fillColor: color,
fillOpacity: 1,
strokeColor: '#000',
strokeWeight: 2,
scale: 1
};
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>