Tag: pin

Add Popup message To Google Map Pin: HTML5

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>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


[youtube https://www.youtube.com/watch?v=DJHepOxO5VM]

YouTube Link: https://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

Adding Pin/Marker To Google Map: HTML5

In this video tutorial we’ll show you how we can add a pin or marker to Google Map at a particular location.

location-pin-marker-map

This is a continuation video, so please watch below tutorials before proceeding:
HTML5 – Getting Started Guide
Geolocation API – Success Handler: HTML5
Geolocation API – Error Handle: HTML5
Google Maps Integration: HTML5

If you’re using a smart phone or any other GPS device, you can get to your exact location more accurately. To pin point your exact location, we can add a pin or the marker to your location.

Javascript File
myScript.js

1
2
3
4
5
6
7
8
9
10

function addMarker(map, googleLatLng, title){
var markerOptn={
position  : googleLatLng,
map:map,
title:title,
animation :   google.maps.Animation.DROP
};
 
var marker = new google.maps.Marker(markerOptn);
}

We do not generate map again. Since we already have it generated in success method, we’ll simply use the same map. We’ll get the position information from HTML5’s Geolocation API, convert it into googleLatLng object and pass to addMarker method. We also set some options for the marker, like the position, title and the animation. We could have two type of simple animation using properties BOUNCE and DROP. Finally pass the marker option to Marker constructor of google maps api. This would bring up the map with a nice little marker.

Full Javascript File: Google Map API
myScript.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

$(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");
}
 
function addMarker(map, googleLatLng, title){
var markerOptn={
position: googleLatLng,
map:map,
title:title,
animation:google.maps.Animation.DROP
};
 
var marker = new google.maps.Marker(markerOptn);
}
 
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);
}

Please look at previous day videos to understand above code fully.

Adding Pin/Marker To Google Map: HTML5


[youtube https://www.youtube.com/watch?v=9v8Y0BeKB0I]

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



We could even include our own marker image, by setting the icon to your image path in the marker options.
Example:

1
2
3
4
5
6

var markerOptn={
position  : googleLatLng,
map:map,
title:title,
icon:'myPin.png'
};