google map API V3: how to add road names? [closed]
https://stackoverflow.com/questions/11088590
-
15-06-2021 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
I'm new to google map. I'm developing an application about showing cars on google map but google map has not the names(label) of most of roads in over area. I want to develop an system to allow the user to add these names on the map. positions and names will keep on database. My question is that how to add road name on the map with javascript. I can send the names and positions to a function in javascript code but I need an API to add these names on map temporary till user close the application. You see that with increase/decrease in zoom level, road names becomes bigger or smaller or disapear. With regular marker we can not do this.
Solution
One option is to use the InfoBox
One example of that here
You can write code to change the size of the font and/or not to display the InfoBoxes depending on the zoom level (the example above only displays the infoboxes when you are zoomed in enough for it to be reasonable).
code snippet:
var geocoder = null;
var layer = null;
var map = null;
var labels = [];
var infowindow = null;
var address = "4200 East Palm Canyon Dr, Palm Springs CA";
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(33.796, -116.5);
var myOptions = {
zoom: 18,
center: latlng,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.HYBRID
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
layer = new google.maps.KmlLayer("http://www.geocodezip.com/ParkerPalmSprings.xml", {
preserveViewport: true,
suppressInfoWindows: true
});
layer.setMap(map);
google.maps.event.addListener(layer, "click", openIW);
var i = 0;
labels.push(new InfoBox({
content: "Gene Autry Residence",
boxStyle: {
border: "1px solid black",
textAlign: "center",
fontSize: "8pt",
width: "50px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-25, 0),
position: new google.maps.LatLng(33.7967, -116.500632),
closeBoxURL: "",
isHidden: false,
enableEventPropagation: true,
pane: "mapPane"
}));
labels[i++].open(map);
labels.push(new InfoBox({
content: "North Building",
boxStyle: {
border: "1px solid black",
textAlign: "center",
fontSize: "8pt",
width: "50px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-25, 0),
position: new google.maps.LatLng(33.7965, -116.4997),
closeBoxURL: "",
isHidden: false,
enableEventPropagation: true,
pane: "mapPane"
}));
labels[i++].open(map);
labels.push(new InfoBox({
content: "South Building",
boxStyle: {
border: "1px solid black",
textAlign: "center",
fontSize: "8pt",
width: "40px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-20, 0),
position: new google.maps.LatLng(33.7954, -116.4998),
closeBoxURL: "",
isHidden: false,
enableEventPropagation: true,
pane: "mapPane"
}));
labels[i++].open(map);
labels.push(new InfoBox({
/* content: "<div style='fontSize: 8pt;width: 15px;writing-mode: tb-rl;'> East Parking Lot </div>"*/
content: "East Parking Lot",
boxStyle: {
border: "1px solid black",
textAlign: "center",
fontSize: "8pt",
width: "40px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-20, 0),
position: new google.maps.LatLng(33.7958, -116.4996),
closeBoxURL: "",
isHidden: false,
enableEventPropagation: true,
pane: "mapPane"
}));
labels[i++].open(map);
labels.push(new InfoBox({
content: "Lobby",
boxStyle: {
border: "1px solid black",
textAlign: "center",
fontSize: "8pt",
width: "30px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-15, 0),
position: new google.maps.LatLng(33.79525, -116.50017),
closeBoxURL: "",
isHidden: false,
enableEventPropagation: true,
pane: "mapPane"
}));
labels[i++].open(map);
labels.push(new InfoBox({
content: "Mr Parkers",
boxStyle: {
border: "1px solid black",
textAlign: "center",
fontSize: "8pt",
width: "40px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-20, 0),
position: new google.maps.LatLng(33.79543, -116.50045),
closeBoxURL: "",
isHidden: false,
enableEventPropagation: true,
pane: "mapPane"
}));
labels[i++].open(map);
labels.push(new InfoBox({
content: "Ballroom",
boxStyle: {
border: "1px solid black",
textAlign: "center",
fontSize: "8pt",
width: "50px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-25, 0),
position: new google.maps.LatLng(33.79597, -116.50095),
closeBoxURL: "",
isHidden: false,
enableEventPropagation: true,
pane: "mapPane"
}));
labels[i++].open(map);
labels.push(new InfoBox({
content: "PSYC",
boxStyle: {
border: "1px solid black",
textAlign: "center",
fontSize: "8pt",
width: "50px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-25, 0),
position: new google.maps.LatLng(33.7957, -116.50088),
closeBoxURL: "",
isHidden: false,
enableEventPropagation: true,
pane: "mapPane"
}));
labels[i++].open(map);
labels.push(new InfoBox({
content: "Autry Lawn",
boxStyle: {
border: "1px solid black",
textAlign: "center",
fontSize: "8pt",
width: "50px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-25, 0),
position: new google.maps.LatLng(33.797, -116.50075),
closeBoxURL: "",
isHidden: false,
enableEventPropagation: true,
pane: "mapPane"
}));
labels[i++].open(map);
labels.push(new InfoBox({
content: "North Parking Lot",
boxStyle: {
border: "1px solid black",
textAlign: "center",
fontSize: "8pt",
width: "150px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-75, 0),
position: new google.maps.LatLng(33.7971, -116.500),
closeBoxURL: "",
isHidden: false,
enableEventPropagation: true,
pane: "mapPane"
}));
labels[i++].open(map);
labels.push(new InfoBox({
content: "Tennis Courts",
boxStyle: {
border: "1px solid black",
textAlign: "center",
fontSize: "8pt",
width: "50px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-25, 0),
position: new google.maps.LatLng(33.7971, -116.50115),
closeBoxURL: "",
isHidden: false,
enableEventPropagation: true,
pane: "mapPane"
}));
labels[i++].open(map);
labels.push(new InfoBox({
content: "Petanque Courts",
boxStyle: {
border: "1px solid black",
textAlign: "center",
fontSize: "8pt",
width: "50px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-25, 0),
position: new google.maps.LatLng(33.7963, -116.50075),
closeBoxURL: "",
isHidden: false,
enableEventPropagation: true,
pane: "mapPane"
}));
labels[i++].open(map);
labels.push(new InfoBox({
content: "Palm Court",
boxStyle: {
border: "1px solid black",
textAlign: "center",
fontSize: "8pt",
width: "50px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-25, 0),
position: new google.maps.LatLng(33.79597, -116.50045),
closeBoxURL: "",
isHidden: false,
enableEventPropagation: true,
pane: "mapPane"
}));
labels[i++].open(map);
labels.push(new InfoBox({
content: "Autry Pool",
boxStyle: {
border: "1px solid black",
textAlign: "center",
fontSize: "7pt",
width: "35px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-17, 0),
position: new google.maps.LatLng(33.79625, -116.50106),
closeBoxURL: "",
isHidden: false,
enableEventPropagation: true,
pane: "mapPane"
}));
labels[i++].open(map);
labels.push(new InfoBox({
content: "Picnic Area",
boxStyle: {
border: "1px solid black",
textAlign: "center",
fontSize: "8pt",
width: "30px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-15, 0),
position: new google.maps.LatLng(33.796345, -116.50123),
closeBoxURL: "",
isHidden: false,
enableEventPropagation: true,
pane: "mapPane"
}));
labels[i++].open(map);
labels.push(new InfoBox({
content: "<div style='fontSize: 8pt;width: 15px;writing-mode: tb-rl;'> Backyard </div>",
boxStyle: {
border: "1px solid black",
textAlign: "center",
fontSize: "8pt",
width: "10px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(0, 0),
position: new google.maps.LatLng(33.7965, -116.5014),
closeBoxURL: "",
isHidden: false,
enableEventPropagation: true,
pane: "mapPane"
}));
labels[i++].open(map);
labels.push(new InfoBox({
content: "Croquet Lawn",
boxStyle: {
border: "1px solid black",
textAlign: "center",
fontSize: "8pt",
width: "50px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-25, 0),
position: new google.maps.LatLng(33.79595, -116.4999),
closeBoxURL: "",
isHidden: false,
enableEventPropagation: true,
pane: "mapPane"
}));
labels[i++].open(map);
labels.push(new InfoBox({
content: "Firepit",
boxStyle: {
border: "1px solid black",
textAlign: "center",
fontSize: "8pt",
width: "30px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-15, 0),
position: new google.maps.LatLng(33.79591, -116.50019),
closeBoxURL: "",
isHidden: false,
enableEventPropagation: true,
pane: "mapPane"
}));
labels[i++].open(map);
labels.push(new InfoBox({
content: "Villa" /* (James, Noah, Max, Zoe) */ ,
boxStyle: {
border: "1px solid black",
textAlign: "center",
fontSize: "8pt",
width: "30px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-15, 0),
position: new google.maps.LatLng(33.79619, -116.50051),
closeBoxURL: "",
isHidden: false,
enableEventPropagation: true,
pane: "mapPane"
}));
labels[i++].open(map);
labels.push(new InfoBox({
content: "Villa" /* (Jake, Lola, Ian, Remi) */ ,
boxStyle: {
border: "1px solid black",
textAlign: "center",
fontSize: "8pt",
width: "30px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-15, 0),
position: new google.maps.LatLng(33.79619, -116.50016),
closeBoxURL: "",
isHidden: false,
enableEventPropagation: true,
pane: "mapPane"
}));
labels[i++].open(map);
labels.push(new InfoBox({
content: "Villa" /* (Ben, Julia, Joey, Jayda) */ ,
boxStyle: {
border: "1px solid black",
textAlign: "center",
fontSize: "8pt",
width: "30px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-15, 0),
position: new google.maps.LatLng(33.7965, -116.50033),
closeBoxURL: "",
isHidden: false,
enableEventPropagation: true,
pane: "mapPane"
}));
labels[i++].open(map);
labels.push(new InfoBox({
content: "North Pool",
boxStyle: {
border: "1px solid black",
textAlign: "center",
fontSize: "7pt",
width: "50px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-25, 0),
position: new google.maps.LatLng(33.796455, -116.50002),
closeBoxURL: "",
isHidden: false,
enableEventPropagation: true,
pane: "mapPane"
}));
labels[i++].open(map);
labels.push(new InfoBox({
content: "Great Lawn",
boxStyle: {
border: "1px solid black",
textAlign: "center",
fontSize: "8pt",
width: "50px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-25, 0),
position: new google.maps.LatLng(33.7975, -116.50115),
closeBoxURL: "",
isHidden: false,
enableEventPropagation: true,
pane: "mapPane"
}));
labels[i++].open(map);
function showLabels() {
for (var i = 0; i < labels.length; i++) {
labels[i].setMap(map);
}
}
function hideLabels() {
for (var i = 0; i < labels.length; i++) {
labels[i].setMap(null);
}
}
var ParkerPalmSprings = new google.maps.LatLng(33.795451, -116.500116);
var marker = createMarker(ParkerPalmSprings,
"Parker Palm Springs",
'<b>Parker Palm Springs</b><br>4200 East Palm Canyon Dr<br>Palm Springs CA<br>');
google.maps.event.trigger(marker, 'click');
var MercedesBenzOfPalmSprings = new google.maps.LatLng(33.794431, -116.501985);
var MBmarker = createMarker(MercedesBenzOfPalmSprings,
"Mercedes-Benz of Palm Springs",
'<b>Mercedes-Benz of Palm Springs</b><br>4095 East Palm Canyon Drive<br>Palm Springs CA<br>');
google.maps.event.addListener(map, "zoom_changed", function() {
if (map.getZoom() >= 18) {
showLabels();
} else {
hideLabels();
}
});
google.maps.event.addListener(map, "click", function() {
infowindow.close();
});
}
var infowindow = new google.maps.InfoWindow({
size: new google.maps.Size(150, 100)
});
function openIW(KMLevent) {
infowindow.close();
infowindow.setOptions({
content: '<div style="height:100;width:250">' + KMLevent.featureData.infoWindowHtml + '</div>',
position: KMLevent.latLng,
pixelOffset: KMLevent.pixelOffset
});
infowindow.open(map);
}
function createMarker(latlng, title, html) {
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: title,
zIndex: Math.round(latlng.lat() * -100000) << 5
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.close();
infowindow.setContent(contentString);
infowindow.open(map, marker);
});
return marker;
}
google.maps.event.addDomListener(window, 'load', initialize);html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}<script src="https://maps.google.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script src="https://cdn.jsdelivr.net/gh/geocodezip/v3-utility-library@master/archive/infobox/src/infobox.js"></script>
<div id="map_canvas"></div>Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
