How to create a custom marker for google map

Question

I need to create a custom marker for the Google Map that I use for my website. I do not want to use the image or polygons for the marker, but copy the marker in html and add it to the map. Please suggest possible ways to implement it.

Answer 1

Go to this demo site: http://easysublease.org/mapcoverjs/

It shows how one developer can simply write an HTML template and CSS, and then specify JavaScript event handlers to create fully customized, fully defined HTML markers on the map.

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

------- A detailed way of explaining how this works --------------

Firstly. to be ready, you need one HTML block to specify how your markers will look, for example: (which is an Underscore template, you can select any template or if you don’t need any dynamic thing in your marker, just put pure HTML code, but still need to turn it into a 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 the style of one common house on the 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 into your page containing the map.

Please refer to index.html listed in its Github.

Before creating a custom marker, you need to specify one object where the marker is located and its event handlers, possibly as follows:

 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 that inherits the CustomMarker class provided by mapcover.js as follows:

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

Note that $ ('# customMarkerTemplate'). html () is listed at the beginning of this answer.

and _.template is just one template function provided by Underscore.js. You can choose any template compilation function that you like.

Now the last exciting marker appears, creating

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

Now you have created one custom marker defined by the HTML and CSS template, and you also added event handlers to it!

Answer 2

You will need to use a custom Overlay object.

Above here is a good tutorial that shows how this can be done.