Aggiunta di testo indicatore personalizzato a Google Map

Sto creando un nuovo sito Web per il nuovo studio legale.Aggiunta di testo indicatore personalizzato a Google Map

Ho seguito le API di Google per incorporare le mappe. Ho aggiunto il loro indirizzo, ma vorrei aggiungere il nome della ditta per la mappa ... Si può vedere nella mappa, che non cattura il nome:

<iframe width="600" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?key=myapikey&q=883%20Farmington%20Avenue%2C%20Berlin%2C%20CT%2006037%2C%20United%20States"></iframe>

enter image description here

Quindi, ho provato ad aggiungere un nome prima l'indirizzo nel iframe:

q=Jill+Levin+Law,address here...

Ma sto cercando di indovinare le parole chiave Levin pick up una ditta di corrispondenza, Soulsby & Levin, LLC ... anche se non ho cambiato l'indirizzo

<iframe width="600" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?key=myapikey&q=Jill+Levin+Law,883%20Farmington%20Avenue%2C%20Berlin%2C%20CT%2006037%2C%20United%20States"></iframe>

enter image description here

Anche l'API di Google in sé raccoglie quella sbagliata in base alla parola chiave:

enter image description here

Come faccio:

Avere Google map selezionamento il nome corretto dell'ufficio
Se il nome dell'ufficio non è stato ancora definito, come posso semplicemente aggiungere il nome del testo nella parte superiore dell'indicatore?

fonte

2014-06-26 Growler

Quando si aggiunge il marker alla mappa, è possibile inserire un titolo nell'indicatore.

Usa questo codice per farlo:

map.addMarker(new MarkerOptions().title("Office Name"));

fonte

2014-06-26 11:28:05

Basta notare: Questa soluzione utilizza API di Google Maps JavaScript che ha limiti di utilizzo con le opzioni di pagamento rispetto al Google Maps Embed API che viene utilizzata in questione. https://developers.google.com/maps/documentation/javascript/usage – qub1n

Yo può impostare il Latitude e Longitudine del vostro marcatore e comprendono una titolo su di esso.

var marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(-25.363882,131.044922), 
    map: map, 
    title: 'Our Office' 
});

fonte

2015-04-29 10:49:19

devo campione vivace per questo

var map; 
 
var root; 
 
var geocoder; 
 
var root_content= 'Type: [type]<BR>IP: 192.168.10.25<BR>Address: [address]'; 
 
function initialize() { 
 
    geocoder = new google.maps.Geocoder(); 
 
     geocoder.geocode({ 'address': 'Ha noi, Vietnam'}, function(results, status) { 
 
\t \t \t \t root = results[0].geometry.location; 
 
\t \t \t 
 
\t \t \t var myStyles =[ 
 
\t \t \t 
 
     { 
 
     featureType: "administrative", 
 
     elementType: "labels", 
 
     stylers: [ 
 
      { visibility: "off" } 
 
     ] 
 
     },{ 
 
     featureType: "poi", 
 
     elementType: "labels", 
 
     stylers: [ 
 
      { visibility: "off" } 
 
     ] 
 
     },{ 
 
     featureType: "water", 
 
     elementType: "labels", 
 
     stylers: [ 
 
      { visibility: "off" } 
 
     ] 
 
     } 
 
     
 
]; 
 
\t \t \t \t map = new google.maps.Map(document.getElementById('map'), { 
 
\t \t \t \t zoom: 10, 
 
\t \t \t \t center: root, 
 
\t \t \t \t mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
\t \t \t \t streetViewControl: false, styles: myStyles, 
 
\t \t \t \t \t disableDefaultUI: true, scrollwheel: false, 
 
\t \t \t \t \t zoomControl: false, disableDoubleClickZoom: true 
 
\t \t \t \t }); \t 
 
\t \t \t \t 
 
\t \t \t \t 
 
\t \t \t \t var center = {latLng: root, style: 'ae', content: 'md'}; 
 
try{ 
 
\t \t \t \t Draw(); 
 
}catch(e){alert(e)} 
 
\t \t \t \t var zoomControlDiv = document.createElement('div'); 
 
    var zoomControl = new ZoomControl(zoomControlDiv, map); 
 

 
    zoomControlDiv.index = 1; 
 
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(zoomControlDiv); 
 
\t \t \t \t 
 
\t \t \t \t 
 
\t \t \t \t 
 
\t \t \t 
 
\t \t \t }); 
 
} 
 
