Google Maps with Random Markers Demo

Google Maps with Random Markers Demo

by Abid Shaik

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="map-canvas"></div>

CSS

html {
          height: 100%
      }
      body {
          height: 100%;
          margin: 0;
          padding: 0
      }
      #map-canvas {
          height: 100%
      }

JavaScript

/*Google Maps with Random Markers Demo */

//http://iconshow.me/media/images/Mixed/Free-Flat-UI-Icons/png/20/location-24-20.png 20 X 20 Location ICON    
//http://iconshow.me/media/images/Mixed/line-icon/png/24/location-24.png
//http://iconshow.me/location-2

function randLatLng() {
        return new google.maps.LatLng(((Math.random() * 17000 - 8500) / 100), ((Math.random() * 36000 - 18000) / 100));
    }
    var colors = ['red', 'blue ', 'Green', 'yellow','red', 'blue ', 'Green', 'yellow','red', 'blue ', 'Green', 'yellow','red', 'blue ', 'Green', 'yellow','red', 'blue ', 'Green', 'yellow','red', 'blue ', 'Green', 'yellow','red', 'blue ', 'Green', 'yellow','red', 'blue ', 'Green', 'yellow','red', 'blue ', 'Green', 'yellow','red', 'blue ', 'Green', 'yellow','red', 'blue ', 'Green', 'yellow','red', 'blue ', 'Green', 'yellow'];


    function initialize() {
        var mapOptions = {
            center: new google.maps.LatLng(0, 0),
            zoom:2
        };
        var map = new google.maps.Map(document.getElementById("map-canvas"),
        mapOptions);
        var style = document.createElement('style');
        style.markers = [];
        document.getElementsByTagName('head')[0].appendChild(style);
        colors.forEach(function (color) {
            var marker = new google.maps.Marker({
                optimized: false,
                draggable: true,
                map: map,
                title:color,
                position: randLatLng(),
                icon: 'http://iconshow.me/media/images/Mixed/line-icon/png/16/location-16.png#' + color
            })
            var selector = ['#', map.getDiv().id, ' img[src="', marker.getIcon(), '"]'].join('');
            if (style.markers.indexOf(selector) < 0) {
                style.markers.push(selector);
                style.sheet.insertRule([selector, '{background-color:', color, '; width: 0;  height: 0;  border-left: 70px solid transparent;  border-right: 70px solid transparent;  border-top: 100px...