This post was most recently updated on August 5th, 2024
Demo: PinOnMap
Here is the source code to show pin on Google map using JavaScript:
<script type=”text/javascript” src=”http://maps.google.com/maps/api/js?sensor=false”></script>
<script type=”text/javascript”>
|
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 61 62 63 |
var marker; var flag = 0; function initialize(latlng) { var myOptions = { zoom: 14, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP, streetViewControl: false, mapTypeControl: false, }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); if (flag == 0) { google.maps.event.addListenerOnce(map, 'idle', function (event) { Onloaded(); }); } google.maps.event.addListener(map, 'click', function (event) { placeMarker(event.latLng); }); function Onloaded() { var lat = document.getElementById('latitude').value; var long = document.getElementById('longitude').value; var location1 = new google.maps.LatLng(lat, long); if (marker == undefined) { marker = new google.maps.Marker({ position: location1, map: map, animation: google.maps.Animation.DROP, }); } else { marker.setPosition(location1); } map.setCenter(location1); } function placeMarker(location) { document.getElementById('latitude').value=location.lat(); document.getElementById('longitude').value=location.lng(); if (marker == undefined) { marker = new google.maps.Marker({ position: location, map: map, animation: google.maps.Animation.DROP, }); } else { marker.setPosition(location); } map.setCenter(location); } } function showAddress() { flag = 1; var address = document.getElementById('Address').value; var geocoder = new google.maps.Geocoder(); geocoder.geocode({ 'address': address }, function (results, status) { var location = results[0].geometry.location; marker = undefined; initialize(new google.maps.LatLng(location.lat(), location.lng())); }); } |
</script>
// html code
<body onload=”initialize(new google.maps.LatLng(18.5203,73.8567))” style=”font-family: Arial; border: 0 none;”>
<input type=”text” size=”52″ name=”address” id=”Address” />
<input type=”button” onclick=”showAddress();” value=”Search on map” class=”button” />
<div id=”map_canvas” style=”width: 500px; height: 300px”></div>
<input type=”hidden” id=”latitude” value=”18.5203″ />
<input type=”hidden” id=”longitude” value=”73.8567″ />
</body>
If you have any query then drop a comment. 🙂
