Google Maps using JavaScript


In this article, I will explain how to create Google Maps in JavaScript. Google Maps is a web mapping service application and technology provided by Google. Find Google Maps using JavaScript. Find code for Google Maps using JavaScript. You can check out your Office Location, etc.

Learn how to make out Google Maps using JavaScript


Not all browsers support the Google API So use a `noscript` element to detect the situation where there is no Javascript, and use GBrowserIsCompatible() to detect a non-compatible browser.

Google Maps using JavaScript


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps</title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=" type="text/javascript"></script>
</head>
<body >
<div id="map" style="width: 550px; height: 450px"></div>


<noscript><b>JavaScript must be enabled in order for you to use Google Maps.</b>
However, it seems JavaScript is either disabled or not supported by your browser.
To view Google Maps, enable JavaScript by changing your browser options, and then
try again.
</noscript>


<script type="text/javascript">


if (GBrowserIsCompatible()) {


function createMarker(point,html) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
return marker;
}

var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(17.5304303,73.8567437),5);

var point = new GLatLng(18.5244303,78.8567537);
var marker = createMarker(point,'<div style="width:240px">Marker1<\/div>')
map.addOverlay(marker);

var point = new GLatLng(18.5256303,72.8566437);
var marker = createMarker(point,'Second Info Window')
map.addOverlay(marker);

var point = new GLatLng(18.5304303,73.8567437);
var marker = createMarker(point,'Third Info Window')
map.addOverlay(marker);

}

else {
alert("Sorry, the Google Maps API is not compatible with this browser");
}


</script>
</body>

</html>


Comments

Author: Karunagara Pandi29 Dec 2011 Member Level: Gold   Points : 0

Its not working...
I'm getting error (Object Required) while executing this script in Internet Explorer 8 browser.

Author: Mr.Rajesh29 Dec 2011 Member Level: Gold   Points : 0

Karunagara,

It's working on Internet Explorer 8 browser.



  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:
    Email: