How to get the state of a marker?

StackOverflow https://stackoverflow.com/questions/17144375

  •  31-05-2022
  •  | 
  •  

Question

I am using the the Google Maps JavaScript API v3. I have a map that has markers on each state. When I click the state marker, I need access to the state abbreviation in the callback function. Is there any way native to google maps that I can access the state of a marker?

google.maps.event.addListener(mark,'click',function(event){
    // how can I access the state abbreviation (e.g. 'MO') from in here?
}

I know that I can probably accomplish this via reverse geocoding, but is there any simpler (and less error-prone) way?

If this can only be accomplished using reverse geocoding, what is the simplest code to access the state? I assume my code would look something like this:

google.maps.event.addListener(mark,'click',function(event){     
    geocoder.geocode({'latLng': event.latLng}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            ... get state from results ...
        }
    }
}

What would be the simplest code to get the state from the results? Based on the documentation of the address component types, I assume I would be looking for the "short_name" of the "administrative_area_level_1". Is this correct? Is there an easier way to access it than looping over the results until I find the "administrative_area_level_1"? (I have jquery included on the page and so can code with it if it makes anything simpler)

Was it helpful?

Solution

Here's a working example:

<!DOCTYPE html>
<html>
<head>
<title>http://stackoverflow.com/questions/17144375/how-to-get-the-state-of-a-marker?noredirect=1#comment24816710_17144375</title>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100%; width:100% }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
    var map;

    var markers = [
        {lat:54.60039, lng:-3.13632, state:"AA"},
        {lat:54.36897, lng:-3.07561, state:"ZZ"},
    ];

    function initialize() {
        var myOptions = {
            zoom: 10,
            center: new google.maps.LatLng(54.42838,-2.9623),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var marker;
        var infowindow =  new google.maps.InfoWindow({
            content: ''
        });

        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        for (var i = 0; i < markers.length; i++) {
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(markers[i].lat,markers[i].lng), 
                map: map, 
                title:"marker " + i,
                state: markers[i].state // a custom property of our own
            });

            google.maps.event.addListener(marker, 'click', function() {
                infowindow.setContent(this.state);
                infowindow.open(map, this);
            });
        }
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
  <div id="map_canvas"></div>
</body>
</html>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top