Adding Custom Markers on Google Map
Course- PHP Tutorial >
Markers are user to identify locations on a Map. By default Google map display a standard image as map marker. But you can change the image or you can use a custom image as Google map marker.
Display standard marker on Google Map
In the previous article we have discuss how to add or embed a Google map in your web page. Now we will display standard marker on that map.
Insert the following div where you want to display the map.
<div id="myMap"></div>
CSS Code
<style> #myMap { height: 350px; width: 680px; } </style>
JavaScript Code
First include Include API file from Google. The follow code will generate Google map in 'myMap' div and display a standard marker.
.
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"> </script> <script> var map; var myLatlng = new google.maps.LatLng(20.1979279,85.8179039); function initialize() { var mapOptions = { zoom: 8, center: myLatlng }; map = new google.maps.Map(document.getElementById('myMap'),mapOptions); // To add the marker to the map var marker = new google.maps.Marker({ position: myLatlng, map: map, title:"Bhubaneswar Odisha!" }); // To add the marker to the map, call setMap(); marker.setMap(map); } google.maps.event.addDomListener(window, 'load', initialize); </script>
Display Multiple Markers
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"> </script> <script> var map; var places = [ ['Bhubaneswar', 20.2960587, 85.8245398], ['Cuttack', 20.462521, 85.8829895], ['Puri', 19.8133822, 85.8314655], ['Konark', 19.8920686, 86.091184], ['Sambalpur', 21.466222, 83.9751639] ]; function initialize() { var mapOptions = { zoom: 5, center: new google.maps.LatLng(20.2960587, 85.8245398) } var map = new google.maps.Map(document.getElementById('myMap'),mapOptions); setMarkers(map, places); } function setMarkers(map, locations) { for (var i = 0; i < locations.length; i++) { var place = locations[i]; var myLatLng = new google.maps.LatLng(place[1], place[2]); var marker = new google.maps.Marker({ position: myLatLng, title: place[0] }); marker.setMap(map); } } google.maps.event.addDomListener(window, 'load', initialize); </script>
Display Custom Markers
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"> </script> <script> var map; var places = [ ['Bhubaneswar', 20.2960587, 85.8245398,'bhubaneswar.png'], ['Cuttack', 20.462521, 85.8829895,'cuttack.png'], ['Puri', 19.8133822, 85.8314655,'puri.png'], ['Konark', 19.8920686, 86.091184,'konark.png'], ['Sambalpur', 21.466222, 83.9751639,'sambalpur.png'] ]; function initialize() { var mapOptions = { zoom: 5, center: new google.maps.LatLng(20.2960587, 85.8245398) } var map = new google.maps.Map(document.getElementById('myMap'),mapOptions); setMarkers(map, places); } function setMarkers(map, locations) { for (var i = 0; i < locations.length; i++) { var place = locations[i]; var myLatLng = new google.maps.LatLng(place[1], place[2]); var marker = new google.maps.Marker({ position: myLatLng, icon: 'mapicons/'+place[3], title: place[0] }); marker.setMap(map); } } google.maps.event.addDomListener(window, 'load', initialize); </script>
Create a draggable marker
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"> </script> <script> var map; var myLatlng = new google.maps.LatLng(20.1979279,85.8179039); function initialize() { var mapOptions = { zoom: 5, center: myLatlng } var map = new google.maps.Map(document.getElementById('myMap'),mapOptions); var marker = new google.maps.Marker({ position: myLatlng, map: map, draggable:true, title:"Drag me!" }); marker.setMap(map); } google.maps.event.addDomListener(window, 'load', initialize); </script>