Primitive Scale

by Zoltan Boros

HTML

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">


</script>

CSS

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#map {
    height: 100%;
}

JavaScript

function initMap() {
    var latLngCenter = {
        lat: 47.5041049,
        lng: 19.079281
    };
    var latLngUp = {
        lat: 47.50644,
        lng: 19.079281
    };
    var latLngLeft = {
        lat: 47.5041049,
        lng: 19.07585
    };
    var markerIcon = {
        anchor        : { x : 100, y : 100 },
        path          : 'M0,100 a100,100 0 1,0 200,0 a100,100 0 1,0 -200,0',
        fillColor     : '#efaf1e',
        fillOpacity   : 0.25,
        strokeColor   : '#efaf1e',
        strokeOpacity : 1
    };
    var scaleByZoom = {
        1 : 0.05,
        2 : 0.05,
        3 : 0.05,
        4 : 0.05,
        5 : 0.05,
        6 : 0.05,
        7 : 0.05,
        8 : 0.05,
        9 : 0.05,
        10 : 0.05,
        11 : 0.05,
        12 : 0.1,
        13 : 0.2,
        14 : 0.4,
        15 : 0.8,
        16 : 1.6,
        17 : 3.2,
        18 : 6.5,
        19 : 13,
        20 : 26,
        21 : 52
    };
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 17,
        center: latLngCenter
    });
    var markerCenter = new google.maps.Marker({
        position: latLngCenter,
        map: map,
        title: 'Hello World!'
    });
    var markerUp = new google.maps.Marker({
        position: latLngUp,
        map: map
    });
    var markerLeft = new google.maps.Marker({
        position: latLngLeft,
        map: map
    });
    markerIcon.strokeWeight = 5;
    markerIcon.scale        = scaleByZoom[map.getZoom()];
    var markerCircle = new google.maps.Marker({
        map      : map,
        position : latLngCenter,
        icon     : markerIcon
    });
}