Hi all I am working on google map api-3 and I have two interface one is inserting data to my database and second getting the data on my site from my database now everything is working fine I insert the data to my databse and getting it but here is the problem I need to center the map on the marker key on the map
here is my code
to insert the data
php code - <?php
-
// Gets data from URL parameters
-
$name = $_GET['name'];
-
$address = $_GET['address'];
-
$lat = $_GET['lat'];
-
$lng = $_GET['lng'];
-
$type = $_GET['type'];
-
-
mysql_connect("localhost", "root", "") or
-
die("Could not connect: " . mysql_error());
-
mysql_select_db("arabia");
-
-
// Insert new row with user data
-
$query = sprintf("INSERT INTO markers " .
-
" (id, name, address, lat, lng, type ) " .
-
" VALUES (NULL, '%s', '%s', '%s', '%s', '%s');",
-
mysql_real_escape_string($name),
-
mysql_real_escape_string($address),
-
mysql_real_escape_string($lat),
-
mysql_real_escape_string($lng),
-
mysql_real_escape_string($type));
-
-
$result = mysql_query($query);
-
-
if (!$result) {
-
die('Invalid query: ' . mysql_error());
-
}
-
-
?>
and this is the HTML code - <!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>Google Maps JavaScript API v3 Example: Map Simple</title>
-
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
-
<script type="text/javascript">
-
var marker;
-
var infowindow;
-
-
function initialize() {
-
var latlng = new google.maps.LatLng(30.0599153,31.2620199,13);
-
var options = {
-
zoom: 13,
-
center: latlng,
-
mapTypeId: google.maps.MapTypeId.ROADMAP
-
}
-
var map = new google.maps.Map(document.getElementById("map-canvas"), options);
-
var html = "<table>" +
-
"<tr><td>Name:</td> <td><input type='text' id='name'/> </td> </tr>" +
-
"<tr><td>Address:</td> <td><input type='text' id='address'/></td> </tr>" +
-
"<tr><td>Type:</td> <td><select id='type'>" +
-
"<option value='bar' SELECTED>bar</option>" +
-
"<option value='restaurant'>restaurant</option>" +
-
"</select> </td></tr>" +
-
"<tr><td></td><td><input type='button' value='Save & Close' onclick='saveData()'/></td></tr>";
-
infowindow = new google.maps.InfoWindow({
-
content: html
-
});
-
-
google.maps.event.addListener(map, "click", function(event) {
-
marker = new google.maps.Marker({
-
position: event.latLng,
-
map: map
-
});
-
google.maps.event.addListener(marker, "click", function() {
-
infowindow.open(map, marker);
-
});
-
});
-
}
-
-
function saveData() {
-
var name = escape(document.getElementById("name").value);
-
var address = escape(document.getElementById("address").value);
-
var type = document.getElementById("type").value;
-
var latlng = marker.getPosition();
-
-
var url = "phpsqlinfo_addrow.php?name=" + name + "&address=" + address +
-
"&type=" + type + "&lat=" + latlng.lat() + "&lng=" + latlng.lng();
-
downloadUrl(url, function(data, responseCode) {
-
if (responseCode == 200 && data.length <= 1) {
-
infowindow.close();
-
document.getElementById("message").innerHTML = "Location added.";
-
}
-
});
-
}
-
-
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.responseText, request.status);
-
}
-
};
-
-
request.open('GET', url, true);
-
request.send(null);
-
}
-
-
function doNothing() {}
-
</script>
-
</head>
-
-
<body style="margin:0px; padding:0px;" onload="initialize()">
-
<div id="map-canvas" style="width: 800px; height: 600px"></div>
-
<div id="message"></div>
-
</body>
-
-
</html>
now this is getting data from the db code
php code - <?php
-
-
// 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
-
-
mysql_connect("localhost", "root", "") or
-
die("Could not connect: " . mysql_error());
-
mysql_select_db("arabia");
-
-
// Select all the rows in the markers table
-
-
$query = "SELECT * FROM markers WHERE 1";
-
$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)){
-
// ADD TO XML DOCUMENT NODE
-
$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("type", $row['type']);
-
}
-
-
echo $dom->saveXML();
-
-
?>
and the html code -
<!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>map</title>
-
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
-
<script type="text/javascript">
-
//<![CDATA[
-
-
var customIcons = {
-
restaurant: {
-
icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png'
-
},
-
bar: {
-
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png'
-
}
-
};
-
function load() {
-
var map = new google.maps.Map(document.getElementById("map"), {
-
center: new google.maps.LatLng(30.0599153,31.2620199,13)||map.setCenter(marker.getPosition()),
-
zoom: 13,
-
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 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
-
});
-
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: 500px; height: 300px"></div>
-
</body>
-
-
</html>
now how to center the map on the key
0  2017  Sign in to post your reply or Sign up for a free account.
Similar topics | |
by: Sean |
last post by:
Have you ever wanted to add the great features inherent in Google Maps?
Here is how you do it.
==============
== STEP ONE ==
==============
Create a new MS Access form called frmGoogleMap. Size the form to your
liking...
|
by: JimInOC |
last post by:
Does anyone have any idea as to how google loads pieces of images
together so as you drag new image pieces are loaded from the server?
I haven't had much luck finding any articles on it.
thanks
|
by: Sam Carleton |
last post by:
Ok, over the years I have read about doing web programing and I have
done some real basic stuff. Now I am digging into some real ASP.Net
2.0 and am totally lost some things.
I have a master page setup and that is working great. On my contact
page I would like to use Google Maps API Version 2 to show a map to my
location. Below is the first Google example.
I would like to add this to my aspx page that is using the master page.
I...
|
by: Lemon Tree |
last post by:
Hi everybody.
I am new to Javascript so probably I am asking something trivial, but I
cannot see where there problem is.
Or, better. Maybe I know where the problem is but I cannot find a
solution. So, here we go...
I have loaded an XML document containing a bunch of addresses.
For each address I would like to put a marker on a map using the Google
Maps API. In order to do so, I iterate over the address tags in the XML
|
by: ziycon |
last post by:
I'm not sure if anyone here would know anything about the google map js, i've tried the google maps api community with no luck.
I have the below code, it loads ok, but when i click on the map it
doesn't place a marker.
What should happen is that when you click on the map it should place a
marker and when clicked on the map a second time that it should place
a marker at the new location and remove the previous one so that there
...
| | |
by: Nike1984 |
last post by:
I'm fairly new to Javascript and it's more of a guessing game for me...
I'm trying to build an app for Google Maps and just had some issues recently.
First off I just wanted to say that everything works fine in FF and IE. It's Chrome I'm having issues with.
I understand that Chrome is still somewhat in beta stages, so some bugs might occur. However this seems like something I might have done.
So...
I used a code that I found on Econym as...
|
by: Ashriya |
last post by:
Hi All,
I have developed a Google maps application in which there are a few markers. On mouse over of those markers, I need to show certain data. The map is placed inside the iframe of a window. The content on mouseover is through a label created from a Label.js file. How do I display the label next to the marker itself? Could someone please help me with this? Thanks in advance.
|
by: lucas vidgen |
last post by:
Hi,
I'm trying to write a function that will show arrowheads on polylines selected from a select box in a google map. I only want the arrowheads that belong to the line shown to be displayed.
I have got it working using check boxes, and the select box shows the lines, but am having trouble tweaking the code to get the arrows to show up as well. You can see the working checkboxes (and the semi-working selectbox) here:...
|
by: mfaisalwarraich |
last post by:
Hi everyone,
I am trying to add multiple pinpoint to google map using Lon/Lat. All addresses will be fetched from mysql database using PHP.
I have looked at google and searched for it on various sites but nothing helpful i found.
i have used the following code which worked for only one address whereas i have alot of addresses.
<!DOCTYPE html>
|
by: George Thompson |
last post by:
i have a google maps api on my website, where when you click it grabs the lat/long coordinates and works well for me, but i would for a visual reference like to see a marker added to the place where i clicked do i know exactly where it is.. and i\'ve tried many different configurations.. any ideas?
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder;...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it.
Here is my compilation command:
g++-12 -std=c++20 -Wnarrowing bit_field.cpp
Here is the code in...
| | |
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own....
Now, this would greatly impact the work of software developers. The idea...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one.
At the time of converting from word file to html my equations which are in the word document file was convert into image.
Globals.ThisAddIn.Application.ActiveDocument.Select();...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols.
I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
| | |
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
|
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...
| |
