Friday, October 18, 2013
Implementing Google Maps On Your Site
Hiiii, we all know that Google maps is powerful application which allows to get location information with actual coordinates value. You may have seen Google maps on some website demanding for you location and it calculates the coordinates correspondingly according to your location. So, here in this tutorial, I will be teaching you how to integrate Google maps on your website.
In these maps, coordinates values are automatically fetch when the user puts marker on the map. This tutorial which I will be teaching here will have Google map, putting,hiding and deleting markers on the map functionality.
It is very light weight Google Maps code and easy to use and it is mostly build in javascript.
CODE BEGINS :
<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
var myCenter=new google.maps.LatLng(51.508742,-0.120850);
var markers = [];
var map;
function initialize()
{
var mapProp = {
center:myCenter,
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var myCenter=new google.maps.LatLng(51.508742,-0.120850);
var markers = [];
var map;
function initialize()
{
var mapProp = {
center:myCenter,
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
placeMarker(event.latLng);
});
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map,
});
var marker = new google.maps.Marker({
position: location,
map: map,
});
markers.push(marker);
var infowindow = new google.maps.InfoWindow({
content: 'Latitude: ' + location.lat() + '<br>Longitude: ' + location.lng()
});
infowindow.open(map,marker);
}
}
var infowindow = new google.maps.InfoWindow({
content: 'Latitude: ' + location.lat() + '<br>Longitude: ' + location.lng()
});
infowindow.open(map,marker);
}
}
function setAllMap(map) {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(map);
}
}
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(map);
}
}
function clearMarkers() {
setAllMap(null);
}
setAllMap(null);
}
function showMarkers() {
setAllMap(map);
}
setAllMap(map);
}
// Deletes all markers in the array by removing references to them.
function deleteMarkers() {
clearMarkers();
markers = [];
}
function deleteMarkers() {
clearMarkers();
markers = [];
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
</script>
</head>
<body>
<input onclick="clearMarkers();" type=button value="Hide Markers">
<input onclick="showMarkers();" type=button value="Show All Markers">
<input onclick="deleteMarkers();" type=button value="Delete Markers">
<div id="googleMap" style="width:700px;height:400px;"></div>
</body>
</html>
<input onclick="clearMarkers();" type=button value="Hide Markers">
<input onclick="showMarkers();" type=button value="Show All Markers">
<input onclick="deleteMarkers();" type=button value="Delete Markers">
<div id="googleMap" style="width:700px;height:400px;"></div>
</body>
</html>
Hope you like this post……..Please Comment…………!!!!!!!!!
Tags: HTML , Javascript/Jquery , PHP
Subscribe to:
Post Comments (Atom)
0 Responses to “Implementing Google Maps On Your Site”
Post a Comment