Add Popup message To Google Map Pin: HTML5

Advertisement:

In this video tutorial we shall teach you how to add a message window(popup) when the pin or the marker is clicked on a Google Map.

pin-marker-google-map-message-infoWindow

JavaScript file
mySript.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function addMarker(map, googleLatLng, title, content){
	var markerOptn={
position:googleLatLng,
map:map,
title:title,
animation:google.maps.Animation.DROP
	};
 
	var marker=new google.maps.Marker(markerOptn);
 
	var infoWindow=new google.maps.InfoWindow({ content: content, 
	                                               position: googleLatLng});
    google.maps.event.addListener(marker, "click", function(){
		infoWindow.open(map);
	});												   
}

Add the content and position information to InfoWindow constructor of Google Maps API.
Also add a event listener: once the marker is clicked, open the message window on the map.

Full JavaScript file
mySript.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
$(document).ready(function(){
 
	if( navigator.geolocation )
	 navigator.geolocation.getCurrentPosition(success, fail);
	else
	 $("p").html("HTML5 Not Supported");
 
});
 
function success(position)
{
	var googleLatLng = new google.maps.LatLng(position.coords.latitude, 
						position.coords.longitude);
	var mapOtn={
zoom:10,
center:googleLatLng,
mapTypeId:google.maps.MapTypeId.ROAD
	};
 
	var Pmap=document.getElementById("map");
 
	var map=new google.maps.Map(Pmap, mapOtn);
	addMarker(map, googleLatLng, "Technotip.com", 
                  "SATISH B<br /><b>About Me:</b>http://technotip.com/about/");
}
 
function addMarker(map, googleLatLng, title, content){
	var markerOptn={
position:googleLatLng,
map:map,
title:title,
animation:google.maps.Animation.DROP
	};
 
	var marker=new google.maps.Marker(markerOptn);
 
	var infoWindow=new google.maps.InfoWindow({ content: content, 
	                                               position: googleLatLng});
    google.maps.event.addListener(marker, "click", function(){
		infoWindow.open(map);
	});												   
}
 
function fail(error)
{
	var errorType={
0:"Unknown Error",
1:"Permission denied by the user",
2:"Position of the user not available",
3:"Request timed out"
	};
 
	var errMsg = errorType[error.code];
 
	if(error.code == 0 || error.code == 2){
		errMsg = errMsg+" - "+error.message;
	}
 
	$("p").html(errMsg);
}

For explanation of above code, please visit previous day videos.

Add Popup message To Google Map Pin/Marker Click Event: HTML5


You need to a flashplayer enabled browser to view this YouTube video

YouTube Link: http://www.youtube.com/watch?v=DJHepOxO5VM [Watch the Video In Full Screen.]



Your location may not be shown accurately if you’re accessing the pages via your computer. Open above link in your smart phone, with GPS turned on.

Coming Up: Tracking real time location on Google Map..stay subscribed

Leave a Reply

Your email address will not be published. Required fields are marked *