How to get a public Google map show up in Google search results?

Question

I'm a runner and I've spent a lot of time using Google maps to compile a collection of drinking fountain locations in Boston where I often run. I've made it public so others can benefit from this resource when planning their running routes on hot days, but when I search for it in Google the way a random person would, my map is nowhere in the results.

I'm not a web design person or SEO guru, but I'm wondering how I can get my map to be in the top search results? Is there a way to get it to be considered "relevant" by Google without having it linked all over the place or paying Google to have it appear at the top?

Answer 1

My example for displaying many places in the Google map (part of the map of the royal palaces of Sweden):

function initialize() {
           var mapOptions = {
           center: new google.maps.LatLng(59.326822,17.471719),
           zoom: 7,
           mapTypeId: google.maps.MapTypeId.TERRAIN,
        }; 

        var map = new google.maps.Map(document.getElementById("map_canvas"),
           mapOptions);

        var crown1 = new google.maps.Marker({
           position: new google.maps.LatLng(59.39042, 18.016814),
           map: map,
           icon: '../../../maps_icons/crown.svg'
        });

        var infowindow1 = new google.maps.InfoWindow({
           content: '<div class="info"><h3>Ulriksdal Palace</h3><img src="../../images/ulriksdal-min.jpg" /><div style="clear:both"></div><a href="../ulriksdal-en.html" target="_blank"><button>Read More</button></a></div>'
        });

        google.maps.event.addListener(crown1, 'click', function() {
           infowindow1.open(map, crown1);
        });


        var crown2 = new google.maps.Marker({
           position: new google.maps.LatLng(58.950183, 17.584479),
           map: map,
           icon: '../../../maps_icons/crown.svg'
        });

        var infowindow2 = new google.maps.InfoWindow({
           content: '<div class="info"><h3>Tullgarn Palace</h3><img src="../../images/tullgarn-min.jpg" /><div style="clear:both"></div><a href="../tullgarn-en.html" target="_blank"><button>Read More</button></a></div>'
        });

        google.maps.event.addListener(crown2, 'click', function() {
           infowindow2.open(map, crown2);
        });


        var crown3 = new google.maps.Marker({
           position: new google.maps.LatLng(59.524803, 16.269816),
           map: map,
           icon: '../../../maps_icons/crown.svg'
        });

        var infowindow3 = new google.maps.InfoWindow({
           content: '<div class="info"><h3>Strömsholms Palace</h3><img src="../../images/stromsholm-min.jpg" /><div style="clear:both"></div><a href="../stromsholm-en.html" target="_blank"><button>Read More</button></a></div>'
        });

        google.maps.event.addListener(crown3, 'click', function() {
           infowindow3.open(map, crown3);
        });


      }
      google.maps.event.addDomListener(window, 'load', initialize); 

Answer 2

Using a styled map, you can customize the presentation of the Google base maps, changing the visual display of such elements as roads, parks, and built-up areas.

  
    Styled Maps - Night Mode
    
    
    
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    
  
  
    
    
      function initMap() {
        // Styles a map in night mode.
        var map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 40.674, lng: -73.945},
          zoom: 12,
          styles: [
            {elementType: 'geometry', stylers: [{color: '#242f3e'}]},
            {elementType: 'labels.text.stroke', stylers: [{color: '#242f3e'}]},
            {elementType: 'labels.text.fill', stylers: [{color: '#746855'}]},
            {
              featureType: 'administrative.locality',
              elementType: 'labels.text.fill',
              stylers: [{color: '#d59563'}]
            },
            {
              featureType: 'poi',
              elementType: 'labels.text.fill',
              stylers: [{color: '#d59563'}]
            },
            {
              featureType: 'poi.park',
              elementType: 'geometry',
              stylers: [{color: '#263c3f'}]
            },
            {
              featureType: 'poi.park',
              elementType: 'labels.text.fill',
              stylers: [{color: '#6b9a76'}]
            },
            {
              featureType: 'road',
              elementType: 'geometry',
              stylers: [{color: '#38414e'}]
            },
            {
              featureType: 'road',
              elementType: 'geometry.stroke',
              stylers: [{color: '#212a37'}]
            },
            {
              featureType: 'road',
              elementType: 'labels.text.fill',
              stylers: [{color: '#9ca5b3'}]
            },
            {
              featureType: 'road.highway',
              elementType: 'geometry',
              stylers: [{color: '#746855'}]
            },
            {
              featureType: 'road.highway',
              elementType: 'geometry.stroke',
              stylers: [{color: '#1f2835'}]
            },
            {
              featureType: 'road.highway',
              elementType: 'labels.text.fill',
              stylers: [{color: '#f3d19c'}]
            },
            {
              featureType: 'transit',
              elementType: 'geometry',
              stylers: [{color: '#2f3948'}]
            },
            {
              featureType: 'transit.station',
              elementType: 'labels.text.fill',
              stylers: [{color: '#d59563'}]
            },
            {
              featureType: 'water',
              elementType: 'geometry',
              stylers: [{color: '#17263c'}]
            },
            {
              featureType: 'water',
              elementType: 'labels.text.fill',
              stylers: [{color: '#515c6d'}]
            },
            {
              featureType: 'water',
              elementType: 'labels.text.stroke',
              stylers: [{color: '#17263c'}]
            }
          ]
        });
      }