i am try to google load map which get map from address for that i try below code but it not work for me please find out my mistake.
<html>
<head>
<script src="http://maps.google.com/maps/api/js?libraries=places®ion=uk&language=en&sensor=true"></script>
<script type="text/javascript">
var geocoder;
var map;
function codeAddress() {
geocoder = new google.maps.Geocoder();
var lat = '';
var lng = '';
var city_state_zip ='390002';
var street_address = 'vadodara';
var address = street_address + " " + city_state_zip;
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
lat = results[0].geometry.location.lat(); //getting the lat
lng = results[0].geometry.location.lng(); //getting the lng
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);
}
});
var latlng = new google.maps.LatLng(lat, lng);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
window.onload = function () {
codeAddress();
}
</script>
</head>
<body>
<div id="map_canvas" style="height: 350px; width: 500px; margin: 0.6em;">
</div>
</body>
</html>
in that there i add location manual which is '390002 vadodara'.
See the Google Maps API here
What you want to do is send an AJAX request like the following:
http://maps.googleapis.com/maps/api/geocode/json?sensor=false&address=vadodara+390002
This will return latitude and longitude coordinates for you to plot on the map
Here is a complete solution, the RTN_address.php function is below.
This will return a map that has a marker on the address specified.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8" / >
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 300px;
width: 840px;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
function show_map_from_sql_address(id) {
var url_with_ID = "RTN_address.php?id=" + id.toString();
$.ajax({
type : "GET",
url : url_with_ID,
data : "pid=A5843",
dataType : "json",
success : function(data) {
var geocoder = new google.maps.Geocoder();
var address = data.foo;
var map;
geocoder.geocode({
'address' : address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var latitude = results[0].geometry.location.lat();
var longitude = results[0].geometry.location.lng();
var latlng = new google.maps.LatLng(latitude, longitude);
var mapOptions = {
zoom : 10,
center : latlng,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map : map,
position : results[0].geometry.location
});
}
});
}
});
};
</script>
</head>
<body onload="show_map_from_sql_address(7)">
<div id="map-canvas"></div>
</body>
</html>
RTN_address.php
<?php
$id = $_GET['id'];
$query1 = "SELECT * FROM table_of_homes WHERE id ='" . $id . "';";
$result1 = mysql_query($query1);
$address = "Not_set";
if (!$result1) {
die('Invalid query: ' . mysql_error());
} else {
$fields = array();
while ($row1 = mysql_fetch_array($result1, MYSQL_ASSOC)) {
$Street_Address = $row1['Street_Address'];
$City_Town = $row1['City_Town'];
$State = $row1['State']`enter code here`;
$Zipcode = $row1['Zipcode'];
$address = $Street_Address ." ". $City_Town ." ". $State .", ". $Zipcode;
}
}
//NOTE: you can test this by entering an address here.
//$address = "111 Oak Hill Avenue Kingston PA, 18760";
echo json_encode(array('foo' => $address ));
?>
Related
I am aiming to have a map that centre's on a user's current location with markers pulled from a mysql database displayed. I can make my map display a certain lat or lng when specified but I am having trouble taking the user's current location and using this to modify the map's centre.
Any help would be appreciated!
:)
<!DOCTYPE html >
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>PHP/MySQL & Google Maps Example</title>
<script src="markerclusterer.js" type="text/javascript"></script>
<script src="https://maps.googleapis.com/maps/api/js? key="
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function showLocation(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
alert("Latitude : " + latitude + " Longitude: " + longitude);
}
function errorHandler(err) {
if(err.code == 1) {
alert("Error: Access is denied!");
}
else if( err.code == 2) {
alert("Error: Position is unavailable!");
}
}
function getLocation(){
if(navigator.geolocation){
// timeout at 60000 milliseconds (60 seconds)
var options = {timeout:60000};
navigator.geolocation.getCurrentPosition(showLocation, errorHandler, options);
}
else{
alert("Sorry, browser does not support geolocation!");
}
}
var customIcons = {
restaurant: {
icon: 'http://orthodontistsearch.com.au/data/documents/Icon.png',
},
bar: {
icon: 'http://orthodontistsearch.com.au/data/documents/Icon.png',
}
};
function load() {
var cluster = [];
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng('latitude' , 'longitude'),
zoom: 4,
mapTypeId: 'roadmap'
});
var infowindow = new google.maps.InfoWindow();
// Change this depending on the name of your PHP file
downloadUrl("phpsqlajax_genxml.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var type = markers[i].getAttribute("type");
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var phone = markers[i].getAttribute("phone");
var url = markers[i].getAttribute("url");
var html = name + "<br>" + "Address: " + address + "<br>" + "Phone Number: " + phone + "<br>" + " Website: " + url + "<br>" ;
infowindow.setContent(html);
infowindow.open(map, marker, html);
}
})(marker, i));
cluster.push(marker);
}
var mc = new MarkerClusterer(map,cluster);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
//]]>
</script>
</head>
<body onload="load()">
<style type="text/css">
div#map { margin: 0 auto 0 auto; }
</style>
<div id="map" style="width: 80%; height: 500px"></div>
</body>
i m uploading demo code which i have used in my system for map display in center. Hope this will help you.
Logic
$result_count = $query_count->result(); //Count row
$count = $result_count[0]->total / 2;
if($count % 2 == 0){
$cal = $count - 0.5;
$query_latlng = $this->db->query("SELECT latitude, longitude FROM 'table_name' WHERE id = '$cal' ");
$result_latlng = $query_latlng->result();
}
else{
$cal = $count;
$query_latlng = $this->db->query("SELECT latitude, longitude FROM 'table_name' WHERE id = '$cal' ");
$result_latlng = $query_latlng->result();
}
Google Map
var cluster = [];
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(<?php echo $result_latlng[0]->latitude; ?>,<?php echo $result_latlng[0]->longitude; ?>),
zoom: 4,
mapTypeId: 'roadmap'
});
im currenty undataking a project which includes a google map API!im loading markers on the map using mysql from my database. now what am trying to accomplish is something like this i have seen before http://www.tanesco.co.tz/index.php?option=com_wrapper&view=wrapper&Itemid=155
I want to create a link on the displayed table which when clicked it opens up an info window on the map....I completely have no idea where to start
This is my map code
<?php include("connect.php");
?>
<!DOCTYPE html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="stylesheet.css" type="text/css" rel="stylesheet" media="screen" />
<title>AzamTv Customer Database</title>
<style type="text/css">
<!--
.style2 {color: #999999}
.style3 {color: #666666}
.style4 {color: #FF0000}
.style5 {color: #3366FF}
-->
</style>
<script src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
<script language="javascript" type="text/javascript">
function downloadUrl(url,callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
//Get element by ID where the function return tand get the latitude and longitude
//do not embed any thing before authorized permition to google.
function load() {
var map = new google.maps.Map(document.getElementById("map_canvas"), {
center: new google.maps.LatLng( -6.801859, 39.282503),
zoom: 13,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
downloadUrl("mapxml.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var licence_number = markers[i].getAttribute("Licence_number");
var phone = markers[i].getAttribute("phone");
var business_image = markers[i].getAttribute("business_image");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
//Creating image
var image_src= "<div><img width='100' height='100' src=' "+ business_image +"' /></div>";
var html = "<b>" +"<h4>Business Name:</h4>"+ name + "</b> <br/><br/>"+"<h4>Address:</h4>" + address + "</b> <br/><br/>"+"<h4>Licence Type:</h4>" + licence_number + "</b> <br/><br/>" + "<h4>Phone:</h4>" + phone + "</b> <br/><br/>"+"<h4>Image:</h4>" + image_src + "</br> Zoom out Zoom in" ;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
//If u wanna change the markers by adding custom ones of ur own add here
var customIcons = {
TIN: {
icon: 'http://maps.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png'
},
VAT: {
icon: 'http://maps.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png'
}
};
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
// Pan map center to marker position
map.panTo(marker.getPosition());
var c= map.getZoom()+3;
var maxZoom=map.mapTypes[map.getMapTypeId()].maxZoom;
if(c<=maxZoom){
map.setZoom(c+3);
}
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function doNothing() {}
function zoomout() {
var d = map.getZoom();
if(d>0){
map.setZoom(d-1);
}
// e = map.getCenter();
// map.setZoom(d - 1);
// map.setCenter(e.Longitude, e.Latitude);
// should be: map.setCenter(e.lat(), e.lng());
}
function zoomin() {
var x = map.getZoom();
var maxZoom=map.mapTypes[map.getMapTypeId()].maxZoom;
if(x<maxZoom){
map.setZoom(x+1);
}
// y = map.getCenter();
// map.setZoom(x + 1);
// map.setCenter(y.Longitude, y.Latitude);
// should be: map.setCenter(y.lat(), y.lng());
}
</script>
<script language="javascript" type="text/javascript">
//Script For The Search
function cleartxt()
{
formsearch.searched1.value="";
}
function settxt()
{
if(formsearch.searched1.value=="")
{
formsearch.searched1.value="Search Customer";
}
}
</script>
</head>
<body onLoad="load()">
<div id="map" style="width: 100%; height: 80%"></div>
</body>
</html>
Thank you all in advance
You create markers like
var marker = new google.maps.Marker({
position: myLatlng,
title:"Your title"
});
create links which on click trigger
infowindow.open(map,marker);
thats all i guess.
EDIT: You could identify which marker needs to be shown by href-parameter
I'm working on a project where I have a need to draw a map with a little over 500 points on it. The code I have works well up to 250 points. But when I have all 500 coordinates in the XML file that it parses, no points end up displaying on the map.
I imagine there is some kind of throttling that is causing it to fail but I can't figure out how to include this in the code.
Any ideas?
locations.xml (abbreviated)
<markers>
<marker name="" address="800 Occidental Ave S Seattle, WA 98134" lat="47.595091" lng="-122.333229" type="location" />
<marker name="" address="Bridge Street, City of Westminster, SW1A 0AA, United Kingdom" lat="51.499100" lng="-0.121955" type="location" />
</markers>
map.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
<script type="text/javascript">
var customIcons = {
location: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
}
};
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(27.2500, 2.5200),
// world (27.2500, 2.5200), zoom 2
// usa (39.6791686, -95.5335914), zoom 4
zoom: 2,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("locations.xml", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b> <br/>" + address;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
//bindInfoWindow(marker, map, infoWindow, html);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
//infoWindow.setContent(html);
//infoWindow.open(map, marker);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
</script>
</head>
<body onLoad="load()">
<div id="map" style="width: 1050px; height: 550px"></div>
</body>
</html>
My guess is there is a problem with your data somewhere around the 250th entry.
I want to search for locations in a particular place on the google places api and display them on JSOn output.Suppose I want to search for all the banks my near place. How do I code for that.Can you please give sample code.
try this working code..it uses jquery mobile. it finds the places around your current lat & lon.
map.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/jquery.mobile-1.0.min.css" />
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.0.js"></script>
<script src="js/map.js"></script>
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=true&libraries=places"></script>
</head>
<body>
<div data-role="page" data-theme="none" class="page-map" id="page-map">
<script src="js/canvas.js"></script>
<div id="map-canvas">
<!-- map loads here... -->
</div>
</div>
</body>
</html>
map.js
var map;
var infowindow;
var lat;
var lng;
var lng;
var service;
var reference;
var initialLocation;
$( '.page-map' ).live( 'pagecreate',function(event){
checkLocation();
});
function checkLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
initialLocation = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
lat = position.coords.latitude;
lng = position.coords.longitude;
callPlaceService(lat, lng);
}, gpsFail, {
enableHighAccuracy : true,
maximumAge : 300000
});
}
}
function callPlaceService(lat, lng) {
var pyrmont = new google.maps.LatLng(lat, lng);
var myOptions = {
zoom : 15,
center : pyrmont,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
var request = {
location : pyrmont,
radius : 5000,
//types: ['atm','bank'],
keyword : 'Bank'
};
service = new google.maps.places.PlacesService(map);
service.search(request, callback);
}
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for ( var i = 0; i < results.length; i++) {
var requestDetails = {reference : results[i].reference};
service.getDetails(requestDetails, checkDetailedStatus);
}
}
}
function checkDetailedStatus(details, detailStatus) {
if (detailStatus == google.maps.places.PlacesServiceStatus.OK) {
var name = '{"name":"'+ details.name +'"}';
var address = '{"address":"' + details.formatted_address + '"}';
var phone = '{"phone":"' + details.formatted_phone_number+ '"}';
var website = '{"website":"' + details.website + '"}';
var full_address = name + "," + address + "," + phone + "," + website;
console.log(full_address);
var jsonTxt = JSON.stringify(full_address);
}
}
function gpsFail() {
//Geo-location is supported, but we failed to get your coordinates.
}
Try this.
Here you need to give radius according to your distance. Types may be ATM, Restaurants, Gas Station the way you needs.
You need to give places like Chennai, Bangalore, etc or you provide latitude/longitude. Describe it briefly. You in android/iphone
I have a MySQL db that I convert to XML on the fly for querying a RouteBoxer page. I began all of these pages from Google examples. So, in order to get my XML, I have:
<?php
require("phpsqlajax_dbinfo.php");
// Get parameters from URL
$center_lat = $_GET["lat"];
$center_lng = $_GET["lng"];
$radius = $_GET["radius"];
// Start XML file, create parent node
$dom = new DOMDocument("1.0");
$node = $dom->createElement("markers");
$parnode = $dom->appendChild($node);
// Opens a connection to a mySQL server
$connection=mysql_connect ($hostname_DB2, $username_DB2, $password_DB2);
if (!$connection) {
die("Not connected : " . mysql_error());
}
// Set the active mySQL database
$db_selected = mysql_select_db($database_DB2, $connection);
if (!$db_selected) {
die ("Can\'t use db : " . mysql_error());
}
// Search the rows in the markers table
$query = sprintf("SELECT id, address, name, lat, lng, type FROM markers");
$result = mysql_query($query);
if (!$result) {
die("Invalid query: " . mysql_error());
}
header("Content-type: text/xml");
// Iterate through the rows, adding XML nodes for each
while ($row = #mysql_fetch_assoc($result)){
$node = $dom->createElement("marker");
$newnode = $parnode->appendChild($node);
$newnode->setAttribute("name", $row['name']);
$newnode->setAttribute("address", $row['address']);
$newnode->setAttribute("lat", $row['lat']);
$newnode->setAttribute("lng", $row['lng']);
$newnode->setAttribute("id", $row['id']);
}
echo $dom->saveXML();
?>
Similarly, my RouteBoxer code looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Search Along a Route Example</title>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script src="/Test/Domain/src/RouteBoxer.js" type="text/javascript"></script>
<script type="text/javascript">
var map = null;
var boxpolys = null;
var directions = null;
var routeBoxer = null;
var markers = [];
var infoWindow;
var locationSelect;
var distance = null; // km
function initialize() {
// Default the map view to the UK.
var mapOptions = {
center: new google.maps.LatLng(54.219218, -2.905669),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 6
};
map = new google.maps.Map(document.getElementById("map"), mapOptions);
routeBoxer = new RouteBoxer();
directionService = new google.maps.DirectionsService();
directionsRenderer = new google.maps.DirectionsRenderer({ map: map });
}
function route() {
// Clear any previous route boxes from the map
clearBoxes();
// Convert the distance to box around the route from miles to km
distance = parseFloat(document.getElementById("distance").value) * 1.609344;
var request = {
origin: document.getElementById("from").value,
destination: document.getElementById("to").value,
travelMode: google.maps.DirectionsTravelMode.DRIVING
}
// Make the directions request
directionService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsRenderer.setDirections(result);
// Box around the overview path of the first route
var path = result.routes[0].overview_path;
var boxes = routeBoxer.box(path, distance);
drawBoxes(boxes);
} else {
alert("Directions query failed: " + status);
}
});
}
// Draw the array of boxes as polylines on the map
function drawBoxes(boxes) {
boxpolys = new Array(boxes.length);
for (var i = 0; i < boxes.length; i++) {
boxpolys[i] = new google.maps.Rectangle({
bounds: boxes[i],
fillOpacity: 0,
strokeOpacity: 1.0,
strokeColor: '#000000',
strokeWeight: 1,
map: map
//Perform Search
});
}
}
// Clear boxes currently on the map
function clearBoxes() {
if (boxpolys != null) {
for (var i = 0; i < boxpolys.length; i++) {
boxpolys[i].setMap(null);
}
}
boxpolys = null;
}
</script>
<style>
#map {
border: 1px solid black;
}
</style>
</head>
<body onload="initialize();">
<div id="map" style="width: 800px; height: 600px;"></div>
Box within at least <input type="text" id="distance" value="5" size="2">miles
of the route from <input type="text" id="from" value="tacoma"/>
to <input type="text" id="to" value="seattle"/>
<input type="submit" onclick="route()"/>
</body>
</html>
So how do I get my items to apepar within the routeboxer? How can I send the bounds of the routeboxer to the xml to query? Or, looking at it from the other way around, how do i get my RouteBoxer to query the XML and return only the items within the bounds?
I'm very confused!