Geek Answers Handbook

Google maps polygons hover clickable

I’m not very good at coding (besides html and css), I’m trying to create a neighborhood map with custom polygons of areas that are highlighted and hovered, creating a small image and additional information. I'm basically trying to recreate what you see at http://www.redoakrealty.com/east-bay-ca-neighborhoods/ ... I wonder how they created it, I assume they used google maps to create this, but I'm not sure how to do this. I would appreciate your thoughts on how they created it and how I can create the same. Thank you ... it also looks like many other people are trying to create or figure out how to create.

+4
source share
2 answers

Below is a complete, simple example of how to achieve this. For simplicity, it simply displays a square centered on latitude / longitude (0, 0) as a demonstration.

<html>
    <head>
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&amp;sensor=false"></script>
        <script type="text/javascript">
            function init() {
                // STEP 1: Create a map in the map div.
                var mapDiv = document.getElementById('map');
                var map = new google.maps.Map(mapDiv, {
                    center: new google.maps.LatLng(0.0, 0.0),
                    zoom: 5
                });

                // STEP 2: Create a polygon - in this case a red square centred at (0, 0). You'd want to create a polygon per neighbourhood.
                var polygon = new google.maps.Polygon({
                    map: map,
                    paths: [
                        new google.maps.LatLng(-1.0, -1.0),
                        new google.maps.LatLng(-1.0, +1.0),
                        new google.maps.LatLng(+1.0, +1.0),
                        new google.maps.LatLng(+1.0, -1.0)
                    ],
                    strokeColor: '#ff0000',
                    strokeOpacity: 0.8,
                    strokeWeight: 2,
                    fillColor: '#ff0000',
                    fillOpacity: 0.5
                });

                // STEP 3: Listen for clicks on the polygon.
                google.maps.event.addListener(polygon, 'click', function (event) {
                    alert('clicked polygon!');
                });
                // STEP 4: Listen for when the mouse hovers over the polygon.
                google.maps.event.addListener(polygon, 'mouseover', function (event) {
                    // Within the event listener, "this" refers to the polygon which
                    // received the event.
                    this.setOptions({
                        strokeColor: '#00ff00',
                        fillColor: '#00ff00'
                    });
                });
                // STEP 5: Listen for when the mouse stops hovering over the polygon.
                google.maps.event.addListener(polygon, 'mouseout', function (event) {
                    this.setOptions({
                        strokeColor: '#ff0000',
                        fillColor: '#ff0000'
                    });
                });
            };
        </script>
        <style>
            #map {
                width: 300px;
                height: 200px;
            }
        </style>
    </head>
    <body onload="init();">
        <div id="map"></div>
    </body>
</html>

Basically, you do the following (each dot of the dot corresponds to a numbered comment in the JavaScript code):

  • Create a map.
  • Draw polygons on the map for each of your neighborhoods.
  • For each polygon, add a listener for click events. The listener function is called whenever your polygon is clicked. Here I just show a warning - you can do whatever you want.
  • "mouseover". , . - .
  • "mouseout". , . .

, . , API JavaScript Google - , . , examples, simple-polygon .

+4

API : https://developers.google.com/maps/documentation/javascript/examples/polygon-arrays

-, , .

API , :

// Define the LatLng coordinates for the polygon.
  var triangleCoords = [
  new google.maps.LatLng(25.774252, -80.190262),
  new google.maps.LatLng(18.466465, -66.118292),
  new google.maps.LatLng(32.321384, -64.75737)
];

, , . , / . triangleCoords - , ,

// Construct the polygon.
bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: '#FF0000',
fillOpacity: 0.35
});

: trianglecoords, .

// Add a listener for the click event.
google.maps.event.addListener(bermudaTriangle, 'click', showArrays);

click hover/mouseover ( , , , , ). hover click, , , , , , .

function showArrays(event) {

//Javascript & Jquery goes here, probably the more challenging part to implement.

}
+1

More articles:


All Articles