CODEWITHSUNDEEP
javascriptcssiconsmaps
genghisdong
genghisdong

Reputation: 63

How to add a google map icon to this code?

I want to use my custom icon into this Google Map, I make use of the setTimeout() API but I cant find how to add my icon to it. I hope this snippet below has all the info you need to help me with this problem.

 html,
 body {
 height: 100%;
 margin: 0;
 padding: 0;
 }
 #map {
 height: 100%;
 }
 #floating-panel {
 position: absolute;
 top: 80px;
 left: 42.3%;
 z-index: 5;
 background-color: transparent;
 padding: 5px 5px;
 border: 2px round #fff;
 border-radius: 6px;
 text-align: center;
 font-family: 'Roboto', 'sans-serif';
 font-size: 18px;
 line-height: 30px;
 padding-left: 10px;
 opacity: 0.9;
 }
 #floating-panel {
 margin-left: -52px;
 }
 #header {
 top: 0px;
 left: 0px;
 width: 100%;
 height: 70px;
 position: absolute;
 z-index: 4;
 background-color: #fff;
 padding: 10px 10px;
 text-align: center;
 font-family: 'Roboto', 'sans-serif';
 font-size: 15px;
 line-height: 30px;
 padding-left: 10px;
 opacity: 1;
 box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.7)
 }
 img {
 margin-top: -9px;
 }
<html>
   <head>
  <meta charset="utf-8">
  <meta name="description" content="Startpagina">
  <title> Berlin Map</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
  <link href='http://fonts.googleapis.com/css?family=Lato:400,100,300,500,700' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" type="text/css" href="css/component.css" />
  <script src="js/classie.js"></script>
  <head>
     <script src="https://maps.googleapis.com/maps/api/js"></script>
     <script>
        // If you're adding a number of markers, you may want to drop them on the map
        // consecutively rather than all at once. This example shows how to use
        // window.setTimeout() to space your markers' animation.
        
                       
        var neighborhoods = [
           
          {lat: 52.5075927, lng: 13.3881798}, 
          {lat: 52.516506, lng: 13.3796263},
          {lat: 52.5190608, lng: 13.3988893},
          {lat: 52.5137224, lng: 13.3904811},
          {lat: 52.5016021, lng: 13.3388043},
          {lat: 52.5209319, lng: 13.2934278},
          {lat: 52.5096488, lng: 13.3737554},
        ];
        
        var markers = [];
        var map;
        
                 
        
        function initMap() {
          map = new google.maps.Map(document.getElementById('map'), {
            zoom: 12,
            center: {lat: 52.545, lng: 13.400}
          });
        }
        
                 
                 
        function drop() {
          clearMarkers();
          for (var i = 0; i < neighborhoods.length; i++) {
            addMarkerWithTimeout(neighborhoods[i], i * 200);
          }
        }
        
        function addMarkerWithTimeout(position, timeout) {
          window.setTimeout(function() {
            markers.push(new google.maps.Marker({
              position: position,
              map: map,
              animation: google.maps.Animation.DROP
            }));
          }, timeout);
        }
        
        function clearMarkers() {
          for (var i = 0; i < markers.length; i++) {
            markers[i].setMap(null);
          }
          markers = [];
        }
                 
                 
        
            
     </script>
     <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBW9wbX31PbIhBciON03InLQmXVt33KFI0&signed_in=true&callback=initMap"></script>
     <div id="floating-panel">
        <button class="btn btn-1 btn-1b" id="drop" onclick="drop()">SHOW BERLIN HOTSPOTS</button>
     </div>
     <div id="map"></div>
     </script>
     <div id="header">
        <img src="logo.png" height="86px">
        <!--<button class="btn btn-1 btn-1f">INFORMATION</button>-->
     </div>
     </body>
</html>

I really appreciate any help you can provide.

Upvotes: 1

Views: 242

Answers (1)

EugenSunic
EugenSunic

Reputation: 13703

Here is an example of what you need. I'm not sure to which icon you refer to so I added both of them (header page icon and google maps custom marker icons)

CODE:

new google.maps.Marker({
              position: position,
              map: map,
              animation: google.maps.Animation.DROP,
              icon: "http://img2.sencha.com/files/learn/s2.png"                                    

            });

To resize your icon add this code:

 var icon1 = {
    url: "http://img2.sencha.com/files/learn/s2.png"     , 
    scaledSize: new google.maps.Size(50,50), // scaled size
    origin: new google.maps.Point(0,0), // origin
    anchor: new google.maps.Point(0, 0) // anchor
};

Fiddle example: https://jsfiddle.net/wexd3spp/24/

Upvotes: 1

Related Questions