How to create custom marker for google map

Question

I need to create a custom marker for Google Map that i am using for my website. I don't want to use an image or polygons for marker, but code the marker in html and add it on the map. Please suggest possible ways to implement it.

Answer 1

Go to this demo-purpose website: http://easysublease.org/mapcoverjs/

It shows how one developer can just write HTML template and CSS, then specify JavaScript Event handlers to create fully customized, Fully HTML specified markers on map.

If you need more, you can go to its Github see readme.md: https://github.com/bovetliu/mapcover

-------detailed way explaining how it works--------------

First. to be prepared, you need one HTML block to specify how you markers would be like, such as: (which is an Underscore template, you can choose whatever template, or if you don't need any dynamic thing in your marker, just supply pure HTML, but still needs turn it into compiled template function)

<div class="mc-static2mapcanvas customized-marker">
  <div class="content"><%= displayedText %></div>
  <div class="text-center remove-background">
    <span aria-hidden="true" class="glyphicon glyphicon-triangle-bottom">
    </span>
  </div>
</div>

Then you need CSS/Less to style it, right? just like styling one common dom on page:

.customized-marker{
  background-color: rgba(0, 255, 255, 0);
  .content{
    background-color: #FF5A5F; 
    color: #fff;
    padding:0px 5px;
    font-size: 14px;
  }
  .remove-background{

    padding: 0px;
    margin: 0px;
    margin-top: -4px;
    color:#FF5A5F;
    background-color: rgba(255, 255, 255, 0);
  }
}
.customized-marker.customized-marker-hover{
  .content{
    background-color: #252525;
  }
  .remove-background{
    color:#252525;
  }
}

Then you can import Mapcover.js and its dependencies to your page containing map.

Please refer the index.html shown at its Github.

Before creating your custom marker, you need one object specify where is the marker, and its event handlers, possibly, like this:

var custom_marker_option = {
  anchor: null,
  datacontent:{"displayedText":"This Marker1"},
  latLng: new google.maps.LatLng(-34.397, 150.644),
  map: mapcover.model.get("map"),
  mouseover:function(container_node){
    console.log("marker heard mouseover");
    // console.log(event.latLng);
    // console.log(container_node);
    var dom = container_node.childNodes[0];
    dom.classList.add("customized-marker-hover");
  },
  mouseout:function(container_node){
    console.log("marker heard mouseout");
    // console.log(event.latLng);
    // console.log(container_node);
    var dom = container_node.childNodes[0];
    dom.classList.remove("customized-marker-hover");
  },
  click:function(container_node){
    console.log("you clicked me");
  }
};

Then you initiate one Class inheriting "CustomMarker" Class provided by mapcover.js like this:

mapcover.initCustomMarker( "CustomMarker1" , _.template( $('#customMarkerTemplate').html()  ));  

Please be aware of that, $('#customMarkerTemplate').html() is given at beginning of this answer.

and _.template is just one template function provided by Underscore.js. You can choose whatever template compiling function you like.

Now comes the final exciting marker creating

var temp_marker_controller = mapcover.addCustomMarker("CustomMarker1"  ,custom_marker_option );

Now, you have created one customized marker specified by HTML template and CSS, and you have also added event handlers to it!

Answer 2

You will need to use a custom Overlay object.

Over here is good tutorial that show how it can be done.