Sim1980
asked on
Have label permanently appear on Google Map
Hi all.
I have the code below that displays markers for the addresses in my MySQL table. Currently when you click a marker it will display the name, address, city , state, zip code and type.
I would like for it to show just the name in a label when the map is displayed and if the user clicks a marker then it will display the detail information I listed above (i.e. name, address, city etc.)
How can I do this?
I have the code below that displays markers for the addresses in my MySQL table. Currently when you click a marker it will display the name, address, city , state, zip code and type.
I would like for it to show just the name in a label when the map is displayed and if the user clicks a marker then it will display the detail information I listed above (i.e. name, address, city etc.)
How can I do this?
<!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>Builder Community Map</title>
<script type="text/javascript" src="<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript">
var customIcons = {
Builder: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png'
},
Community: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png'
}
};
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(25.976562, -80.377640),
zoom: 12,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
downloadUrl("GetBuilderCommunityMapAddresses.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 city = markers[i].getAttribute("city");
var state = markers[i].getAttribute("state");
var zipcode = markers[i].getAttribute("zipcode");
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 html = "<b>" + name + "</b> <br/>" + address+ "<br/>" + city + ", " + state + " " + zipcode + "<br/>" + type;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
//]]>
</script>
</head>
<body onload="load()">
<div id="map" style="width: 800px; height: 900px"></div>
</body>
</html>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
could you post what you get from GetBuilderCommunityMapAddr esses.php ?
ASKER
Sure, below is what I get, but I changed the addresses as that is sensitive information.
<markers>
<marker name="Builder A" address="123 SW 143RD WAY" city="MyCity" state="MA" zipcode="00023" lat="30" lng="-80" type="Builder"/>
<marker name="Builder B" address="333 SW 33 ST" city="YourCity" state="NY" zipcode="12222" lat="40" lng="-80" type="Builder"/>
<marker name="MMA" address="5555 N 44 ST" city="OurCity" state="TX" zipcode="56677" lat="22" lng="-80" type="Community"/>
<marker name="aa" address="789 W 43 Ct" city="City A" state="CA" zipcode="55666" lat="23" lng="-80" type="Community"/>
<marker name="MM" address="44444 W 3rd ave" city="Lala" state="OR" zipcode="45667" lat="67" lng="-80" type="Community"/>
</markers>
ASKER
Nevermind, got it to work.
I had to change the line to: var marker = new MarkerWithLabel
Instead of var marker = new new google.maps.MarkerWithLabe l
And I had to fix labelContent I had originally typed it as labelContect.
Thanks again for all your help!
I had to change the line to: var marker = new MarkerWithLabel
Instead of var marker = new new google.maps.MarkerWithLabe
And I had to fix labelContent I had originally typed it as labelContect.
Thanks again for all your help!
ASKER
What am I doing wrong with the code?
Open in new window