function ZoomControl(controlDiv, map) { 
 
    
 
    // Creating divs & styles for custom zoom control 
 
    controlDiv.style.padding = '5px'; 
 

 
    // Set CSS for the control wrapper 
 
    var controlWrapper = document.createElement('div'); 
 
// controlWrapper.style.background = 'white'; 
 
    controlWrapper.style.borderStyle = 'solid'; 
 
    controlWrapper.style.borderColor = 'gray'; 
 
    controlWrapper.style.borderWidth = '1px'; 
 
    controlWrapper.style.cursor = 'pointer'; 
 
    controlWrapper.style.textAlign = 'center'; 
 
    controlWrapper.style.width = '32px'; 
 
    controlWrapper.style.height = '100px'; 
 
    controlDiv.appendChild(controlWrapper); 
 
    
 
    // Set CSS for the zoomIn 
 
    var zoomInButton = document.createElement('div'); 
 
    zoomInButton.innerHTML = '<br><img src="https://i.stack.imgur.com/2k0UD.png" title="Zoom In">'; 
 
    controlWrapper.appendChild(zoomInButton); 
 
    
 
    // Set CSS for the zoomOut 
 
    var zoomOutButton = document.createElement('div'); 
 
    zoomOutButton.innerHTML = '<img src="https://i.stack.imgur.com/zPVFs.png" title="Zoom Out">'; 
 
    controlWrapper.appendChild(zoomOutButton); 
 
    
 
    var removeLineButton = document.createElement('div'); 
 
    removeLineButton.innerHTML = '<img src="https://i.stack.imgur.com/tAc0f.png" title="Hide Line">'; 
 
    controlWrapper.appendChild(removeLineButton); 
 

 
    // Setup the click event listener - zoomIn 
 
    google.maps.event.addDomListener(zoomInButton, 'click', function() { 
 
\t Clean(); 
 
    map.setZoom(map.getZoom() + 1); 
 
\t Draw(); 
 
    }); 
 
    google.maps.event.addDomListener(zoomOutButton, 'click', function() { 
 
\t Clean(); 
 
    map.setZoom(map.getZoom() - 1); 
 
\t Draw(); 
 
    }); 
 
    
 
    google.maps.event.addDomListener(removeLineButton, 'click', function() { 
 
\t \t \t for(var i=0; i<po.length; i++) { 
 
\t \t \t \t \t \t po[i].setMap(x?map:null); 
 
\t \t \t \t \t 
 
\t \t \t \t \t } 
 
\t \t \t \t \t 
 
\t \t \t \t \t x=x?false:true; 
 
\t \t \t \t \t removeLineButton.innerHTML=x? 
 
\t \t \t \t \t '<img src="https://i.stack.imgur.com/LeM4f.png" title="Show line">' 
 
\t \t \t \t \t :'<img src="https://i.stack.imgur.com/tAc0f.png" title="Hide line">'; 
 
\t \t \t 
 
    }); 
 
    
 
} 
 
var x = false; 
 
var po = []; 
 
var nd = []; 
 
