CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3marker
Aley
Aley

Reputation: 8640

How to highlight an address with Google Maps API v3?

I use Google Maps API v3 to display some locations on a map. Basically it works as follows: There is an admin area to add new locations to the database. When a new location is added, I check the LatLng values with Geocoder service and save the address + LatLng to the database. Afterwards I simply display the map + marker by LatLng values. This works just fine.

var myLatlng = new google.maps.LatLng(52.494406, 13.429538);

var mapOptions = {
    zoom: 15,
    center: myLatlng
}

var map = new google.maps.Map(document.getElementById('gmap'), mapOptions);

var marker = new google.maps.Marker({
    position: myLatlng,
    map: map
});

What I miss here is the address highlighting like in the following screenshot.

Google Maps Address Highlighting

Upvotes: 1

Views: 2287

Answers (1)

rnrneverdies
rnrneverdies

Reputation: 15627

You could Use MarkerWithLabel, Documentation here.

function initialize() {

  var myLatlng = new google.maps.LatLng(-34.668520, -58.543857);
  var mapOptions = {
    zoom: 14,
    center: myLatlng
  }
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var marker_labeled = new MarkerWithLabel({
    position: myLatlng,
    draggable: true,
    raiseOnDrag: true,
    map: map,
    labelContent: "OneWay's Home",
    labelAnchor: new google.maps.Point(-20, 10),
    labelClass: "markerLabel", // the CSS class for the label
    labelStyle: {
      opacity: 0.75
    }
  });

}

google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map-canvas {
  height: 100%;
  margin: 0px;
  padding: 0px
}

.markerLabel {
  color: black;
  font-weight: bold;
  text-shadow: 0px 0px 5px rgba(255, 0, 0, 1); 
}
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.9/src/markerwithlabel.js"></script>

<div id="map-canvas"></div>

Upvotes: 1

Related Questions