Including Google Maps Javascript
You need to create a Google Maps key for your domain at code.google.com/apis/maps/signup.html. Then include the following JS in your web page:
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=true">
</script>
Initializing Google Maps
For initializing Google Maps on your web page, we have created a function called ‘initialize()’. Here is the body of the function:
function initialize() {
//Create a location object with latitude and longitudes
var delhi = new google.maps.LatLng(28.635308, 77.22496);
//Create options for the map object
var myOptions = {
zoom:10,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: delhi
}
//Create our map
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
Creating Custom markers on Google Maps
For creating markers with our own icons, we have created a function called ‘createMarker()’. This function accept two parameters:
1. map: map object on which marker is to be placed.
2. centerLoc: the location object where marker is to be located Here is the body of the function:
/*Function for creating the custom marker*/
function createMarker(map, centerLoc){
var image = new google.maps.MarkerImage(
'http://www.webspeaks.in/favicon.ico',
new google.maps.Size(40,35),
new google.maps.Point(0,0),
new google.maps.Point(0,35)
);
marker = new google.maps.Marker({
position: centerLoc,
map: map,
icon: image,
title:"Click here for more info."
});
}
Creating Custom infoWindow on Google Maps
For creating infoWindow on Google Maps, we have created a function called ‘createInfoWindow()’. This function accept three parameters:
1. map: map object on which marker is to be placed.
2. marker: The marker object on click of which infoWindow needs to be opened
3. customText: The text to be written in infoWindow Here is the body of the function:
/*Function for creating the custom infoWindow*/
function createInfoWindow(map, marker, customText){
infowindow = new google.maps.InfoWindow({
content: customText
});
/*Open infoWindow on clicking the marker*/
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
Complete implementation of Google Maps
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=ABQIAAAA637Mus9i198xaCP6kyeT0RQx_VuEwDbQw2tT4lOIPXcH-8yh-RShip_gsIHcjuA8B3qb__racWinFg&sensor=true">
</script>
<script type="text/javascript">
//Variable for holding map object
var map;
//Variable for holding marker object
var marker;
//Variable for infowindow map object
var infowindow;
jQuery(document).ready(function(){
/*Map initialization*/
function initialize() {
//Create a location object with latitude and longitudes
var delhi = new google.maps.LatLng(28.635308, 77.22496);
//Create options for the map object
var myOptions = {
zoom:10,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: delhi
}
//Create our map
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
createMarker(map, delhi);//Call function for creating our marker
customText = '<div id="infoWindow">Welcome to <b>New Delhi</b>.<br /><a href="http://webspeaks.in/" target="_blank">Webspeaks.in</a> provides excellent tutorials on Jquery, JavaScript, PHP, CSS, Magento, WordPress, Facebook API, Twitter API, PHP security tips.</div>';
createInfoWindow(map, marker, customText);//Call function for creating our infowindow
}
/*Function for creating the custom marker*/
function createMarker(map, centerLoc){
var image = new google.maps.MarkerImage(
'http://www.webspeaks.in/favicon.ico',
new google.maps.Size(40,35),
new google.maps.Point(0,0),
new google.maps.Point(0,35)
);
marker = new google.maps.Marker({
position: centerLoc,
map: map,
icon: image,
title:"Click here for more info."
});
}
/*Function for creating the custom infoWindow*/
function createInfoWindow(map, marker, customText){
infowindow = new google.maps.InfoWindow({
content: customText
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
jQuery('#mumbai').click(function(){
var Mumbai = new google.maps.LatLng(19.0759837, 72.8776559);
map.setCenter(Mumbai);
createMarker(map, Mumbai);
customText = '<div id="infoWindow"><b>Welcome to Mumbai</b>.<br /><a href="http://webspeaks.in/" target="_blank">Webspeaks.in</a> provides excellent tutorials on Jquery, JavaScript, PHP, CSS, Magento, WordPress, Facebook API, Twitter API, PHP security tips.</div>';
createInfoWindow(map, marker, customText);
});
jQuery('#new-york').click(function(){
var newyork = new google.maps.LatLng(40.77, 73.90);
map.setCenter(newyork);
createMarker(map, newyork);
customText = '<div id="infoWindow"><b>Welcome to New York</b>.<br /><a href="http://webspeaks.in/" target="_blank">Webspeaks.in</a> provides excellent tutorials on Jquery, JavaScript, PHP, CSS, Magento, WordPress, Facebook API, Twitter API, PHP security tips.</div>';
createInfoWindow(map, marker, customText);
});
initialize();
});
</script>
</head>
<body>
<div class="googlemap">
<div id="map_canvas"></div>
<div class="text">
<a id="mumbai" href="javascript:;">Go to Mumbai</a><br />
<a id="new-york" href="javascript:;">Go to New York</a><br />
</div>
</div>
</body>
</html>
A bit of CSS
body{
font-family:Sans-serif;
font-size:12px;
}
.googlemap{
margin: auto;
padding: 0;
width: 960px;
}
#map_canvas{
margin: auto;
width: 650px;
height: 350px;
border:2px double #ececec;
padding:10px;
}
#infoWindow {
color: #3E56E5;
height: 100px;
width: 200px;
overflow:hidden;
}
div.text{
margin: auto;
text-align:center;
}
div.text a{
color: #888888;
font-weight: bold;
text-align: center;
font-size: 18px;
}
WOW U have dn it 🙂
Hi
How can I use Image in infowindow ?
Thanks
Nice tutorial