Google Maps: Block Map Clean - How do we add locations with icons?

I have google maps with the API key working fine, showing location, however I'd very much like to add locations for various local places of reference, restaurants, grocery, things to do.

Is there a good way to do this, and have those "places" toggle on and off somehow?

Thankyou.

I am really liking Bootstrap Studio. What a timesaver once you start using it!

I'd suggest checking with Google to see if there's a way to do that. Bootstrap Studio is basically utilizing the base of the map setup, I don't "think" there's a way to include it anywhere in BSS, but there may be extra code or something that can be added that Google may provide.

Here is some info about the map with multiple marks. https://developers.google.com/maps/documentation/javascript/examples/marker-animations-iteration

Here is what I reconfigured based on the above code if you would like to use it.

HTML

<div id="floating-panel">
  <button id="dropRestaurants">Drop Restaurant Markers</button>
  <button id="dropGroceries">Drop Grocery Markers</button>
 </div>
 <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=[ENTER YOUR KEY]&callback=initMap"></script>

CSS

/* 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;
}
#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: 'Roboto','sans-serif';
  line-height: 30px;
  padding-left: 10px;
}
#floating-panel {
  margin-left: -52px;
}

My Reconfigured script

var theCenter = {lat: 52.520, lng: 13.410};
var myRestaurants = [
    {lat: 52.511, lng: 13.447},
  {lat: 52.549, lng: 13.422},
];
var myGroceries = [
    {lat: 52.497, lng: 13.396},
  {lat: 52.517, lng: 13.394}
];
var markers = [];
var map;

function dropRestaurants() {
    clearMarkers();
  for (var i = 0; i < myRestaurants.length; i++) {
    addMarkerWithTimeout(myRestaurants[i], i * 200);
  }
}
function dropGroceries() {
    clearMarkers();
  for (var i = 0; i < myGroceries.length; i++) {
    addMarkerWithTimeout(myGroceries[i], i * 200);
  }
}
function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: theCenter
  });
}
function addMarkerWithTimeout(position, timeout) {
    window.setTimeout(function() {
    markers.push(new google.maps.Marker({
        position: position,
      map: map,
      title: 'Hello World!',
      animation: google.maps.Animation.DROP
    }));
  }, timeout);
}
function clearMarkers() {
    for (var i = 0; i < markers.length; i++) {
    markers[i].setMap(null);
  }
  markers = [];
}

$(function(){
    $("#dropRestaurants").on("click",function(){
    dropRestaurants();
  });
  $("#dropGroceries").on("click",function(){
    dropGroceries();
  });
});

Your going to have to figure out more than this but it at least would get you started I would think.

Saj

Ended up saving the fiddle I was testing it out on, basically forked the google provided one, so I think you can see it in action I guess. :)

https://jsfiddle.net/wmo7ruj3/

Saj

1 Like

Saj, This is great! Thank you! VERY helpful. Last night I "published" to "http://spring-resonance-9636.bss.design/" a BSS website I believe. After some trouble with the Url it appeared in the browser. If you'd like to see what I am working on. The Carousel idoes not appear to be populated at this point.

The first Carousel element has image paths that end in /~text?txtsize=42&txt=Carousel+Image&w=1400&h=600 which should not be there. When I remove them in the source, the images appear. However, they are narrower then the site so they aren't centered.

This is what you have assets/img/1853-Captain-Wheeler-House.jpg/~text?txtsize=42&txt=Carousel+Image&w=1400&h=600 it should be assets/img/1853-Captain-Wheeler-House.jpg

In the BSS app your image URL code should be 1853-Captain-Wheeler-House.jpg and so on for the other 2 images of the first Carousel.

Tabs are a show/hide component, not a scroll through component. That is something that can be done with just links or a navbar and the content section for that area would need to be a specific height with a CSS overflow:hidden property. Then the links link to a #unique-specific-name and an ID=unique-specific-name on the element you want to scroll to.

Saj

Sorry about the Tab thing there I think I mixed you up with someone else hehe.

Saj

Saj,

The first Carousel element has image paths that end in /~text?txtsize=42&txt=Carousel+Image&w=1400&h=600 which should not be there.

Very helpful, it works much better! I first tried to edit this using the HTML window and adding an attribute src= but it would not remove everything after the ~ Then I realized that I could change the slide jpg file using the options window (upper right).. Then it was easier fix.

Thank you!

add locations for various local places of reference

Just for the sake of an alternative approach, there is also a JQuery plugin called WhatsNearby, which uses the Google Places API, (Demo). It might be interesting to some, to dig into and explore.