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); }); } |
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