aspdotnet-suresh offers articles and tutorials,csharp dot net, articles and tutorials,VB.NET Articles,Gridview articles,code examples of 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

JavaScript Add Marker in Google Map Api in Website

Jan 17, 2013

Here I will explain how to add marker in Google maps api using JavaScript in website or Show marker in Google maps api in JavaScript.


In previous article I explained clearly how to add google map to website in, jQuery image slideshow in, Sitemap navigation control example in and many articles relating to jQuery, JavaScript, Now I will explain how to add marker in Google maps api in website.

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

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

<html xmlns="">
<title>Show or Add markers to Google Maps in website</title>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
<script type="text/javascript"
<script type="text/javascript">
function initialize() {
var myLatlng= new google.maps.LatLng(-34.397, 150.644)
var mapOptions = {
center: myLatlng,
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP,
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: "Your Location Address!"

<body onload="initialize()">
<form id="form1" runat="server">
<div id="map_canvas" style="width: 500px; height: 300px"></div>
If you observe above code in header section I written code like

<script type="text/javascript"
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 marker to google map we need to use setMap() method for that we need to write the code like as show below

var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: " Your Location Address!"

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest,, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email


Anonymous said...

how can I change the address shown on the Map , inserting a new address in the setMap() method does not seem to work

Give your Valuable Comments

Other Related Posts

© 2015 All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.