[Javascript] Adding custom markers and icons at Google Map

You may want to make a map at your website to indicate the location of your shop. Google map API absolutely can do your favor.



Demonstration:

First of all, you have to initiate Google map API at the beginning of the page .

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

The parameter "sensor" means that whether detecting your current location or not. Then place a DIV container for the map, and name it as "scene".

<div id="scene"></div>

Using CSS to control the width and height of that DIV.

<style>
#scene{width:480x;height:320px;margin:0 0 10px 0;display:block;}
</style>

In order to load Google Map, we should define a center point of the map first.

        var MongKok = {
            name : "Mong Kok",
            latlng : new google.maps.LatLng(22.319183,114.169353),
            zoom : 17,
        }

I define a point that is Mong Kok at Hong Kong, and name it as a variable "MongKok". You can extract latitude and longitude point from the linkage of the point in the map.

OK, we can load the map into the DIV now.

        function showMap(district) {
            var settings = {
                streetViewControl: false,
                zoomControl: false,
                mapTypeControl: false,
                panControl: false,
                zoom: district.zoom,
                center: district.latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("scene"),settings);
           
            setMarkers(map, markers);
        }
        window.onload = function() {
            showMap(MongKok);
        }

The second step, set your shop location and put a maker on it now. Here is the location and the function to set marker.

        var markers = [
            ['Langham Place', 22.318905, 114.168538, 4],
        ];

        function setMarkers(map, locations) {
       
            var image = new google.maps.MarkerImage('http://server2.iconfinder.com/data/icons/socialnetworking/32/google.png',
                new google.maps.Size(30, 30),
                new google.maps.Point(0,0),
                new google.maps.Point(15, 15));
           
            var shape = {
                coord: [1,1,30,30],
                type: 'rect'
            };
           
            for (var i = 0; i < locations.length; i++) {
                var marker = locations[i];
                var latLng = new google.maps.LatLng(marker[1], marker[2]);
                var marker = new google.maps.Marker({
                    clickable: true,
                    position: latLng,
                    map: map,
                    icon: image,
                    flat: true,
                    shape: shape,
                    title: marker[0],
                    zIndex: marker[3]
                });
               
                google.maps.event.addListener(marker, 'click', function(e) {
                    //
                });
            }
           
        }

So, put it all together and here you go.

<style>
#scene{width:480x;height:320px;margin:0 0 10px 0;display:block;}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
<!--
// district
var MongKok = {
    name : "Mong Kok",
    latlng : new google.maps.LatLng(22.319183,114.169353),
    zoom : 17,
}

// marker
var markers = [
    ['Langham Place', 22.318905, 114.168538, 4],
];

function setMarkers(map, locations) {

    var image = new google.maps.MarkerImage('http://server2.iconfinder.com/data/icons/socialnetworking/32/google.png',
        new google.maps.Size(30, 30),
        new google.maps.Point(0,0),
        new google.maps.Point(15, 15));
   
    var shape = {
        coord: [1,1,30,30],
        type: 'rect'
    };
   
    for (var i = 0; i < locations.length; i++) {
        var marker = locations[i];
        var latLng = new google.maps.LatLng(marker[1], marker[2]);
        var marker = new google.maps.Marker({
            clickable: true,
            position: latLng,
            map: map,
            icon: image,
            flat: true,
            shape: shape,
            title: marker[0],
            zIndex: marker[3]
        });
       
        google.maps.event.addListener(marker, 'click', function(e) {
            //
        });
    }
   
}

function showMap(district) {
    var settings = {
        streetViewControl: false,
        zoomControl: false,
        mapTypeControl: false,
        panControl: false,
        zoom: district.zoom,
        center: district.latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("scene"),settings);
   
    setMarkers(map, markers);
}
window.onload = function() {
    showMap(MongKok);
}
//-->
</script>

<div id="scene"></div>

Here's for you to learn more google map usages: