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.
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);
});
}
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.
$(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 About Me:https://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);
}
$(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 About Me:https://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