Adding Custom Marker to Google Maps V3 with JavaScript in Website

By: Suresh Dasari Jan 19, 2013

Introduction:

Here I will explain how to add custom marker to Google maps api using JavaScript in asp.net website.

Description:

In previous article I explained clearly how to add Google map to website in asp.net, Add marker to Google map in asp.net website, Add multiple markers to Google map using JSON, Add animated marker to Google map in website, jQuery Google currency converter example and many articles relating to jQuery, JavaScript, asp.net. Now I will explain how to add custom marker to Google maps api in asp.net website.

Before add custom marker to Google map in website first we need to get google api key for that please check below url

Get Google Map API Key for website

Once you got the key write the following code in your aspx or html page like as shown below

<head>

<title>Add Custom Marker to Google Maps in Asp.net Website</title>

html { height: 100% }

body { height: 100%; margin: 0; padding: 0 }

#map_canvas { height: 100% }

</style>

src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC6v5-2uaq_wusHDktM9ILcqIrlPtnZgEk&sensor=false">

</script>

function initialize() {

var myLatlng = new google.maps.LatLng(13.053147716796578, 80.2501953125)

var mapOptions = {

center: myLatlng,

zoom: 8,

mapTypeId: google.maps.MapTypeId.ROADMAP,

marker: true

};

var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

var marker = new google.maps.Marker({

position: myLatlng,

icon:'Map-Marker.png',

title: "Chennai"

});

marker.setMap(map);

}

</script>

</head>

</form>

</body>

</html>

If you observe above code in header section I written code like

src="https://maps.googleapis.com/maps/api/js?key=Your_API_Key&sensor=SET_TRUE_OR_FALSE">

Here you need to set key value as your api key and sensor parameter of the URL must be included, it indicates whether this application uses a sensor (such as a GPS locator) to determine the user's location for that reason you must set this value to either true or false explicitly.

To add custom marker to google map we need write the code like as shown below

var marker = new google.maps.Marker({

position: myLatlng,

icon:'Map-Marker.png',

title: "Chennai"

});

marker.setMap(map);

Demo