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!
Related
i have to try to fetch lat ,lng value from db and encode results in json like this
[{"name":"ahmedabad,GUJ","lat":"72.5226896","lng":"72.5226896"}]
but marker not displaying on map(location not display on map)
this is my code, what are the my mistake please guide me
<?php
include "db.php";
/* lat/lng data will be added to this array */
$locations=array();
$query = $db->query("SELECT * FROM ds_petroling_history");
while( $row = $query->fetch_assoc() ){
$nama_kabkot = $row['name'];
$longitude = $row['lng'];
$latitude = $row['lat'];
/* Each row is added as a new array */
$locations[]=array( 'name'=>$nama_kabkot, 'lat'=>$longitude, 'lng'=>$longitude );
}
/* Convert data to json */
$markers = json_encode($locations);
?>
<html>
<head>
</head>
<body>
<div><?php echo $markers ?></div>
<script type='text/javascript'>
<?php
echo "var markers=$markers;\n";
?>
function initMap() {
var latlng = new google.maps.LatLng(23.0117523,72.5226665);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
};
var map = new google.maps.Map(document.getElementById("peta"),myOptions);
var infowindow = new google.maps.InfoWindow(), marker, lat, lng;
var json=JSON.parse( markers );
for( var o in json ){
lat = json[ o ].lat;
lng=json[ o ].lng;
name=json[ o ].name;
marker = new google.maps.Marker({
position: new google.maps.LatLng(lat,lng),
name:name,
map: map
});
google.maps.event.addListener( marker, 'click', function(e){
infowindow.setContent( this.name );
infowindow.open( map, this );
}.bind( marker ) );
}
}
</script>
<div id="peta" style="width: 100%; height: 660px;">
</div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=yourkey&callback=initMap"
type="text/javascript"></script>
</body>
</html>
value fetched from db successfully and encode in json also but not find those coordinates location on map
you have just assigned the values for markers to a php var not to a javascript var
/* Convert data to json */
$markers = json_encode($locations);
echo "<script>
var markers[] = " . $markers .";
</script>";
?>
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'
});
I am beginner to web and making a webpage with google map and a marker in it. Admin can moniter the position of mobile that sends its coordinates (longitude, latitude) to server after some time interval, these coordinates are stored in database with a particular id.
The position of marker should change when coodinates changes, I am unable to understand how it will be done.
I have made php file to fetch the coordinates but cant understand how to proceed further.
This is the webpage that i have made so far:
<!DOCTYPE html>
<html>
<head>
<style>
#map { width: 1000px;height: 500px;}
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
var latlng = {lat: 31.54972, lng: 74.34361};
function initialize()
{
var mapCanvas = document.getElementById('map');
var mapOptions =
{
center: latlng,
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new google.maps.Marker({
position: latlng,
title: "Hello World!"
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
and here is the php file to fetch coordinates from database:
<?php
define('HOST','localhost');
define('USER','root');
define('PASS','');
define('DB','coordinates');
$con = mysqli_connect(HOST,USER,PASS,DB);
$id = $_GET['id'];
$query = "SELECT longitude,latitude FROM data";
$qry_result = mysqli_query($con,$query) or die(mysqli_error());
// Insert a new row in the table for each person returned
while($row = mysqli_fetch_array($qry_result)) {
$longitude = $row['longitude'];
$latitide = $row['latitude'];
}
?>
Okay, I'll first show you the result with test data, so you see how the map hehaves.
I add jQuery, to do the Ajax call. Ajax lets the webbrowser surf to any page on your site, without leaving the page. The user doesn't notice anything going on
10 points on a line through Lahore. Cookies store the index (0 to 9).
testdata.php
<?php
// this test loops a trajectory through Lahore, in 10 steps.
// every 10 steps it goes back to the start
// it's just test data, to show the map is working
// $start = 31.468885630398272,74.24052429199217
// $end = 31.572736162286912,74.43412613868712
$i = (isset($_COOKIE['i']) ? $_COOKIE['i'] + 1 : 0) % 10;
setcookie('i', $i);
echo json_encode(array(
'lat'=>31.468885630398272 + (31.572736162286912 - 31.468885630398272) * $i / 10,
'lng'=>74.24052429199217 + (74.43412613868712 - 74.24052429199217) * $i / 10
));
exit;
?>
index.php
<!DOCTYPE html>
<html>
<head>
<style>
#map { width: 1000px;height: 500px;}
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
var latlng = {lat: 31.54972, lng: 74.34361};
function initialize() {
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: latlng,
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new google.maps.Marker({
position: latlng,
title: "Hello World!",
map: map // replaces marker.setMap(map);
});
// now let's set a time interval, let's say every 3 seconds we check the position
setInterval(
function() {
// we make an AJAX call
$.ajax({
dataType: 'JSON', // this means the result (the echo) of the server will be readable as a javascript object
url: 'testdata.php',
success: function(data) {
// this is the return of the AJAX call. We can use data as a javascript object
// now we change the position of the marker
marker.setPosition({lat: Number(data.lat), lng: Number(data.lng)});
}
})
}
, 3000 // 3 seconds
);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
So now your real php file.
call it (for example) ajax.php. Change 'testdata.php' to 'ajax.php' on line 31 of index.php
I think it should be this, though I didn't test it with a database. Check it yourself
I assume you have an AUTOINCREMENT id, but this could also be done with a timestamp, or so
ajax.php
<?php
define('HOST','localhost');
define('USER','root');
define('PASS','');
define('DB','coordinates');
$con = mysqli_connect(HOST,USER,PASS,DB);
$id = $_GET['id'];
$query = "SELECT id, longitude, latitude FROM data ORDER BY id DESC LIMIT 1";
$qry_result = mysqli_query($con,$query) or die(mysqli_error());
// Insert a new row in the table for each person returned
if($row = mysqli_fetch_array($qry_result)) { // whenever you only need 1 record, use "if" instead of "while"
$longitude = $row['longitude'];
$latitude = $row['latitude'];
// echo the object
echo json_encode(array(
'lat'=>$latitude,
'lng'=>$longitude
));
}
exit;
?>
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 ));
?>
I will really appreciate help for this.
My html v2 file with some temporary key works fine. I am getting locations from some XML, create different colors markers and add some URLs also from XML attributes in Info Window(not too much complicated). Now I need to migrate this to v3. I found some equivalents for functions from v2 but I didn't find for GDownloadUrl( for loading XML) and also GIcon(G_DEFAULT_ICON); Can someone please look at both of my codes and tell me how to change to make this works also in v3. I changed most of the things so if someone can see some error I will be thankful. Thanks in advance.
Version 2:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Google Maps</title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=AIzaSyA4UDNP6MZ" type="text/javascript"></script>
</head>
<body onunload="GUenter code herenload()">
<!-- you can use tables or divs for the overall layout -->
<table border=1>
<tr>
<td>
<div id="map" style="width: 1250px; height: 1250px"></div>
</td>
</tr>
</table>
<script type="text/javascript">
//<![CDATA[
if (GBrowserIsCompatible()) {
var gmarkers = [];
// A function to create the marker and set up the event window
function createMarker(point,name,alarm,markerOptions) {
var marker = new GMarker(point,markerOptions);
GEvent.addListener(marker, "click", function() {
var alarmanchor1='<span class="url"><a href="' + alarm;
var alarmanchor2='" title="www" target="_blank">Event List</a></span>';
var alarmanchor=alarmanchor1+alarmanchor2;
marker.openInfoWindowHtml(alarmanchor);
});
return marker;
}
// This function picks up the click and opens the corresponding info window
function myclick(i) {
GEvent.trigger(gmarkers[i], "click");
}
// create the map
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng( 41.932797,21.483765), 10);
// Read the data from alarms33.xml
GDownloadUrl("alarms33.xml", function(doc) {
var xmlDoc = GXml.parse(doc);
var markers = xmlDoc.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i].getAttribute("lat"));
var lng = parseFloat(markers[i].getAttribute("lng"));
var point = new GLatLng(lat,lng);
var alarm = markers[i].getAttribute("alarm");
var label = markers[i].getAttribute("label");
var severity = parseFloat(markers[i].getAttribute("severity"));
var severityIcon = new GIcon(G_DEFAULT_ICON);
var color;
if (severity == 0) color = "66FF33";
else if (severity == 1) color = "990099";
else if (severity == 2) color = "00CCFF";
else if (severity == 3) color = "FFFF00";
else if (severity == 4) color = "FFCC00";
else if (severity == 5) color = "FF3300";
else color = "yellow";
severityIcon.image = "http://www.googlemapsmarkers.com/v1/" + color;
severityIcon.iconSize = new GSize(15, 30);
markerOptions = { icon:severityIcon };
// create the marker
var marker = createMarker(point,label,alarm,markerOptions);
map.addOverlay(marker);
}
});
}
else {
alert("Sorry, the Google Maps API is not compatible with this browser");
}
//]]>
</script>
</body>
</html>
Version 3:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Google Maps</title>
<script src="http://maps.google.com/maps?file=api&v=3&sensor=false&key=AIzaSyDsa1LyWOQ" type="text/javascript"></script>
</head>
<body onunload="initialize()">
<!-- you can use tables or divs for the overall layout -->
<table border=1>
<tr>
<td>
<div id="map" style="width: 1250px; height: 1250px"></div>
</td>
</tr>
</table>
<script type="text/javascript">
//<![CDATA[
var gmarkers = [];
// A function to create the marker and set up the event window
function createMarker(point,name,alarm,markerOptions) {
var marker = new google.maps.Marker(point,markerOptions);
google.maps.event.addListener(marker, "click", function() {
var alarmanchor1='<span class="url"><a href="' + alarm;
var alarmanchor2='" title="www.skolaznanja.com" target="_blank">Event List</a></span>';
var alarmanchor=alarmanchor1+alarmanchor2;
var infoWindow=new google.maps.InfoWindow();
infoWindow.setContent(alarmanchor);
infowindow.open(map,marker);
});
return marker;
}
// This function picks up the click and opens the corresponding info window
function myclick(i) {
google.maps.event.trigger(gmarkers[i], "click");
}
// create the map
function initialize() {
var mapDiv = document.getElementById("map");
var map;
var myLatlng = new google.maps.LatLng(41.932797,21.483765);
var myOptions = {
zoom:10,
center:myLatlng,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(mapDiv, myOptions);
}
//var map = new google.maps.Map(document.getElementById("map"));
//map.addControl(new GLargeMapControl());
//map.addControl(new GMapTypeControl());
//map.setCenter(new google.maps.LatLng( 41.932797,21.483765), 10);
// Read the data from example.xml
GDownloadUrl("alarms44.xml", function(doc) {
var xmlDoc = GXml.parse(doc);
var markers = xmlDoc.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i].getAttribute("lat"));
var lng = parseFloat(markers[i].getAttribute("lng"));
var point = new google.maps.LatLng(lat,lng);
var alarm = markers[i].getAttribute("alarm");
var label = markers[i].getAttribute("label");
var severity = parseFloat(markers[i].getAttribute("severity"));
var severityIcon = new GIcon(G_DEFAULT_ICON);
var color;
if (severity == 0) color = "66FF33";
else if (severity == 1) color = "990099";
else if (severity == 2) color = "00CCFF";
else if (severity == 3) color = "FFFF00";
else if (severity == 4) color = "FFCC00";
else if (severity == 5) color = "FF3300";
else color = "yellow";
severityIcon.image = "http://www.googlemapsmarkers.com/v1/" + color;
severityIcon.iconSize = new GSize(15, 30);
markerOptions = { icon:severityIcon };
// create the marker
var marker = createMarker(point,label,alarm,markerOptions);
map.setMap(marker);
}
});
//]]>
</script>
</body>
</html>
As you've noted GDownloadUrl() no longer exists in GMap V3. I'd recommend jQuery.get(url)
I posted an example How to parse xml file for marker locations and plot on map.
UPDATE: As #user1191860 points out below there is a utility for GMap V3 xmlparsing. I was not aware of it. AFAIK, no reason not to use it.
You need to add
<script src="http://gmaps-samples-v3.googlecode.com/svn-history/r28/trunk/xmlparsing/util.js"></script>
to your html page.
Interesting that the author also includes a jQuery example