Google Maps v3 API
<table> <tr> <td> <input type="text" id="query" onkeypress="return checkHitEnter(event, this);" placeholder="search..." /> </td> </tr> <tr> <td> <div id="divMap" style="margin:0;width:600px;height:400px;"></div> </td> </tr> </table> <script type="text/javascript"> var geocoder = null; var googlemap = null; var markers = new Array(); function setLocation(id) { if (geocoder === null) { geocoder = new google.maps.Geocoder(); } var obj = document.getElementById(id); if (obj.value.length > 0) { geocoder.geocode({ address: obj.value }, function (results, status) { if (status == google.maps.GeocoderStatus.OK) { googlemap.setCenter(results[0].geometry.location); } }); } } function checkHitEnter(e, obj) { var keynum; if (window.event) { keynum = e.keyCode; } else if (e.which) { keynum = e.which; } if (13 == keynum) { setLocation(obj.id); return false; } return true; } function loadMap(response) { googlemap = new google.maps.Map(document.getElementById("divMap"), { center: { lat: (response.latitude == 0) ? 37.09024 : parseFloat(response.latitude), lng: (response.longitude == 0) ? -100.712891 : parseFloat(response.longitude) }, disableDefaultUI: false, zoom: (response.latitude == 0) ? 3 : 8, zoomControl: true, zoomControlOptions: { style: google.maps.ZoomControlStyle.LARGE, position: google.maps.ControlPosition.RIGHT_BOTTOM }, panControl: false, panControlOptions: { position: google.maps.ControlPosition.BOTTOM_RIGHT }, mapTypeControl: false, draggable: true, scaleControl: true, scrollwheel: true, navigationControl: true, streetViewControl: false, mapTypeId: google.maps.MapTypeId.ROADMAP }); markers[markers.length] = { item: new google.maps.Marker({ position: { lat: (response.latitude == 0) ? 37.09024 : parseFloat(response.latitude), lng: (response.longitude == 0) ? -100.712891 : parseFloat(response.longitude) }, map: googlemap, title: "Hi" }), infWin: new google.maps.InfoWindow({ content: "<span style='color:red;'>Hey</span>" }) }; markers[markers.length - 1].item.addListener("mousedown", function () { for (var j = 0; j < markers.length; j++) { if (markers[j].item === this) { markers[j].infWin.open(googlemap, markers[j].item); } else { markers[j].infWin.close(); } } }); } function getLocation() { var script = document.createElement("script"); script.src = "http://freegeoip.net/json?callback=loadMap"; document.body.insertBefore(script, document.body.firstChild); } </script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE&sensor=false&callback=getLocation" type="text/javascript"></script>
Get a key from this Google site.