comment 0

Generate Google Map with Geocode

In this case We just put some variable from json file of google map and show the result in grapichal map. The json file is generate from this url = http://maps.google.com/maps/api/geocode/json?address=the_address_target&sensor=false . When the json was generate we put longitude and latitude to draw the map, also other information.


Sponsored links


<?php
// created by Rosdyana Kusuma - admin@r3m1ck.us
// reference : http://www.w3schools.com/googleAPI
error_reporting(0);
 
$address = $_GET[address];
$prepAddr = str_replace(' ','+',$address);
//create json file from target 
$geocode = file_get_contents('http://maps.google.com/maps/api/geocode/json?address='.$prepAddr.'&sensor=false');
//decode the json file
$output = json_decode($geocode);
//put value of latitude and longitute for generate in map
$lat = $output->results[0]->geometry->location->lat;
$long = $output->results[0]->geometry->location->lng;
//other variabel from json file
$info1 = $output->results[0]->address_components[1]->long_name;
$info2 = $output->results[0]->address_components[2]->long_name;
$info3 = $output->results[0]->address_components[3]->long_name;
 
?>
<!DOCTYPE html>
<html>
<head>
<title>Map of <?php echo $address ?></title>
<meta name="author" content="Rosdyana Kusuma">
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBKqpfZ06WTvgbJJzVhVuf0gGbCvEPuA9s&sensor=false">
</script>
 
<script>
//get variabel latitude and longitude
var lat2 = '<?php echo $lat; ?>';
var long2 = '<?php echo $long; ?>';
//get other var
var info1 = '<?php echo $info1; ?>';
var info2 = '<?php echo $info2; ?>';
var info3 = '<?php echo $info3; ?>';
 
var myCenter = new google.maps.LatLng(lat2,long2);
var marker;
 
function initialize()
{
var mapProp = {
  center:myCenter,
  zoom:12,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };
 
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
 
marker=new google.maps.Marker({
  position:myCenter,
  animation:google.maps.Animation.BOUNCE
  });
 
marker.setMap(map);
 
var infowindow = new google.maps.InfoWindow({
  content:info1+", "+info2+", "+info3
  });
 
google.maps.event.addListener(marker, 'click', function() {
  infowindow.open(map,marker);
  });
}
 
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
 
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>

That codes will be accessed by domain/map.php?address=target_address , example : domain/map.php?address=kebumen
Happy Coding :P

Leave a Reply

Your email address will not be published. Required fields are marked *