BING Virtual Earth Maps API
<script src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3" type="text/javascript"></script> <table> <tr> <td> <input type="text" id="query" onkeypress="return checkEnter(event);" placeholder="search..." /> <a id="citst" style="font-weight:bold;" href="javascript:setCityState();"></a> </td> </tr> <tr> <td> <div style="position:relative;overflow:hidden;"><div id="divMap" style="position:relative;width:600px;"></div></div> </td> </tr> </table> <script type="text/javascript"> var map = null; function setLocation() { var obj = document.getElementById("query"); if (obj.value.length > 0) { map.Search(obj.value, null, null) setTimeout(function () { var latlon = map.GetCenter(); var pin = new VEShape(VEShapeType.Pushpin, latlon); map.AddShape(pin); pin.SetTitle(obj.value); pin.SetDescription(parseFloat(latlon.Latitude) + "," + parseFloat(latlon.Longitude)); }, 2000); } } function checkEnter(e) { var keynum; if (window.event) { keynum = e.keyCode; } else if (e.which) { keynum = e.which; } if (13 == keynum) { setLocation(); return false; } return true; } function loadMap() { if (map == null) { map = new VEMap('divMap'); map.SetDashboardSize(VEDashboardSize.Small); map.LoadMap(); map.SetCenterAndZoom(new VELatLong(38.32510850548947, -97.294921875, 0, VEAltitudeMode.Default), 4); } } function setCityState() { document.getElementById("query").value = document.getElementById("citst").innerHTML; setLocation(); } function writeCityState(response) { var s = response.city + ", " + response.region_code + ", " + response.country_code; document.getElementById("citst").innerHTML = s; } window.onload = (function () { loadMap(); var script = document.createElement("script"); script.src = "http://freegeoip.net/json?callback=writeCityState"; document.body.insertBefore(script, document.body.firstChild); }); </script>
To change the icon from a pushpin to your own image:pin.IconUrl = "http://www.domain.com/img/icon.png";