function Draw1() { 
 
\t for(var i=0; i<po.length; i++) { 
 
\t \t \t \t \t \t po[i].setMap(null); 
 
\t \t \t \t \t 
 
\t \t \t \t \t } 
 
\t \t \t \t \t for(var i=0; i<nd.length; i++) { 
 
\t \t \t \t \t \t nd[i].remove(); 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t } 
 
\t \t \t \t \t nd=[]; 
 
\t \t \t \t \t po=[]; 
 
} 
 

 
function GetData() { 
 
\t 
 
} 
 

 
function Draw1() { 
 
/* 
 
\t var jsontext = '{"firstname":"Jesper","surname":"Aaberg","phone":["555-0100","555-0120"]}'; 
 
\t var contact = JSON.parse(jsontext); 
 

 
\t contact=JSON.parse 
 
\t alert(contact.firstname); 
 
*/ 
 
\t for(var i=0; i<node.length; i++) { 
 
\t \t //nd.push(create_node(map, node[i])); 
 
\t } 
 
\t for(var i=0; i<line.length; i++) { 
 
\t \t //po.push(connect_node(map, line.node1, line.node2)); 
 
\t } 
 
} 
 

 
function Clean() { 
 
\t for(var i=0; i<po.length; i++) { 
 
\t \t po[i].setMap(null); 
 
\t } 
 
\t for(var i=0; i<nd.length; i++) { 
 
\t \t nd[i].setMap(null); 
 
\t } 
 
\t po = []; 
 
\t nd = []; 
 
} 
 

 
function Draw() { 
 
\t \t \t \t var cen= root; 
 
\t \t \t \t var a = true; 
 
\t \t \t \t var b = true; 
 
\t \t \t \t var dis = 0.1; 
 
\t \t \t \t var k = 0; 
 
\t \t \t \t 
 
\t \t \t \t for(var i=0; i<10; i++) { 
 
\t \t \t \t \t k++; 
 
\t \t \t \t \t if(a) { 
 
\t \t \t \t \t \t cen = new google.maps.LatLng(cen.lat()+dis, cen.lng()); 
 
\t \t \t \t \t \t a=false; 
 
\t \t \t \t \t } 
 
\t \t \t \t \t else { 
 
\t \t \t \t \t \t cen = new google.maps.LatLng(cen.lat(), cen.lng()+dis); 
 
\t \t \t \t \t \t a=true; 
 
\t \t \t \t \t } 
 
\t \t \t \t \t var style = 'in'; 
 
\t \t \t \t \t if(k%5==1) style='ae'; 
 
\t \t \t \t \t else if(k%5==2) style='adn'; 
 
\t \t \t \t \t else if(k%5==3) style='mn'; 
 
\t \t \t \t \t else if(k%5==4) style='asn'; 
 
\t \t \t \t \t 
 
\t \t \t \t \t var cur = {latLng: cen, style: style, content: style.toUpperCase()}; 
 
\t \t \t \t \t nd.push(create_node(map, cur)); 
 
\t \t \t \t \t for(var j=i+1; j<10; j++) { 
 
\t \t \t \t \t \t k++; 
 
\t \t \t \t \t \t if(a) { 
 
\t \t \t \t \t \t cen = new google.maps.LatLng(cen.lat()+((j%2)==0?1:(-1))*dis, cen.lng()); 
 
\t \t \t \t \t \t a=false; 
 
\t \t \t \t \t } 
 
\t \t \t \t \t else { 
 
\t \t \t \t \t \t cen = new google.maps.LatLng(cen.lat(), cen.lng()+((j%2)==0?1:(-1))*dis); 
 
\t \t \t \t \t \t a=true; 
 
\t \t \t \t \t } 
 
\t \t \t \t \t var style = 'in'; 
 
\t \t \t \t \t if(k%5==1) style='ae'; 
 
\t \t \t \t \t else if(k%5==2) style='asn'; 
 
\t \t \t \t \t else if(k%5==3) style='mn'; 
 
\t \t \t \t \t else if(k%5==4) style='adn'; 
 
\t \t \t \t \t \t var sub = {latLng: cen, style: style, content: style.toUpperCase()}; 
 
\t \t \t \t 
 
\t \t \t \t \t \t po.push(connect_node(map, cur, sub)); 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t \t nd.push(create_node(map, sub)); 
 
\t \t \t \t \t } 
 
\t \t \t \t } 
 
\t \t \t \t 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize); 
 

 

 

 
function CustomMarker(latlng, map, args) { 
 
\t this.latlng = latlng; \t 
 
\t this.args = args; \t 
 
\t this.setMap(map); \t 
 
} 
 
CustomMarker.prototype = new google.maps.OverlayView(); 
 
