I'm completely new to programming. I just learned PHP and am now trying to do real-time tracking using Google Maps.
When I run my script I get a map with the right center location but no trip.
The script is based on:
https://developers.google.com/maps/articles/phpsqlajax_v3?csw=1
I added a call to setTimeout() for real-time tracking, which is now commented out in case its causing a problem.
I tested my newTripXml.php script and it worked stand-alone. But when I put an echo statement into it, I see that the code below is never calling it. Its in the same directory as the php file below, which I am running in XAMPP.
I'd really appreciate some help. Thanks.
<?php
require_once($_SERVER['DOCUMENT_ROOT'].'/includes.php');
session_start();
if(Nav::getInstance()->loggedIn())
if(array_key_exists(DBAtr::TripID,$_GET))
$tripID= $_GET[DBAtr::TripID];
echo "DRAW MAP!!!!!!!!!!!!!!!!!!!<br/>";
$tripID=1;
if(!isset($tripID)) { //logout
Nav::getInstance()->logOut();
exit;
}
?>
<!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 echo "Trip Report"; ?></title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript">
var markersArray = []; //global markers array
var map;
/*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'
}*/
//load new map
function load() {
map = new google.maps.Map(document.getElementById("map"), {
center : new google.maps.LatLng('33.347', '248.161'),
zoom : 13,
mapTypeId : 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
//first call to get & process inital data
downloadUrl("newTripXml.php",processXML);
}
//update map
function processXML(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
//clear markers before you start drawing new ones
resetMarkers(markersArray)
for(var i=0; i<markers.length; i++) {
var host = markers[i].getAttribute("host");
var type = markers[i].getAttribute("active");
var lastupdate = markers[i].getAttribute("lastupdate");
var point = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + "Host: </b>" + host + "<br>" + "<b>Last Updated: </b>" + lastupdate + "<br>";
var icon = customIcons[type] || {}; //?!!!
var marker = new google.maps.Marker({
map : map,
position : point,
icon : icon.icon,
shadow : icon.shadow
});
//store marker object in a new array
markersArray.push(marker);
bindInfoWindow(marker, map, infoWindow, html);
}
/*
set timeout after you finished processing & displaying first lot of markers
requests on the server can take some time, so you want to make another one
only when the first one is completed
*/
/*setTimeout(function() {
downloadUrl("newTripXml.php",processXML);
}, 5000);*/
}
//clear existing markers from map
function resetMarkers(arr) {
for(var i=0; i<arr.length; i++){
arr[i].setMap(null);
}
arr=[]; //reset marker array for next call
}
//bind info window
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
//download url
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);
}
</script>
</head>
<body onload="load()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>
Related
i have this code to populate markers from database on google map , but it's is not working ,the xml file is perfectly working , i referred to https://developers.google.com/maps/articles/phpsqlajax_v3, but of no use.
markers.php code
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "jainmunilocator";
$connection=mysqli_connect($servername, $username, $password, $dbname);;
if (!$connection) {
die("Connection failed: " . mysqli_connect_error());
}
$sql = "SELECT name,id,lat,lng FROM muni_location,munishri WHERE mid=id";
header('Content-Type: application/xml');
$result=mysqli_query($connection,$sql);
$dom = new DOMDocument("1.0");
$node = $dom->createElement("markers");
$parnode = $dom->appendChild($node);
if (mysqli_num_rows($result) > 0)
{
while($row = mysqli_fetch_assoc($result)){
if(isset($row['id'])){ $id = $row['id']; }
if(isset($row['name'])){ $name = $row['name']; }
if(isset($row['lat'])){ $lat = $row['lat']; }
if(isset($row['lng'])){ $lng = $row['lng']; }
$node = $dom->createElement("marker");
$newnode = $parnode->appendChild($node);
$newnode->setAttribute("id",$id);
$newnode->setAttribute("name", $name);
$newnode->setAttribute("lat", $lat);
$newnode->setAttribute("lng", $lng);
}
}
echo $dom->saveXML();
?>
*GOOGLE MAP MARKER 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>PHP/MySQL & Google Maps Example</title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(22.6145,77.3418),
zoom: 7,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
var gm_marker = new Array();
// Change this depending on the name of your PHP file
downloadUrl("markers.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var id = markers[i].getAttribute("id");
var name = markers[i].getAttribute("name");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
//var html = "<b>" + name + "</b> <br/>" + id;
var html = name;
var icon = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';
var marker = new google.maps.Marker({
map: map,
position: point,
title: name
});
addMarker(point,name);
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
//stackoverflow
function addMarker(latLng, contentstr) {
var marker = new google.maps.Marker({
position: latLng,
map: map
});
google.maps.event.addListener(marker, 'click', function() {
infowindow = new google.maps.InfoWindow({
content: contentstr
});
});
gm_markers.push(marker);
}
setAllmap(map);
function setAllMap(map) {
for (var i = 0; i < gm_markers.length; i++) {
gm_markers[i].setMap(map);
}
function showMarkers() { setAllMap(map);}
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-canvas-show" style="width: 100%; height: 300px;"></div>
</body>
</html>
There are 2 elements that I think are essential, which I don't see in your code. This is from my source and I'm including them here to show the concepts. You can implement this type of thing within your for loop or break out into functions. I prefer functions, so I did it this way.
First, I would confirm that your marker array is not length 0--that's an easy sanity check--make sure you have markers to load.
Build the Google Map marker stack
While there are markers...
Create the marker with new
Create the listener with new
Push the marker into Google's marker object as an array of marker objects
// Add a marker to the map and push to the array.
function addMarker(latLng, contentstr) {
var marker = new google.maps.Marker({
position: latLng,
map: map
});
google.maps.event.addListener(marker, 'click', function() {
infowindow = new google.maps.InfoWindow({
content: contentstr
});
});
gm_markers.push(marker);
}
To show the markers assign the marker to the map
Associate each marker from the array to your map canvas.
// Sets the map on all markers in the array.
function setAllMap(map) {
for (var i = 0; i < gm_markers.length; i++) {
gm_markers[i].setMap(map);
}
To clear the Google Map markers (off)
To reinforce the concept. To clear the markers unplug the map markers object array from your map object.
// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
setAllMap(null);
}
To show already loaded markers (on)
// Shows any markers currently in the array.
function showMarkers() {
setAllMap(map);
}
In the view
Showing the map with the markers
<div id="map-canvas-show" style="width: 100%; height: 300px;"></div>
Debugging steps (added)
I would suggest first to confirm that valid coordinates are being loaded into the marker vars in your php. In fact, I would start with a test with one single marker. Put in debug statements to show your lat and lng. This is essential. Confirm valid marker data from php into your js.
Then, you need to confirm that those markers are within the visible range of your Google map. Are the markers there, just not visible? To help, I would suggest that you make Google map zoomed way out - scale it so you'd see a marker halfway around the world.
So im using PHP/MySQL to load the information into a XML which works then I have this code below that is supposed to make the map and load the xml and plug it into the markers when clicked. This is almost 100% copy pasted from googles tutorial
https://developers.google.com/maps/articles/phpsqlajax_v3#createmap
Any help would be lovely I have been struggling with this for days
<!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 type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=my key&sensor=true"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng('34.153471', '-118.432123'),
zoom: 13,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("mapXML2.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 desc = markers[i].getAttribute("desc");
var cap = markers[i].getAttribute("eventcap");
var cur = markers[i].getAttribute("eventcur");
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 + "<br/>" + desc + "<br/>" + "Currently " + cur + "/" + cap;
//var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point
});
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>
You are missing closing bracket for load()
}
});
}//**ADD THIS**
function bindInfoWindow(marker, map, infoWindow, html) {
I tried to search so much but could not find any solutions that fits my map!
I want to build a website that people can upload photos of the weather and displaying it on a google map. Everything was OK until I wanted to use Geocoding ! In fact, the markers are in the good position but the infowindow is always the same (last marker infowindow). I'm getting the address ("name") from a php file that parse XML from an SQL database.
I know few people had the same problem, but even with their solutions, it does not fit.
Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>皆の天気ｂｙロマンスカイ</title>
<link rel="stylesheet" href="styletenki.css" />
<!--[if lte IE 9]>
<link rel="stylesheet" href="styleie.css" />
<![endif]-->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder;
function load() {
geocoder = new google.maps.Geocoder();
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(47.6145, -122.3418),
zoom: 4,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("googleapitest.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 date = markers[i].getAttribute("date");
//var point = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),
// parseFloat(markers[i].getAttribute("lgn")));
var type = markers[i].getAttribute("type");
var temperature = markers[i].getAttribute("temperature");
var cloud = markers[i].getAttribute("cloud");
var comment = markers[i].getAttribute("comment");
var html = "<b>" + name + "</b> <br/>" + temperature + "</b> <br/>" + cloud + "</b> <br/>" + comment;
//var icon = customIcons[type] || {};
/* Appel au service de geocodage avec l'adresse en parametre */
geocoder.geocode({
'address': name
}, function (results, status) {
/* Si l'adresse a pu etre geolocalisee */
if (status == google.maps.GeocoderStatus.OK) {
/* Affichage du marker */
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
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: 800px; height: 600px"></div>
</body>
</html>
Your problem is that the html variable used in bindInfoWindow(marker, map, infoWindow, html); is changed during the for loop. When callback of geocoder.geocode is called, that's the last value of html that is used for all your markers. To work around this problem, you have to capture value of html with a closure. Something like :
(function(capturedHtml){
geocoder.geocode({
'address': name
}, function (results, status) {
/* Si l'adresse a pu etre geolocalisee */
if (status == google.maps.GeocoderStatus.OK) {
/* Affichage du marker */
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
bindInfoWindow(marker, map, infoWindow, capturedHtml);
}
});
})(html);
I am pretty experienced when it come to php mysql, but javascript has got me scratching my head. I am trying to add google maps to my website to show where picture in my database were taken. I got the static google map to work, but it will only display 37 markers due to the url character limitations. I followed the tutorial at google maps api docs, and i have a map that will display all the coordinates for the images in my database. My problem is that i cannot for the life of me figure out how to get the map to auto center and auto zoom to fit all of my markers. my test website for my map is at maptest. I found this tutorial on how to auto center/zoom my map by no matter where i put his code i get errors. this is the code i have for my map that does not auto zoom/center:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps AJAX + mySQL/PHP Example</title>
<script src="http://maps.google.com/maps/api/js? key=AIzaSyDnMkDkoCHNE7BG4eobjeMJdWWZtdZvzeg&sensor=false"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var customIcons = {
restaurant: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
bar: {
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(42.293564,-39.07617),
zoom: 2,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("phpsqlajax_genxml3.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/>";
//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: 600px; height: 400px"></div>
</body>
</html>
Tried this?
var fitToMarkers = function(markers) {
var bounds = new google.maps.LatLngBounds();
var length = markers.length;
for (var i = 0; i < length; i++) {
bounds.extend(new google.maps.LatLng(markers[i].lat, markers[i].lng));
map.fitBounds(bounds);
}
};
I am using the code below to show the marker for each location saved in MySQL database.
<!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" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>All Locations</title>
<link rel="stylesheet" href="css/alllocationsstyle.css" type="text/css" media="all" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=en"></script>
<script type="text/javascript">
var customIcons = {
0: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
1: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_green.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(54.312195845815246,-4.45948481875007),
zoom:6,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("phpfile.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var locationname = markers[i].getAttribute("locationname");
var address = markers[i].getAttribute("address");
var finds = markers[i].getAttribute("finds");
var totalfinds = markers[i].getAttribute("totalfinds");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("osgb36lat")),
parseFloat(markers[i].getAttribute("osgb36lon")));
var html = locationname + ', No.of finds: ' + "<b>" + totalfinds + "</b>";
var icon = customIcons[totalfinds] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
title: address,
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"></div>
</body>
</html>
I'd now like to be able to extend the functionality of the page a little further by adding a sidebar, whereby if the user clicks on the location in the sidebar it highlights the selection with a yellow background and then pans the map to the center it on the associated marker where it opens up the info window. If the user should click on the marker, I would like the info window to open and the associated location on the sidebar to be highlighted, again, with a yellow background.
I have been researching this for sometime and I found the exact type of sidebar that I would like here http://econym.org.uk/gmap/example_map2c.html but the problem is, is that this is in v2 of the Google maps API.
I just wondered whether it would be at all possible that someone could please show me what I need to do to get this to work.
UPDATED CODE
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=yes" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>All locations</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<div id="map_canvas" style="width: 900px;height: 600px;">
</div> <div id="locations"></div>
<body onload="showLocations()">
<script>
var map;
var markers = new Array();
function showLocations() {
downloadUrl("phpfile.php", function(data) {
var xml = data.responseXML;
markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var locationname = markers[i].getAttribute("locationname");
markerId = "id_"+i;
location_list += "<div id="+markerId+">"+locationname+"</div>";
}
document.getElementById("location_list").innerHTML = location_list;
initialize_member_map("lang")
});
}
function initialize_member_map(lang) {
map = new google.maps.Map(document.getElementById("map-canvas"), {
center: new google.maps.LatLng(54.312195845815246,-4.45948481875007),
zoom: 6,
mapTypeId: 'roadmap'
});
var xml = data.responseXML;
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markers.length; i++) {
var infoWindow = new google.maps.InfoWindow;
var locationname = markers[i].getAttribute("locationname");
var address = markers[i].getAttribute("address");
var locationid = markers[i].getAttribute("locationid");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("osgb36lat")),
parseFloat(markers[i].getAttribute("osgb36lon")));
var html = "<b>" + locationname + "</b> <br/>" + address;
bounds.extend(point);
var marker = new google.maps.Marker({
map: map,
position: point,
locationid: locationid
});
markerId = "id_"+i;
bindInfoWindow(gmarker, map, infoWindow, html, markerId);
}
map.setCenter(bounds.getCenter());
map.fitBounds(bounds);
}
function scrollToMarker(index) {
map.panTo(gmarkers[index].getPosition());
}
function bindInfoWindow(marker, map, infoWindow, html, markerId) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
markerObj = document.getElementById(markerId);
google.maps.event.addDomListener(markerObj, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
map.panTo(marker.getPosition());
});
}
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>
</body>
</html>
My recommendation it's looking first documentation there you can find examples and a tutorial, then go to google playgorund which have live examples. It's completely possible make the sidebar, the only thing that you need to consider it's if the sidebar will be inside or outside of the map, in the link of the playground i are the example to make you're own controls. To store the data you need to understand how are make asynchronous calls by ajax to save the locations