0

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?

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); 
0

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'}]
            }
          ]
        });
      }
    
    
  

  • Maybe I'm on the wrong site. I'm not coding anything; I'm using Google's built-in maps editor on their website. – rory.ap Sep 7 '18 at 11:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.