CustomMarker.prototype.draw = function() { 
 
\t 
 
\t var self = this; 
 
\t var div = this.div; 
 
\t if (!div) { 
 
\t \t div = this.div = document.createElement('div'); 
 
\t \t var style = ''; 
 
\t \t var content = ''; 
 
\t \t if (typeof(self.args.marker_style) !== 'undefined') { 
 
\t \t \t style = self.args.marker_style; 
 
\t \t \t div.className = 'iot-node-'+style; \t \t \t 
 
\t \t } 
 
\t \t 
 

 
\t \t if (typeof(self.args.marker_content) !== 'undefined') { 
 
\t \t \t content = self.args.marker_content; 
 
\t \t \t var a = document.createElement('a'); 
 
\t \t 
 
\t \t \t a.innerHTML = content; 
 
\t \t \t div.appendChild(a); 
 
\t \t \t if(style=='info') { 
 
\t \t \t \t var span = document.createElement('span'); 
 
\t \t \t 
 
\t \t \t \t span.innerHTML = 'x'; 
 
\t \t \t \t google.maps.event.addDomListener(span, "click", function(event) { 
 
\t \t \t \t \t me.remove(); 
 
\t \t \t \t }); 
 
\t \t \t \t 
 
\t \t \t \t a.appendChild(span); 
 
\t \t \t } 
 
\t \t \t 
 
\t \t } 
 
\t \t if (typeof(self.args.marker_style) !== 'undefined' && style!='') { 
 
\t \t \t \t var cur = this.getPosition(); 
 
\t \t \t \t var me = this; 
 
\t \t \t \t 
 
\t \t \t \t var panes = this.getPanes(); 
 
\t \t \t \t panes.overlayImage.appendChild(div); 
 
\t \t \t \t var point = this.getProjection().fromLatLngToDivPixel(this.getPosition()); 
 
\t \t \t \t if (point) { 
 
\t \t \t \t \t if(style!='info') { 
 
\t \t \t \t \t \t div.style.left = (point.x-10) + 'px'; 
 
\t \t \t \t \t \t div.style.top = (point.y-10) + 'px'; 
 
\t \t \t \t \t \t google.maps.event.addDomListener(div, "click", function(event) { 
 
\t \t \t \t \t \t \t geocoder.geocode({'latLng': cur}, function(results, status) { 
 
\t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t var addr = 'null'; 
 
\t \t \t \t \t \t \t \t \t \t if (status === google.maps.GeocoderStatus.OK) { 
 
\t \t \t \t \t \t \t \t \t \t if (results[1]) { 
 
\t \t \t \t \t \t \t \t \t \t \t addr = results[1].formatted_address; 
 
\t \t \t \t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t \t var sub = {latLng: cur, style: 'info', content: root_content.replace('[type]', style.toUpperCase()).replace('[address]', addr)}; 
 
\t \t \t \t \t \t \t nd.push(create_node(map, sub)); 
 
\t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t }); 
 
\t \t \t \t \t \t }); 
 

 
\t \t \t \t \t 
 
\t \t \t \t \t } else { 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t \t div.style.left = (point.x-40) + 'px'; 
 
\t \t \t \t \t \t div.style.top = (point.y-15 -div.offsetHeight) + 'px'; 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t } 
 
\t \t \t \t } 
 
\t \t } 
 
\t \t 
 
\t } 
 
}; 
 
CustomMarker.prototype.remove = function() { 
 
\t 
 
\t if (this.div) { 
 
\t \t this.div.parentNode.removeChild(this.div); 
 
\t \t this.div = null; 
 
\t } \t 
 
\t this.setMap(null); 
 
\t 
 
}; 
 
CustomMarker.prototype.getPosition = function() { 
 
\t return this.latlng; \t 
 
}; 
 

 
function create_node(map, node) { 
 
\t return new CustomMarker(
 
\t \t node.latLng, 
 
\t \t map, 
 
\t \t { 
 
\t \t \t marker_style: node.style, 
 
\t \t \t marker_content: node.content 
 
\t \t } 
 
\t); 
 
} 
 

 

 

 
var color= {}; 
 
color['ae'] = '#ff3300'; 
 
color['mn'] = '#669900'; 
 
color['in'] = '#ff9900'; 
 
color['asn']= '#cc9900'; 
 
color['adn']= '#330099'; 
 

 
function rand(min,max,interval) 
 
{ 
 
    if (typeof(interval)==='undefined') interval = 1; 
 
    var r = Math.floor(Math.random()*(max-min+interval)/interval); 
 
    return r*interval+min; 
 
} 
 

 
function connect_node(map, node1, node2) { 
 

 
\t return new google.maps.Polyline({ 
 
\t \t path: [node1.latLng, node2.latLng], 
 
\t \t geodesic: true, 
 
\t \t strokeColor: color[node1.style], 
 
     strokeOpacity: 0.6, 
 
     strokeWeight: 2, 
 
\t \t map: map 
 
\t }); 
 
}

.iot-node-ae, .iot-node-asn, .iot-node-adn, .iot-node-mn, .iot-node-in, .iot-node-info { 
 
\t position: absolute; 
 
\t list-style-type: none; 
 
\t left: 20px; 
 
\t top: 20px; 
 
} 
 

 
.iot-node-ae>a, .iot-node-asn>a, .iot-node-adn>a, .iot-node-mn>a, .iot-node-in>a, .iot-node-info>a { 
 
    position: relative; 
 
    z-index: 2; 
 
    display: block; 
 
    width: 20px; 
 
    height: 20px; 
 
\t border-style: solid; 
 
    border-width: 2px; 
 
\t border-color: white; 
 
\t border-radius: 50%; 
 
    background: #0079ff; 
 
\t text-align:center; 
 
\t font-weight: bold; 
 
\t padding-top:6px; 
 
\t padding-left:3px; 
 
\t padding-right:3px; 
 
\t color:white; 
 
    -webkit-transition: background-color 0.2s; 
 
    -moz-transition: background-color 0.2s; 
 
    -o-transition: background-color 0.2s; 
 
    transition: background-color 0.2s; 
 
} 
 

 

 
.iot-node-info>a { 
 
    width: 120px; 
 
    height: 80px; 
 
    position: relative; 
 
    border-radius: 0; 
 
    text-align:left; 
 
} 
 
.iot-node-info>a>span { 
 
position: absolute; top: 2px; right:2px; 
 
    cursor: pointer; 
 
    display:inline-block; 
 
    padding:2px 5px; 
 
    background:#ccc; 
 
} 
 
.iot-node-info>a>span::hover { 
 
position: absolute; top: 2px; right:2px; 
 
cursor: pointer; 
 
    
 
    display:inline-block; 
 
    padding:2px 5px; 
 
    background:#ccc; 
 
} 
 

 
.iot-node-info>a::before { 
 
    content:""; 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 0; 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 13px solid transparent; 
 
    border-right: 26px solid #0079ff; 
 
    border-bottom: 13px solid transparent; 
 
} 
 

 
.iot-node-ae::after, .iot-node-asn::after , .iot-node-adn::after , .iot-node-mn::after , .iot-node-in::after , .iot-node-info::after{ 
 
\t content: ''; 
 
\t position: absolute; 
 
\t border-radius: 50%; 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t top: 0; 
 
\t left: 0; 
 
\t //animation: cd-pulse 2s infinite; 
 

 
} 
 

 
    
 
@keyframes cd-pulse 
 
{ 
 
\t 0% {box-shadow:0 0 0 0 #0079ff} 
 
\t 100%{box-shadow:0 0 0 20px rgba(255,150,44,0)} 
 
} 
 
/* AE */ 
 
.iot-node-ae{ 
 
\t 
 
} 
 
.iot-node-ae>a{ 
 
\t background: #ff3300; 
 
\t font-size:14px; 
 
} 
 

 
.iot-node-ae::after{ 
 
\t //animation: cd-pulse 2s infinite; 
 
} 
 

 
/* asn */ 
 
.iot-node-asn{ 
 
\t 
 
} 
 
.iot-node-asn>a{ 
 
\t background: #cc9900; 
 
} 
 

 
.iot-node-asn::after{ 
 
\t //animation: cd-pulse 2s infinite; 
 
} 
 

 
/* adn */ 
 
.iot-node-adn{ 
 
\t 
 
} 
 
.iot-node-adn>a{ 
 
\t background: #330099; 
 
} 
 

 
.iot-node-adn::after{ 
 
\t //animation: cd-pulse 2s infinite; 
 
} 
 

 
/* mn */ 
 
.iot-node-mn{ 
 
\t 
 
} 
 
.iot-node-mn>a{ 
 
\t background: #669900; 
 
} 
 

 
.iot-node-mn::after{ 
 
\t //animation: cd-pulse 2s infinite; 
 
} 
 

 
/* IN */ 
 
.iot-node-in{ 
 
\t 
 
} 
 
.iot-node-in>a{ 
 
\t background: #ff9900; 
 
\t font-size:14px; 
 
} 
 

 

 
.iot-node-in::after{ 
 
\t //animation: cd-pulse 2s infinite; 
 
}

<!DOCTYPE HTML> 
 
<html> 
 
<head> 
 

 
<title>Google Maps API</title> 
 

 
<style type="text/css"> 
 
#map { 
 
\t width: 1500px; 
 
\t height: 1000px; 
 
} 
 
</style> 
 
<link rel="stylesheet" type="text/css" href="iot_resource.css" /> 
 
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script> 
 
<script type="text/javascript" src="iot_resource.js"></script> 
 
<script type="text/javascript" src="init_map.js"></script> 
 
</head> 
 
<body> 
 
\t <div id="map"> 
 
\t </div> 
 
\t <button onclick="Draw1()" /> 
 
</body> 
 
</html>

fonte

2017-02-25 08:35:38

Aggiunta di testo indicatore personalizzato a Google Map

risposta

Problemi correlati