Home/ Questions/Q 4561604
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-21T18:05:53+00:00

In my HTML5 app, I use Google Map v3 and add several markers on

  • 0

In my HTML5 app, I use Google Map v3 and add several markers on a map. It’s easy to place new markers and to change icons but I’d like to be able to build markers like the one used in Google Latitude. Those markers are set up with an icon image and a nice border.
Any ideas on how to do this ?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You could do this server-side or since you are using HTML 5 and assuming you have the canvas available you could do this on the client-side. Below is a way to do it client-side using the HTML 5 canvas. Doing it server-side will vary by what language you are using but the technique would be similar.

    Download these images and try it out. The images need to reside in the same domain as the page to avoid a security error. They should also be in the same directory unless you update the locations in the HTML.

    face1face2face3frame

    After the page loads, click the faces and a random marker will be created using the supplied frame image and added to the Google map.

    enter image description here

    <!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; utf-8">
        <title>HTML 5 Canvas Image Processing</title>
    </head>
    <body>
        <img onclick="build(this)" id="face1" src="face1.png"/>
        <img onclick="build(this)" id="face2" src="face2.png"/>
        <img onclick="build(this)" id="face3" src="face3.png"/>
        <img id="frame" src="frame.png"/>
        <div id="map_canvas" style="width:640px;height:480px;">
        </div>
        <script type="text/javascript">

            function build(caller){
                var image = getMergedUrl(document.getElementById("frame"), caller);
                var myLatLng = getRndPos(map.getBounds());
                var myMarker = new google.maps.Marker({
                    position: myLatLng,
                    map: map,
                    icon: image
                });

            }

            function getRndPos(bounds) {
                var xDiff = Math.abs(bounds.getNorthEast().lng() - bounds.getSouthWest().lng());
                var yDiff = Math.abs(bounds.getNorthEast().lat() - bounds.getSouthWest().lat());
                var xMin = Math.min(bounds.getNorthEast().lng(),bounds.getSouthWest().lng());
                var yMin = Math.min(bounds.getNorthEast().lat(),bounds.getSouthWest().lat());
                var x = xMin + xDiff * Math.random();
                var y = yMin + yDiff * Math.random();
                var pos = new google.maps.LatLng(y,x);
                return pos;
            }

            function getMergedUrl(frame, pic){
                // Create an empty canvas element
                var canvas = document.createElement("canvas");
                canvas.width = frame.width;
                canvas.height = frame.height;

                // Copy the image contents to the canvas
                var ctx = canvas.getContext("2d");
                ctx.drawImage(frame, 0, 0);
                ctx.drawImage(pic, 4, 4);

                // Get the data-URL formatted image
                var dataURL = canvas.toDataURL("image/png");

                return dataURL;
            }

            function initialize(){
                var myLatlng = new google.maps.LatLng(-34.397, 150.644);
                var myOptions = {
                    zoom: 8,
                    center: myLatlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                }
                map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            }

            function loadScript(){
                var script = document.createElement("script");
                script.type = "text/javascript";
                script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
                document.body.appendChild(script);
            }

            window.onload = loadScript;
        </script>
    </body>
</html>

    Thanks to Matthew Crumley for the toDataUrl code from here.

    • 0