Agregar texto de marcador personalizado a Google Map

Estoy creando un nuevo sitio web para un nuevo bufete de abogados.

Seguí Google API para incrustar mapas. Agregué su dirección, pero me gustaría agregar el nombre de la firma al mapa … Puede ver en el mapa, no captura el nombre:

 

enter image description here

Entonces, traté de agregar un nombre antes de la dirección en el iframe:

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

Pero supongo que la palabra clave Levin recogerá una empresa que coincida, Soulsby & Levin, LLC … aunque no he cambiado la dirección

  

enter image description here

Incluso la propia API de Google selecciona la incorrecta en función de la palabra clave:

enter image description here

Cómo puedo:

  • Haga que el mapa de Google recoja el nombre correcto de la oficina
  • Si aún no se ha definido el nombre de la oficina, ¿cómo puedo simplemente agregar el nombre del texto en la parte superior del marcador?

Cuando agrega el marcador al mapa, puede ponerle un título al marcador.

Usa este código para hacerlo:

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

Puede establecer la latitud y la longitud de su marcador e incluir un título en él.

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

Tengo la muestra animada para esto

 var map; var root; var geocoder; var root_content= 'Type: [type]
IP: 192.168.10.25
Address: [address]'; function initialize() { geocoder = new google.maps.Geocoder(); geocoder.geocode( { 'address': 'Ha noi, Vietnam'}, function(results, status) { root = results[0].geometry.location; var myStyles =[ { featureType: "administrative", elementType: "labels", stylers: [ { visibility: "off" } ] },{ featureType: "poi", elementType: "labels", stylers: [ { visibility: "off" } ] },{ featureType: "water", elementType: "labels", stylers: [ { visibility: "off" } ] } ]; map = new google.maps.Map(document.getElementById('map'), { zoom: 10, center: root, mapTypeId: google.maps.MapTypeId.ROADMAP, streetViewControl: false, styles: myStyles, disableDefaultUI: true, scrollwheel: false, zoomControl: false, disableDoubleClickZoom: true }); var center = {latLng: root, style: 'ae', content: 'md'}; try{ Draw(); }catch(e){alert(e)} var zoomControlDiv = document.createElement('div'); var zoomControl = new ZoomControl(zoomControlDiv, map); zoomControlDiv.index = 1; map.controls[google.maps.ControlPosition.TOP_LEFT].push(zoomControlDiv); }); } 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 = '
'; controlWrapper.appendChild(zoomInButton); // Set CSS for the zoomOut var zoomOutButton = document.createElement('div'); zoomOutButton.innerHTML = ''; controlWrapper.appendChild(zoomOutButton); var removeLineButton = document.createElement('div'); removeLineButton.innerHTML = ''; controlWrapper.appendChild(removeLineButton); // Setup the click event listener - zoomIn google.maps.event.addDomListener(zoomInButton, 'click', function() { Clean(); map.setZoom(map.getZoom() + 1); Draw(); }); google.maps.event.addDomListener(zoomOutButton, 'click', function() { Clean(); map.setZoom(map.getZoom() - 1); Draw(); }); google.maps.event.addDomListener(removeLineButton, 'click', function() { for(var i=0; i' :''; }); } var x = false; var po = []; var nd = []; function Draw1() { for(var i=0; i
  .iot-node-ae, .iot-node-asn, .iot-node-adn, .iot-node-mn, .iot-node-in, .iot-node-info { position: absolute; list-style-type: none; left: 20px; 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; border-style: solid; border-width: 2px; border-color: white; border-radius: 50%; background: #0079ff; text-align:center; font-weight: bold; padding-top:6px; padding-left:3px; padding-right:3px; 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{ content: ''; position: absolute; border-radius: 50%; width: 100%; height: 100%; top: 0; left: 0; //animation: cd-pulse 2s infinite; } @keyframes cd-pulse { 0% {box-shadow:0 0 0 0 #0079ff} 100%{box-shadow:0 0 0 20px rgba(255,150,44,0)} } /* AE */ .iot-node-ae{ } .iot-node-ae>a{ background: #ff3300; font-size:14px; } .iot-node-ae::after{ //animation: cd-pulse 2s infinite; } /* asn */ .iot-node-asn{ } .iot-node-asn>a{ background: #cc9900; } .iot-node-asn::after{ //animation: cd-pulse 2s infinite; } /* adn */ .iot-node-adn{ } .iot-node-adn>a{ background: #330099; } .iot-node-adn::after{ //animation: cd-pulse 2s infinite; } /* mn */ .iot-node-mn{ } .iot-node-mn>a{ background: #669900; } .iot-node-mn::after{ //animation: cd-pulse 2s infinite; } /* IN */ .iot-node-in{ } .iot-node-in>a{ background: #ff9900; font-size:14px; } .iot-node-in::after{ //animation: cd-pulse 2s infinite; } 
    Google Maps API