How do I set my own icon design in google maps using html features?

Hello.
In Google Maps, you can put your own marker instead of the standard one. To do this, you need to specify the url to your image.
But what if you need to make the marker design more extensive? In other words, how do I make it so that instead of a standard marker, I don't set an image, but my own HTML code, where there will be anything?

Author: Anton Mukhin, 2012-02-20
Source

3 answers

I'm not sure about html, but you can definitely try drawing canvas over maps. Pruflinks.

 1
Author: ling, 2012-02-20 10:03:04

I added this code to the map ad::

 markers: [{ latitude: 41.655242, longitude: 12.989615, 
            icon: "/img/icon-2s.png"}]

An example of using it can be found on the website http://www.primavera-italy.ru/map/

 0
Author: shiva1, 2012-02-20 12:19:28

First, add the marker image to the site folder 

   var icon_1 = 'google_map_icon/Arrow_1.png"; ?>';

Then we pass the reference to the marker 

   markers.push([ location.city + ", " + location.region ,lat, lng ,icon_1]);

And when adding markers in the loop, we create a marker with our picture

   marker = new google.maps.Marker({
                position: position,
                map: map,
                title: markers[i][0],
                icon: {
                url: markers[i][3] ,
                scaledSize: new google.maps.Size(64, 64)
                }
   });

This is what the code for finding and outputting coordinates from the database will look like in the loop

                <div id="regions_div" style="width: 100%; height: 350px;"></div>
        <script type="text/javascript">

            var markers = [],infoWindowContent = [];
            jQuery(function($) {
                var script = document.createElement('script');
                script.src = "//maps.googleapis.com/maps/api/js?key=AIzaRw&hl=en&callback=initialize";
                document.body.appendChild(script);
            });

            function initialize() {
                var map;
                var bounds = new google.maps.LatLngBounds();
                var mapOptions = {
                    mapTypeId: 'roadmap'
                };
                map = new google.maps.Map(document.getElementById("regions_div"), mapOptions);
                map.setTilt(45);

                <?php
                $query = $this->db->query("SELECT location FROM response WHERE location LIKE '%\"loc\":\"%' GROUP BY location ")->result_array();

                foreach($query as $row){
                $replace = '';
                $string = $row['user_location'];
                $string = ereg_replace("'", $replace, $string);
                $row['user_location'] = $string;
                ?>
                var icon_1 = 'http://www.bla.bla/Arrow_1.png"; ?>';

                try{
                    var location = JSON.parse('<?php echo $row['user_location'] ?>');
                    var lat  = location.loc.split(",")[0];
                    var lng  = location.loc.split(",")[1];

                    markers.push([ location.city + ", " + location.region ,lat, lng ,icon_1]);
                    infoWindowContent.push(
                        ['<div class="info_content">' +
                        '<h3> '+ location.city + ", " + location.region + ' </h3>' +
                        '</div>']);
                }catch(e){
                    console.log("JSON Parse Error");
                }
                <?php } ?>
                var infoWindow = new google.maps.InfoWindow(), marker, i;
                if(markers.length){
                    for( i = 0; i < markers.length; i++ ) {
                        var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
                        marker = new google.maps.Marker({
                            position: position,
                            map: map,
                            title: markers[i][0],
                            icon: {
                            url: markers[i][3] ,
                            scaledSize: new google.maps.Size(64, 64)
                            }
                        });
                        google.maps.event.addListener(marker, 'click', (function(marker, i) {
                            return function() {
                                infoWindow.setContent(infoWindowContent[i][0]);
                                infoWindow.open(map, marker);
                            }
                        })(marker, i));
                        map.setCenter(position);
                        map.setZoom(2);
                    }
                }else{
                    var pos = {
                        lat: -34.397,
                        lng: 150.644
                    };
                    map.setCenter(pos);
                    map.setZoom(3);
                }

            }
        </script>
 0
Author: Роман Зыков, 2017-06-14 10:16:31