I need to implement a custom info window on my google map.
I found this custom info window here : Creating custom info windows in Google Maps
I used the code provided by Googles Developers page , to create the map and everything worked great with the typical info window. Now i changed my code to try and implement the above custom info window , called "infobox" . However it is not working. I am not sure if i used the code correctly.
This is my code for the google map. Note the infoBox function , is the custom info window.
<!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 and Google Maps Example</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',
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(47.6145, -122.3418),
zoom: 15,
mapTypeId: 'roadmap'
});
//var infoWindow = new google.maps.InfoWindow;
infobox = new InfoBox({ width: "260px" }); // initialize
// Change this depending on the name of your PHP file
downloadUrl("testing.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,
shadow: icon.shadow
});
bindInfoWindow(marker, map, infobox, html);
}
});
}
function bindInfoWindow(marker, map, infobox, html) {
google.maps.event.addListener(marker, 'click', function() {
//infoWindow.setContent(html);
//infoWindow.open(map, marker);
infobox.setContent(html); // set content
infobox.open(map, marker); // open on the marker
infobox.draw(); // to redraw if infobox size changed
//infobox.close();
});
}
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 InfoBox(opt_opts) {
opt_opts = opt_opts || {};
this.imgPath='img/infoBox/';
google.maps.OverlayView.apply(this, arguments);
// Standard options (in common with google.maps.InfoWindow):
this.content_ = opt_opts.content || "";
this.maxWidth_ = opt_opts.maxWidth || 0;
this.pixelOffset_ = opt_opts.pixelOffset || new google.maps.Size(0, 0);
this.position_ = opt_opts.position || new google.maps.LatLng(0, 0);
this.zIndex_ = opt_opts.zIndex || null;
// Additional options (unique to InfoBox):
this.boxStyle_ = opt_opts || {};
this.infoBoxClearance_ = new google.maps.Size(1, 1);
this.isHidden_ = opt_opts.isHidden || false;
this.pane_ = "overlayMouseTarget";
this.enableEventPropagation_ = opt_opts.enableEventPropagation || false;
this.div_ = null;
this.closeListener_ = null;
this.eventListener1_ = null;
this.eventListener2_ = null;
this.eventListener3_ = null;
this.contextListener_ = null;
this.fixedWidthSet_ = null;
}
/* InfoBox extends OverlayView in the Google Maps API v3. */
InfoBox.prototype = new google.maps.OverlayView();
// Creates the DIV representing the InfoBox. #private
InfoBox.prototype.createInfoBoxDiv_ = function(){
var bw, me = this;
// This handler prevents an event in the InfoBox from being passed on to the map.
var cancelHandler = function (e){ e.cancelBubble = true; if (e.stopPropagation) e.stopPropagation(); };
// This handler ignores the current event in the InfoBox and conditionally prevents the event from being passed on to the map. It is used for the contextmenu event.
var ignoreHandler = function (e) { e.returnValue = false; if (e.preventDefault) e.preventDefault(); if (!me.enableEventPropagation_){ e.cancelBubble = true; if (e.stopPropagation) e.stopPropagation(); } };
if (!this.div_){ // first time create
this.div_ = document.createElement("div");
this.div_.className = 'infowindow';
this.setBoxStyle_();
// Apply required styles:
if (this.zIndex_ !== null) this.div_.style.zIndex = this.zIndex_;
this.div_.contentDiv = document.createElement('div');
this.div_.contentDiv.className = 'infowindow-wrapper';
this.div_.contentDiv.innerHTML = this.content_;
this.div_.innerHTML = '<img src="'+this.imgPath+'close.png" align="right" class="infowindow-close">';
this.div_.appendChild(this.div_.contentDiv);
// Add the InfoBox DIV to the DOM
this.getPanes()[this.pane_].appendChild(this.div_);
this.addClickHandler_();
if (this.div_.style.width) this.fixedWidthSet_ = true;
else {
if (this.maxWidth_ !== 0 && this.div_.offsetWidth > this.maxWidth_) {
this.div_.style.width = this.maxWidth_;
this.fixedWidthSet_ = true;
}
else { // The following code is needed to overcome problems with MSIE
bw = this.getBoxWidths_();
this.div_.style.width = (this.div_.offsetWidth - bw.left - bw.right) + "px";
this.fixedWidthSet_ = false;
}
}
//add shadow
this.shadowContainer_ = document.createElement("div");
this.shadowContainer_.style.position='absolute';
this.shadowContainer_.style.display = 'block';
this.shadowContainer_.style.zIndex='-99';
this.getPanes()['overlayShadow'].appendChild(this.shadowContainer_);
this.shadow = document.createElement('img');
this.shadow.src = this.imgPath+'shadow.png';
this.shadow.style.position='absolute';
this.shadow.style.width = '100%';
this.shadow.style.height = '100%';
this.shadowContainer_.appendChild(this.shadow);
if (!this.enableEventPropagation_) {
this.eventListener1_ = google.maps.event.addDomListener(this.div_.contentDiv, "mousedown", cancelHandler);
this.eventListener2_ = google.maps.event.addDomListener(this.div_, "click", function(e){
e.cancelBubble = true; if (e.stopPropagation) e.stopPropagation();
if (GoogleMap && GoogleMap.closeEditors) GoogleMap.closeEditors(true);
});
//this.eventListener3_ = google.maps.event.addDomListener(this.div_, "dblclick", cancelHandler);
try{ this.eventListener3_ = google.maps.event.addDomListener(this.div_, "dblclick", facilityEditor);}catch(e){}
}
this.contextListener_ = google.maps.event.addDomListener(this.div_, "contextmenu", ignoreHandler);
var contentWidth = parseInt(this.div_.style.width.slice(0,-2)), contentHeight = this.div_.offsetHeight;
this.wrapperParts = { //create an object to reference each image
tl:{l:-26, t:-26, w:26, h:26},
t:{l:0, t:-26, w:contentWidth, h:26},
tr:{l:contentWidth, t:-26, w:26, h:26},
l:{l:-26, t:0, w:26, h:contentHeight},
r:{l:contentWidth, t:0, w:26, h: contentHeight },
bl:{l:-26, t:contentHeight, w:26, h:26},
b:{l:0, t:contentHeight, w:contentWidth, h:26},
br:{l:contentWidth, t:contentHeight, w:26, h:26},
p:{l:contentWidth-170, t:contentHeight+18, w:92, h:77 }
}
for (i in this.wrapperParts){ //create the image DOM objects
var img = document.createElement('img');
img.src = this.imgPath + i + '.png'; //load the image from your local image directory based on the property name of the wrapperParts object
img.style.position='absolute'; //set the appropriate positioning attributes
img.style.top=this.wrapperParts[i].t+'px';
img.style.left=this.wrapperParts[i].l+'px';
img.style.width=this.wrapperParts[i].w+'px';
img.style.height=this.wrapperParts[i].h+'px';
this.div_.appendChild(img);
this.wrapperParts[i].img = img;
}
google.maps.event.trigger(this, "domready");
}
else {
var contentWidth = parseInt(this.div_.style.width.slice(0,-2)), contentHeight = this.div_.offsetHeight, twp=this.wrapperParts;
twp.t.img.style.width=contentWidth+'px';
twp.tr.img.style.left=contentWidth+'px';
twp.l.img.style.height=contentHeight+'px';
twp.r.img.style.left=contentWidth+'px';
twp.r.img.style.height=contentHeight+'px';
twp.bl.img.style.top=contentHeight+'px';
twp.b.img.style.top=contentHeight+'px';
twp.b.img.style.width=contentWidth+'px';
twp.br.img.style.left=contentWidth+'px';
twp.br.img.style.top=contentHeight+'px';
twp.p.img.style.left=(contentWidth-170)+'px';
twp.p.img.style.top=(contentHeight+18)+'px';
}
};
InfoBox.prototype.addClickHandler_=function(){
this.closeListener_ = google.maps.event.addDomListener(this.div_.firstChild, 'click', this.getCloseClickHandler_());
try{ this.eventListener3_ = google.maps.event.addDomListener(this.div_, "dblclick", facilityEditor);}catch(e){}
};
InfoBox.prototype.getCloseClickHandler_=function () { var me = this; return function(){ me.close(); google.maps.event.trigger(me, "closeclick"); }; };
//Pans the map so that the InfoBox appears entirely within the map's visible area. #private
InfoBox.prototype.panBox_ = function (disablePan) {
if (!disablePan) {
var map = this.getMap();
var bounds = map.getBounds();
// The degrees per pixel
var mapDiv = map.getDiv();
var mapWidth = mapDiv.offsetWidth;
var mapHeight = mapDiv.offsetHeight;
var boundsSpan = bounds.toSpan();
var longSpan = boundsSpan.lng();
var latSpan = boundsSpan.lat();
var degPixelX = longSpan / mapWidth;
var degPixelY = latSpan / mapHeight;
// The bounds of the map
var mapWestLng = bounds.getSouthWest().lng();
var mapEastLng = bounds.getNorthEast().lng();
var mapNorthLat = bounds.getNorthEast().lat();
var mapSouthLat = bounds.getSouthWest().lat();
// The bounds of the box
var position = this.position_;
var iwOffsetX = this.pixelOffset_.width;
var iwOffsetY = this.pixelOffset_.height;
var padX = this.infoBoxClearance_.width;
var padY = this.infoBoxClearance_.height;
var iwWestLng = position.lng() + (iwOffsetX - padX - this.div_.contentDiv.offsetWidth/2 - 450) * degPixelX; // 450 - move right - from under the sidebar
var iwEastLng = position.lng() + (iwOffsetX + padX + 220) * degPixelX;
var iwNorthLat = position.lat() - (iwOffsetY - padY - this.div_.contentDiv.offsetHeight - 180) * degPixelY; // 180 - move down - from under the top search bar
var iwSouthLat = position.lat() - (iwOffsetY + padY + 20) * degPixelY;
// Calculate center shift
var shiftLng = (iwWestLng < mapWestLng ? mapWestLng - iwWestLng : 0) + (iwEastLng > mapEastLng ? mapEastLng - iwEastLng : 0);
var shiftLat = (iwNorthLat > mapNorthLat ? mapNorthLat - iwNorthLat : 0) + (iwSouthLat < mapSouthLat ? mapSouthLat - iwSouthLat : 0);
if (!(shiftLat === 0 && shiftLng === 0)) {
// Move the map to the new shifted center.
var c = map.getCenter();
map.setCenter(new google.maps.LatLng(c.lat() - shiftLat, c.lng() - shiftLng));
}
}
};
// Sets the style of the InfoBox. #private
InfoBox.prototype.setBoxStyle_ = function () {
var i;
var boxStyle = this.boxStyle_;
for (i in boxStyle) if (boxStyle.hasOwnProperty(i)) this.div_.style[i] = boxStyle[i];
// Fix up opacity style for benefit of MSIE:
if (typeof this.div_.style.opacity !== "undefined") this.div_.style.filter = "alpha(opacity=" + (this.div_.style.opacity * 100) + ")";
};
// Get the widths of the borders of the InfoBox. #private; #return {Object} widths object (top, bottom left, right)
InfoBox.prototype.getBoxWidths_ = function () {
var computedStyle;
var bw = {top: 0, bottom: 0, left: 0, right: 0};
var box = this.div_;
if (document.defaultView && document.defaultView.getComputedStyle) {
computedStyle = box.ownerDocument.defaultView.getComputedStyle(box, "");
if (computedStyle) {
// The computed styles are always in pixel units (good!)
bw.top = parseInt(computedStyle.borderTopWidth, 10) || 0;
bw.bottom = parseInt(computedStyle.borderBottomWidth, 10) || 0;
bw.left = parseInt(computedStyle.borderLeftWidth, 10) || 0;
bw.right = parseInt(computedStyle.borderRightWidth, 10) || 0;
}
}
else if (document.documentElement.currentStyle) { // MSIE
if (box.currentStyle) {
// The current styles may not be in pixel units, but assume they are (bad!)
bw.top = parseInt(box.currentStyle.borderTopWidth, 10) || 0;
bw.bottom = parseInt(box.currentStyle.borderBottomWidth, 10) || 0;
bw.left = parseInt(box.currentStyle.borderLeftWidth, 10) || 0;
bw.right = parseInt(box.currentStyle.borderRightWidth, 10) || 0;
}
}
return bw;
};
// Invoked when <tt>close</tt> is called. Do not call it directly.
InfoBox.prototype.onRemove = function () {
if (this.div_) {
this.shadowContainer_.parentNode.removeChild(this.shadowContainer_);
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
}
};
//Draws the InfoBox based on the current map projection and zoom level.
InfoBox.prototype.draw = function(){
this.createInfoBoxDiv_();
var pixPosition = this.getProjection().fromLatLngToDivPixel(this.position_);
this.div_.style.left = (pixPosition.x - this.div_.offsetWidth + 180 ) + "px";
this.div_.style.top = (pixPosition.y - this.div_.offsetHeight - 125) + "px";
this.shadowContainer_.style.left = (pixPosition.x - this.div_.offsetWidth + 220 ) + 'px';
this.shadowContainer_.style.top = (pixPosition.y - this.div_.offsetHeight - 130) + "px";
this.shadowContainer_.style.height = (this.div_.offsetHeight+100 ) + 'px';
this.shadowContainer_.style.width = (this.div_.offsetWidth+100 ) + 'px';
if (this.isHidden_) this.div_.style.visibility = 'hidden';
else this.div_.style.visibility = "visible";
this.panBox_();
};
InfoBox.prototype.setContent = function(content){
this.content_ = content;
if (this.div_){// Odd code required to make things work with MSIE.
this.div_.style.visibility='hidden'
if (!this.fixedWidthSet_) this.div_.style.width = "";
this.div_.contentDiv.innerHTML = content;
// Perverse code required to make things work with MSIE. (Ensures the close box does, in fact, float to the right.)
if (!this.fixedWidthSet_){ this.div_.style.width = this.div_.offsetWidth + "px"; this.div_.contentDiv.innerHTML = content; }
this.addClickHandler_();
}
// This event is fired when the content of the InfoBox changes. #name InfoBox#content_changed; #event
google.maps.event.trigger(this, "content_changed");
};
//Sets the geographic location of the InfoBox. #param {LatLng} latlng
InfoBox.prototype.setPosition = function (latlng) {
this.position_ = latlng;
if (this.div_) this.draw();
//This event is fired when the position of the InfoBox changes. #name InfoBox#position_changed; #event
google.maps.event.trigger(this, "position_changed");
};
InfoBox.prototype.getContent = function () { return this.content_; }; //Returns the content of the InfoBox. #returns {string}
InfoBox.prototype.show = function (){ this.isHidden_ = false; this.div_.style.visibility = "visible"; }; //Shows the InfoBox.
InfoBox.prototype.hide = function (){ this.isHidden_ = true; this.div_.style.visibility = "hidden"; }; //Hides the InfoBox.
InfoBox.prototype.open = function (map, anchor) {
if (anchor) this.position_ = anchor.getPosition();
this.setMap(map);
};
//Removes the InfoBox from the map.
InfoBox.prototype.close = function (){
if (this.closeListener_) {
google.maps.event.removeListener(this.closeListener_);
this.closeListener_ = null;
}
if (this.contextListener_) {
google.maps.event.removeListener(this.contextListener_);
this.contextListener_ = null;
}
this.setMap(null);
};
function doNothing() {}
//]]>
</script>
</head>
<body onload="load()">
<div id="map" style="width: 100%; height: 600px"></div>
</body>
</html>
In the above code , i just changed everything mentioning infowindow , with the new infobox , and added the new function InfoBox(). However i am not sure , how and where i should use the
infobox.setContent(html); // set content
infobox.open(map, marker); // open on the marker
infobox.draw(); // to redraw if infobox size changed
infobox.close();
Where should i use the infobox.close() function? In my code i commented this line , cause i didnt know how to use it.
I believe your missing a position: absolute style for the infobox and also background color if it's not set in the css (originally I had that set in css, that's why it worked for me :-))
look for this line in your code:
this.div_.className = 'infowindow';
and add this below:
this.div_.style.position = 'absolute';
this.div_.style.backgroundColor = '#fff';
You should also add some images for the infobox as the whole box is build based on the images (you'll find references in the script).
Related
I am using the following script to show maps in my application. there are some issues coming :
it's displaying only 10 places.
it showing provided a place in wrong place.
when I want to see only one place then background roadmap is not coming.
I want to display on India map but it's not coming.
Please help me out with this issues.
var graphVal = Kavitha, Ahmedabad, Gujarat##Chavand, Amreli, Gujarat##Khadol, Anand, Gujarat##Ramgadhi, Arvalli, Gujarat##Vagharol, Banas kantha, Gujarat##Matar, Bharuch , Gujarat##Patana, Bhavnagar, Gujarat##Dhasa Vishi, Botad , Gujarat##Panchwada, Dahod, Gujarat##Pimpari, Dang, Gujarat##Rajpar, Devbhumi Dwarka , Gujarat##Harmadiya
, Gir Somnath , Gujarat##Jamvanathali;
var mapid = 'map';
var zoomNo = 15;
graphVal = graphVal.replace(/##\s*$/, "");
var graphvalue = graphVal.split('##');
var ccont = graphvalue.length;
var locations = [];
var geocoder = new google.maps.Geocoder();
var address = '';
var addresArr = [];
for (var i = 0; i < ccont; i++) {
var k = 1;
address = graphvalue[i].replace('SDH', 'Sub District Hospital');
address = address.replace('DH', 'District Hospital');
address = address.replace('-', ' ');
// address = graphvalue[i];
addresArr[i+1] = graphvalue[i];
geocoder.geocode( { 'address': address}, function(results, status) {
// console.log(results[0]);
var tempArray = [];
if (status == google.maps.GeocoderStatus.OK)
{
var Latitudee = results[0].geometry.location.lat();
var Longitudee = results[0].geometry.location.lng();
tempArray.push(addresArr[k]);
tempArray.push(Latitudee);
tempArray.push(Longitudee);
tempArray.push(k);
k++;
}
if (typeof tempArray !== 'undefined' && tempArray.length > 0) {
locations.push(tempArray);
}
});
}
setTimeout(
function()
{
fillMap(locations,mapid,zoomNo);
}, 1000);
function fillMap(locations,mapid,zoomNo){
// Setup the different icons and shadows
var iconURLPrefix = 'http://maps.google.com/mapfiles/ms/icons/';
var icons = [
iconURLPrefix + 'red-dot.png',
iconURLPrefix + 'green-dot.png',
iconURLPrefix + 'blue-dot.png',
iconURLPrefix + 'orange-dot.png',
iconURLPrefix + 'purple-dot.png',
iconURLPrefix + 'pink-dot.png',
iconURLPrefix + 'yellow-dot.png'
]
var iconsLength = icons.length;
var map = new google.maps.Map(document.getElementById(mapid), {
zoom: zoomNo,
//scrollwheel: false,
// center: new google.maps.LatLng(28.6139, 77.2090),
// mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
streetViewControl: false,
panControl: false,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_BOTTOM
}
});
var infowindow = new google.maps.InfoWindow({
maxWidth: 160
});
var markers = new Array();
var iconCounter = 0;
// Add the markers and infowindows to the map
for (var i = 0; i < locations.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: icons[iconCounter]
});
markers.push(marker);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
iconCounter++;
// We only have a limited number of possible icon colors, so we may have to restart the counter
if(iconCounter >= iconsLength) {
iconCounter = 0;
}
}
autoCenter(markers,map);
}
function autoCenter(markers,map) {
// Create a new viewpoint bound
var bounds = new google.maps.LatLngBounds();
// Go through each...
for (var i = 0; i < markers.length; i++) {
bounds.extend(markers[i].position);
}
// Fit these bounds to the map
map.fitBounds(bounds);
}
Thanks & Regards,
Asjad
I am creating a user map system that allows users to either select a new location or select a saved location (from an sql file). I want the map to load with a draggable marker that can be used to select a new position, with the lat/lng populating the relevant fields on the form. I also want the saved locations to populate a dropdown menu, allowing the users to select a location, the lat/lng and name will then populate the relevant fields and the draggable marker disappears from the map. When ‘Select a new location’ is selected from the dropdown menu, the ‘saved locations’ markers disappear and the draggable marker should reappear.
This is the code I have. I admit I am new to this, and have used the Google Maps Developer a lot, as well as searching online and have taken quite a while to get to this point.
This code does exactly what I want in Firefox and IE, but not in Chrome or Safari. In Chrome the saved locations appear in the dropdown menu but when I click on ‘select a new location’ after I have loaded a saved location, the draggable marker does not reappear. In Safari, the saved locations are not even loaded. I would appreciate any advice on how I can fix the errors with my code that could be causing this. I have tried debugging in Chrome (31.0.1650.57 ) and Safari (5.1.7 for windows), I get Cannot read property '_e3' of undefined of the main.js and also Unexpected token <
error404.000webhost.com/ (I’m hosting the site on 000webhost).
This is my html 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>Sightings Form Member</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="js/main.js"></script>
<script src="js/ajax.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
var markers = [];
var markerNew;
var infoWindow;
var infowindow;
var locationSelect;
var geocoder = new google.maps.Geocoder();
var imageNew = 'binoculars3.png';
var imageSave = 'star-3a.png';
function geocodePosition(pos) {
geocoder.geocode({
latLng: pos
}, function(responses) {
if (responses && responses.length > 0) {
console.log(responses);
updateMarkerAddress(responses[0].address_components[0].long_name);
} else {
updateMarkerAddress('Cannot determine address at this location.');
}
});
}
function updateMarkerPosition(latLng) {
var MapLat =latLng.lat();
var MapLng =latLng.lng();
document.getElementById('latitude').value = MapLat;
document.getElementById('longitude').value = MapLng;
}
function updateMarkerAddress(str) {
document.getElementById('address').innerHTML = str;
infowindow.open(map, markerNew);
infowindow.setContent(address);
}
function initialize() {
var latLng = new google.maps.LatLng(10.6667, -61.3152);
map = new google.maps.Map(document.getElementById("map"), {
center: latLng,
zoom: 8,
mapTypeId: 'hybrid',
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
panControl: true,
panControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.TOP_left
}
});
infoWindow = new google.maps.InfoWindow();
NewMarker(latLng);
infowindow = new google.maps.InfoWindow();
infowindow.setContent(address);
// Adds saved locations //Set up dropdown options
locationSelect = document.getElementById("locationSelect");
locationSelect.onchange = function() {
var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
if (markerNum != "none"){
google.maps.event.trigger(markers[markerNum], 'click');
}
};
//Read in saved locations
downloadUrl('RetrieveSavedLoc.php', function(data) {
var xml = parseXml(data);
var markerNodes = xml.documentElement.getElementsByTagName("markerSave");
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markerNodes.length; i++) {
var name = markerNodes[i].getAttribute("loc_name");
var address = markerNodes[i].getAttribute("dayyear");
var savedlatlng = new google.maps.LatLng(
parseFloat(markerNodes[i].getAttribute("lat")),
parseFloat(markerNodes[i].getAttribute("lng")));
var MapLat = markerNodes[i].getAttribute("lat");
var MapLon = markerNodes[i].getAttribute("lng");
createOption(name, i);
createMarker(savedlatlng, name,MapLat,MapLon);
bounds.extend(savedlatlng);
}
locationSelect.style.visibility = "visible";
locationSelect.onchange = function() {
var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
google.maps.event.trigger(markers[markerNum], 'click');
};
});
}
///Set up new marker
function NewMarker(latLng,address) {
markerNew = new google.maps.Marker({
position: latLng,
icon: imageNew,
map: map,
draggable: true,
crossOnDrag:false
});
google.maps.event.addListener(markerNew, 'drag', function() {
updateMarkerPosition(markerNew.getPosition());
document.getElementById('locname').value = '';
});
google.maps.event.addListener(markerNew, 'dragend', function() {
geocodePosition(markerNew.getPosition());
var newlatLng = markerNew.getPosition(); // returns LatLng object
map.setCenter(newlatLng);
});
}
//Saved location marker
function createMarker(savedlatlng, name,MapLat,MapLon) {
var html = "<b>" + name + "</b>";
var marker = new google.maps.Marker({
map: map,
icon: imageSave,
position: savedlatlng,
visible: false
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.close(); //Close MarkerNew infowindow
markerNew.setVisible(false);//Close MarkerNew
marker.setVisible(true);
setAllMap(map); //Allows saved markers to be put back on map
infoWindow.setContent(html);
infoWindow.open(map, marker);
document.getElementById('latitude').value = MapLat;
document.getElementById('longitude').value = MapLon;
document.getElementById('locname').value = name;
});
markers.push(marker);
}
//Reads saved locations into dropdown menu
function createOption(name, num) {
var option = document.createElement("option");
option.value = num;
option.innerHTML = name;
locationSelect.appendChild(option);
}
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 parseXml(str) {
if (window.ActiveXObject) {
var doc = new ActiveXObject('Microsoft.XMLDOM');
doc.loadXML(str);
return doc;
} else if (window.DOMParser) {
return (new DOMParser).parseFromString(str, 'text/xml');
}
}
function doNothing() {}
// Sets the map on all markers in the array.
function setAllMap(map) {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(map);
}
}
// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
setAllMap(null);
markerNew.setVisible(true);
}
// Sets the map on all markers in the array.
function setNewMap(map) {
for (var i = 0; i < markerNew.length; i++) {
markerNew[i].setMap(map);
}
}
// Removes the markers from the map, but keeps them in the array.
function clearMarkerNew() {
google.maps.event.addListener(map, "click", function () {
markerNew.setMap(null);
alert("Marker has been removed from map, about to restore it");
});
}
// Onload handler to fire off the app.
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<body id = "main_body">
</div>
<div id="mainouter">
<div class = "form description">
<form action="reviewMember.php" method="post">
<label style="font-size:1.4em;font-color:black;" class="description" for="location" >Where did you see it?* </label>
<label class="description" for="location"></label>
<div><select id="locationSelect" name="locationSelect" style="width:400px">
<option value="loc_new" onclick="clearMarkers();">Select a new location</option>
</select></div>
<div id="map" style="height: 300px;width: 400px;margin-right: 0.9em;float:left;"></div>
</form>
</div>
</body>
</html>
And php:
<?php
require("connectMap.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
$con=mysqli_connect ($server, $user, $pass,$db);
if (!$con) { die('Not connected : ' . mysqli_error($con));}
session_start();
if(!isSet($_SESSION["email"],$_SESSION['uid'])) {
// Redirect user to login page
header("Location: login_final.php");
exit();
}else {
$userEmail = $_SESSION["email"];
}
// Select the member ID from the users table - to search for the id in the database
$sql = "SELECT * FROM users WHERE email ='$userEmail' LIMIT 1";
$user_query = mysqli_query($con, $sql);
// Now make sure that user exists in the table
$numrows = mysqli_num_rows($user_query);
if($numrows < 1){
echo "That user does not exist or is not yet activated, press back";
exit();
}
// Fetch the user row from the query above
while ($row = mysqli_fetch_array($user_query, MYSQLI_ASSOC)) {
$userID = $row["ID"];
}
// Select the member from the database table - this is to find the name of the user to input into the form and save into form database
$query = "SELECT * FROM locations WHERE userID ='$userID' ";
$result = mysqli_query($con,$query);
$dayyear = "";
if (!$result) {
die('Invalid query: ' . mysqli_error($con));
}
header("Content-type: text/xml");
// Iterate through the rows, adding XML nodes for each
while ($row = #mysqli_fetch_assoc($result)){
// ADD TO XML DOCUMENT NODE
$node = $dom->createElement("markerSave");
$newnode = $parnode->appendChild($node);
$newnode->setAttribute("loc_name",$row['locname']);
$newnode->setAttribute("lat", $row['lat']);
$newnode->setAttribute("lng", $row['lng']);
}
echo $dom->saveXML();
?>
I am trying to place markers where the cities in a mySQL database are. The page loads but it shows "map div" where the map should load. I am not sure what is wrong. Thank you for taking a look and trying to help!
<script type="text/javascript">
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var mapOptions = {
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
directionsDisplay.setMap(map);
//create an array of latitudes, longitudes, and city names
var markers = [
<?php
//orgnize fans by city
$query = "SELECT city, state, COUNT(*) fans FROM users GROUP BY city ORDER BY fans DESC";
$result = mysql_query($query) or die(mysql_error());
while($row = mysql_fetch_array($result)){
//pulls the city, state code from the database and stores it as a string in $address
$address = urlencode('"' . $row['city'] . ", " . $row['state'] . '"');
$googleApi = 'http://maps.googleapis.com/maps/api/geocode/json?address=%s&sensor=false';
$json = file_get_contents(sprintf($googleApi, $address));
$resultObject = json_decode($json);
$location = $resultObject->results[0]->geometry->location;
$lat = $location->lat;
$lng = $location->lng;
echo "{ lat: ".$lat.", lng: ".$lng.", name: ".'"'.$row['city'].", ".$row['state'].'"'."},";
}
?>
];
// Create the markers ad infowindows.
for (index in markers) addMarker(markers[index]);
function addMarker(data) {
// Create the marker
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data.lat, data.lng),
map: map,
title: data.name
});
// Create the infowindow with two DIV placeholders
// One for a text string, the other for the StreetView panorama.
var content = document.createElement("DIV");
var title = document.createElement("DIV");
title.innerHTML = data.name;
content.appendChild(title);
var streetview = document.createElement("DIV");
streetview.style.width = "200px";
streetview.style.height = "200px";
content.appendChild(streetview);
var infowindow = new google.maps.InfoWindow({
content: content
});
// Open the infowindow on marker click
google.maps.event.addListener(marker, "click", function() {
infowindow.open(map, marker);
});
// Handle the DOM ready event to create the StreetView panorama
// as it can only be created once the DIV inside the infowindow is loaded in the DOM.
google.maps.event.addListenerOnce(infowindow, "domready", function() {
var panorama = new google.maps.StreetViewPanorama(streetview, {
navigationControl: false,
enableCloseButton: false,
addressControl: false,
linksControl: false,
visible: true,
position: marker.getPosition()
});
});
}
// Try HTML5 geolocation
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
var infowindow = new google.maps.InfoWindow({
map: map,
position: pos,
content: 'Your Current City'
});
map.setCenter(pos);
}, function() {
handleNoGeolocation(true);
});
} else {
// Browser doesn't support Geolocation
handleNoGeolocation(false);
}
}
function handleNoGeolocation(errorFlag) {
if (errorFlag) {
var content = 'Error: The Geolocation service failed.';
} else {
var content = 'Error: Your browser doesn\'t support geolocation.';
}
var options = {
map: map,
position: new google.maps.LatLng(60, 105),
content: content
};
var infowindow = new google.maps.InfoWindow(options);
map.setCenter(options.position);
}
function calcRoute() {
var start = document.getElementById('start').value;
var end = document.getElementById('end').value;
var waypts = [];
var checkboxArray = document.getElementById('waypoints');
for (var i = 0; i < checkboxArray.length; i++) {
if (checkboxArray.options[i].selected == true) {
waypts.push({
location:checkboxArray[i].value,
stopover:true});
}
}
var request = {
origin: start,
destination: end,
waypoints: waypts,
optimizeWaypoints: true,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
var route = response.routes[0];
var summaryPanel = document.getElementById('directions_panel');
summaryPanel.innerHTML = '';
// For each route, display summary information.
for (var i = 0; i < route.legs.length; i++) {
var routeSegment = i + 1;
summaryPanel.innerHTML += '<b>Route Segment: ' + routeSegment + '</b><br>';
summaryPanel.innerHTML += route.legs[i].start_address + ' to ';
summaryPanel.innerHTML += route.legs[i].end_address + '<br>';
summaryPanel.innerHTML += route.legs[i].distance.text + '<br><br>';
}
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
When I open the html, I call initialize and make the canvas:
<body onload="initialize()">
<div id="map_canvas" style="width: 1100px; height: 450px;">map div</div>
i am using google map api to show addresses on map with markers, the problem i am having is, In the marker, i am showing a link to go to the profile page of person which is there in the map, but if there are more than 1 person exists on same address then google group those addresses and doesn't show the link, is there any way we can stop grouping of addresses?
Any help would be appreciated.Thanks
<pre>
<script type="text/javascript">
var global =0;
//<![CDATA[
if (GBrowserIsCompatible()) {
var side_bar_html = "";
var gmarkers = [];
var htmls = [];
var i = 0;
var allIcon = new GIcon();
allIcon.image = "images/icons/<?php echo $map_category; ?>-all.png";
allIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
allIcon.iconSize = new GSize(35, 29);
allIcon.shadowSize = new GSize(37, 34);
allIcon.iconAnchor = new GPoint(9, 34);
allIcon.infoWindowAnchor = new GPoint(9, 2);
allIcon.infoShadowAnchor = new GPoint(18, 25);
allIcon.transparent = "http://www.google.com/intl/en_ALL/mapfiles/markerTransparent.png";
allIcon.printImage = "coldmarkerie.gif";
allIcon.mozPrintImage = "coldmarkerff.gif";
// An array of GIcons, to make the selection easier
var icons = [];
icons[0] = allIcon;
icons[1] = planIcon;
icons[2] = specialIcon;
var clusterIcon = new GIcon();
clusterIcon.image = 'images/icons/<?php echo $map_category; ?>-all.png';
clusterIcon.iconSize = new GSize( 30, 51 );
clusterIcon.shadowSize = new GSize( 56, 51 );
clusterIcon.iconAnchor = new GPoint( 13, 34 );
clusterIcon.infoWindowAnchor = new GPoint( 13, 3 );
clusterIcon.infoShadowAnchor = new GPoint( 27, 37 );
// A function to create the marker and set up the event window
function createMarker(point,name,html,cat,id) {
var marker = new GMarker(point,icons[cat]);
GEvent.addListener(marker, "click", function() {
rating_html = CallRating(<?php echo $page_id; ?>,id);
rating_html = decodeURI(rating_html);
marker.openInfoWindowHtml(html);
document.getElementById("rating_html_"+id+"").innerHTML=rating_html;
});
GEvent.addListener(marker, "dragstart", function() {
map.closeInfoWindow();
});
// save the info we need to use later for the side_bar
gmarkers[i] = marker;
htmls[i] = html;
// add a line to the side_bar html
if(i%2==0)
{
var sclass="even";
}
else
{
var sclass="odd";
}
side_bar_html += '<li class="'+sclass+'"><a href="javascript:myclick(' + i + ',' + id + ')" class="map_data mapdata-list">' + name + '<\/a></li>';
global=i;
i++;
return marker;
}
// This function picks up the click and opens the corresponding info window
function myclick(i,id) {
rating_html = CallRating(<?php echo $page_id; ?>,id);
rating_html = decodeURI(rating_html);
gmarkers[i].openInfoWindowHtml(htmls[i]);
document.getElementById("rating_html_"+id+"").innerHTML=rating_html;
}
// create the map
var map = new GMap(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
//map.setMapType(G_SATELLITE_MAP);
map.setCenter(new GLatLng(<?php echo $emp_info['emp_latitude']; ?>, <?php echo $emp_info['emp_longitude']; ?>), 8);
// create the clusterer
var clusterer = new Clusterer(map);
// set the clusterer parameters if you dont like the defaults
clusterer.icon = clusterIcon;
clusterer.maxVisibleMarkers = 100;
clusterer.gridSize = 5;
clusterer.minMarkersPerClusterer = 5;
clusterer.maxLinesPerInfoBox = 6;
var rating_html="";
// Read the data
var request = GXmlHttp.create();
request.open("GET", "xml/<?php echo $org_id.'/emp/'.$emp_id.'/'.$map_category; ?>.xml", true);
request.onreadystatechange = function() {
if (request.readyState == 4) {
var xmlDoc = GXml.parse(request.responseText);
// obtain the array of markers and loop through it
var markers = xmlDoc.documentElement.getElementsByTagName("marker");
var i = 0;
for (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 GPoint(lng,lat);
var town = markers[i].getAttribute("town");
var name = markers[i].getAttribute("name");
var id = markers[i].getAttribute("id");
var cat = markers[i].getAttribute("cat");
var marker = createMarker(point,name,"<a href='<?php echo $url;?>="+id+"' target='_blank' class='map_data'>"+name+"</a><br>"+town+"<div id='rating_html_"+id+"'></div>",cat,id);
// create clusterer object
clusterer.AddMarker(marker,town);
}
// put the assembled side_bar_html contents into the side_bar div
if(side_bar_html=="")
{
document.getElementById("list_html").innerHTML = "<li>No data found! Please try again.</li>";
}
else
{
document.getElementById("list_html").innerHTML = side_bar_html;
gmarkers[global].openInfoWindowHtml(htmls[global]);
map.closeInfoWindow();
}
// Clear the "please wait" message
}
}
request.send(null);
}
else {
alert("Sorry, the Google Maps API is not compatible with this browser");
}
//]]>
</script>
</pre>
If you put multiple markers for single point, those will always overlap. It will be interesting to see if anyone can help you. I would suggest, when there are more than one people come under same place/marker, put their details/links on the infoWindow. Don't try to show multiple markers for same point. And if you are desperate enough to show multiple markers, then just change size of your marker-icons, so that they are visible to user even-if overlaps.
It is a good thing that google is showing all the relative address together otherwise if it wont, markers will be hidden by each other and you wont be able to see even how many markers are there on one place.
This is weird. I'm using the marker clusterer to bunch all my markers however the first time when the map renders and when I try to drag it or pan it - it hangs and firefox tells me the script is slowing it down so I have to stop the script. But if I zoom it out - it zooms normally and panning it from then on causes no issues - I have no idea whats going wrong here. Here is my code am I missing something here - must be something wrong with my initialisation:
var map = null;
function initializeGMaps() {
if (GBrowserIsCompatible())
{
map = new GMap2(document.getElementById("map_canvas"));
{
var side_bar_html = "";
var gmarkers = [];
var htmls = [];
var i = 0;
iconBlue = new GIcon();
// A function to create the marker and set up the event window
function createMarker(point,name,html) {
iconBlue.image = 'http://labs.google.com/ridefinder/images/mm_20_yellow.png';
iconBlue.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
iconBlue.iconSize = new GSize(12, 20);
iconBlue.shadowSize = new GSize(22, 20);
iconBlue.iconAnchor = new GPoint(6, 20);
iconBlue.infoWindowAnchor = new GPoint(5, 1);
var marker = new GMarker(point,{ icon:iconBlue, });
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
gmarkers[i] = marker;
htmls[i] = html;
side_bar_html += '<a href="javascript:myclick(' + i + ')">' + name + '<\/a><br>';
i++;
return marker;
}
// This function picks up the click and opens the corresponding info window
function myclick(i) {
gmarkers[i].openInfoWindowHtml(htmls[i]);
}
// create the map
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng( 43.907787, -50.359741), 5);
var customUI = map.getDefaultUI();
customUI.controls.maptypecontrol = false;
customUI.controls.menumaptypecontrol = true;
map.setUI(customUI);
// A function to read the data
function readMap() {
var url='get-map-markers.php';
var request = GXmlHttp.create();
request.open("GET", url, true);
request.onreadystatechange = function() {
if (request.readyState == 4) {
var xmlDoc = request.responseXML;
// obtain the array of markers and loop through it
var markers = xmlDoc.documentElement.getElementsByTagName("marker");
// hide the info window, otherwise it still stays open where the removed marker used to be
map.getInfoWindow().hide();
map.clearOverlays();
// empty the array
allmarkers = [];
//var clusterer = new Clusterer( map );
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 html = markers[i].getAttribute("html");
var label = markers[i].getAttribute("label");
// create the marker
var marker = createMarker(point,label,html);
//map.addOverlay(marker);
allmarkers.push(marker);
//clusterer.AddMarker( marker, html );
}
var markerCluster = new MarkerClusterer(map, allmarkers);
// put the assembled side_bar_html contents into the side_bar div
}
}
request.send(null);
}
readMap();
}
}
}
$(document).ready(function() { initializeGMaps(); } );
$('body').unload( function () { GUnload(); } );
UPDATE: I just noticed that the script at google.com is causing the page to be slow :( how do I fix this? WHat have I done in my code to bring this behavior.
Markerclusterer sucks. Use this one:
http://googlemapsapi.martinpearman.co.uk/clustermarker
My demo: http://www.stopdetelefoongids.nl/stats/ (source in /includes/maps.js )