Place Your Location on the Google Map in Your Site

Leave a Comment / Web Development / By

Do you want to place your custom locations on the Google Map and the map will be in your web page? If you have basic knowledge of HTML it will be a very easy task to you. For implementing the Google Map you will have to get the Google Map API key from Google. Google Map API  to get the API or you can visit the following URL.
http://code.google.com/apis/maps/signup.html

After getting the API key you have to follow the steps mentioned below:

  1. Get the Latitude & Longitude of your place.
  2. Put your API key in the following JavaScript part and place it before closing head tag.
 <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=Your Key will be here" type="text/javascript"></script>

You have to define Latitude & Longitude in the code like as follows.

 var point = new GLatLng(43.82589,-79.10040);

Here is the full codes of the Google Map

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Map</title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=Your API Key" type="text/javascript"></script>
</head>
<body onunload="GUnload()">
<div id="map" style="width: 550px; height: 450px"></div>
<script type="text/javascript">
//<![CDATA[
if (GBrowserIsCompatible()) {
// A function to create the marker and set up the event window
// Dont try to unroll this function. It has to be here for the function closure
// Each instance of the function preserves the contends of a different instance
// of the "marker" and "html" variables which will be needed later when the event triggers.
function createMarker(point,html) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
// Display the map, with some controls and set the initial location
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(43.907787,–79.359741),8);
// Set up three markers with info windows
var point = new GLatLng(43.65654,–79.90138);
var marker = createMarker(point,'<div style="width:240px">Some stuff to display in the First Info Window. With a <a href="http://www.sanjaybhowmick.com">Link</a> to my home page</div>')
map.addOverlay(marker);
var point = new GLatLng(43.91892,–78.89231);
var marker = createMarker(point,'Some stuff to display in the<br>Second Info Window')
map.addOverlay(marker);
var point = new GLatLng(43.82589,–79.10040);
var marker = createMarker(point,'Some stuff to display in the<br>Third Info Window')
map.addOverlay(marker);
}
// display a warning if the browser was not compatible
else {
alert("Sorry, the Google Maps API is not compatible with this browser");
}
//]]>
</script>
</body>
</html>
view raw location.html hosted with ❤ by GitHub

Share this article:

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.