Google provide lots of easy method to integrate map in your HTML or php. Here i am trying just to explain a simple method by which you can pass address at the time of initialization of map on body load.
Also you can show same address in you info window. You can modify function to passing extra parameters for showing extra information in HTML info window.
What you need to implement in simple steps
1. script for initialization map
2. A HTML div element in which you are going to show map
3. css for this div element according to your requirement
4. body onload function to calling your script part
Here i am trying combination of all above steps
1. script
you need to include Google map API script
<script type=”text/javascript” src=”http://maps.google.com/maps/api/js?sensor=false”></script>
script part for initliaze the function
<script type=”text/javascript”>
var geocoder;
var map;
//var address =”India”;
function initialize(address) {
geocoder = new google.maps.Geocoder();
// LatLng ypu can also calculate fro geo adress in case you want to implement exact cordinates
var latlng = new google.maps.LatLng(-34.397, 150.644);
// few option related to map display like default zoom level, map type
var myOptions = {
zoom: 5,
center: latlng,
mapTypeControl: false,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// object of map for you html div element on baisis of div id
map = new google.maps.Map(document.getElementById(“map_canvas”), myOptions);
if (geocoder) {
geocoder.geocode( { ‘address’: address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
map.setCenter(results[0].geometry.location);
var infowindow = new google.maps.InfoWindow(
{ content: ‘<b>’+address+'</b>’,
size: new google.maps.Size(150,50)
});
var marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
title:address
});
google.maps.event.addListener(marker, ‘click’, function() {
infowindow.open(map,marker);
});
} else {
alert(“No results found”);
}
} else {
alert(“Geocode was not successful for the following reason: ” + status);
}
});
}
}
</script>
2. html element for div
<div id=”map_canvas”></div>
3. css
<style type=”text/css”>
#map_canvas {
width:450px;
height:150px;
border:1px solid #990000; }
</style>
4. body onload function
<body onload=”initialize(‘INDIA’)”>
that’s it, you can modify this function or can use more advance option of Google map.
- Jquery webcam plugin - June 19, 2016
- How To Add and Delete Users on a CentOSServer - June 5, 2016
- How To Set Up vsftpd on CentOS 6 - June 5, 2016