In this video tutorial we’ll show you how we can add a pin or marker to Google Map at a particular location.
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]
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'
}; |
