In this article, I will show you how to integrate google maps into website. The google maps API v3 accepts country name or city name or Latitude and Longitude. If you enter a city or country name it automatically get the Longitude and Latitude value.
The google maps API supports Html5 and you have to declare DOCTPYE set to true within your web application. Create a div element id “map-canvas” and load the maps using JavaScript API and display location on google map.
<script src="https://maps.googleapis.com/maps/api/js?v=3&key=YOUR-KEY" type="text/javascript"></script>
The URL contained in the script tag of the source will load all the symbols and definition of the goolge maps API. You need to pass the parameter API key to the URL. To Load country or city on the textbox click the link.
To get started working with google maps location API click the link which will guide you the process of activating it.
Html code:
<h2>integrate google map in website </h2>
<script src="https://maps.googleapis.com/maps/api/js?v=3&key= YOUR-KEY" type="text/javascript"></script>
<script>
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(40.73, -73.93);
var mapOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: latlng,
animation: google.maps.Animation.BOUNCE
});
marker.setMap(map);
}
function getAddress() {
var address = document.getElementById('address').value;
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<body>
<div id="panel">
<input id="address" type="text" value="New York">
<input type="button" value="Search" onclick="getAddress()">
</div>
<div id="map-canvas" style="width: 500px; height: 380px; border: 5px solid #5E5454;">
</div>
</body>
Description: It has two required and optional parameters. The zoom property will zoom the corresponding map of the fully earth. If you entered larger value, zoom levels are at higher resolution. The following web page will display a map of New york city, USA.
Google map jQuery example:
Post your comments / questions
Recent Article
- Your system's memory configuration has changed since it entered hibernation.
- Save image to client browser using jQuery?
- Get filename of image jQuery?
- How to get the image src using JavaScript?
- System.Net.Http.Formatting, Version=5.2.3.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35' which has a higher version than referenced assembly 'System.Net.Http.Formatting' with identity 'System.Net.Http.Formatting, Version=4.0.0.0
- Cordova Android build error "Cannot read property 'length' of undefined". An error occurred while running subprocess cordova.
- ERROR in The Angular Compiler requires TypeScript >=3.9.2 and <4.0.0 but 3.8.3 was found instead
- Code ENOLOCAL Could not install from "android" as it does not contain a package.json file.
Related Article