test

<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>