google maps polygons hover clickable
Question
I'm not very experienced in coding (besides html and css), I'm trying to create a neighborhood map with custom polygons of the areas, which highlight when hovered over and are clickable, bringing up a small image and additional info. Basically I'm trying to recreate what you see over at http://www.redoakrealty.com/east-bay-ca-neighborhoods/ ... I'm wondering how they created it, I'm assuming they used the google maps api to create this but I'm not sure how to do it. I would appreciate your thoughts on how they created it and how I can go about creating the same thing. Thanks ... this also seems to be something a lot of other people are trying to create or figure out how to create as well.
2 answers
solution1
4 2013-11-15 01:46:41
The following is a complete, simple example of how to achieve this. For simplicity, it just displays a square centred at latitude/longitude (0, 0) as a demo.
<html>
<head>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&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 point corresponds to a numbered comment in the JavaScript code):
- Create a map.
- Draw polygons on the map for each of your neighbourhoods.
- For each polygon, add a listener for "click" events. The listener function is called whenever your polygon is clicked on. Here, I just display an alert - you could do whatever else you like.
- For each polygon, add a listener for "mouseover" events. The listener function is called whenever the mouse hovers over the polygon. In the handler, change the polygon's stroke and fill colours to something different.
- For each polygon, add a listener for "mouseout" events. The listener function is called whenever the mouse stops hovering over the polygon. In the handler, change the polygon's stroke and fill colours back to their original values.
Hopefully that all makes sense. If you're after more info, the Google Maps JavaScript API reference is the place to find all the relevant details. It may also be worth your time looking at some of the examples , and in particular the simple-polygon and simple-event examples.
solution2
1 2013-11-15 01:27:34
The API for the maps is here: https://developers.google.com/maps/documentation/javascript/examples/polygon-arrays
Seems fairly straightforward on paper, though could be more complicated in practice.
In the API you can see a few things, first:
// 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)
];
Those are the coordinatess, there's only three total so it forms a triangle shape. The shape is completed automatically, you just have to find/enter the coordinates. triangleCoords in this case is the name you assign to the set of values, you'll use this name again in the next line here
// Construct the polygon.
bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: '#FF0000',
fillOpacity: 0.35
});
where you see path: trianglecoords, use can customize the overlay here. Finally
// Add a listener for the click event.
google.maps.event.addListener(bermudaTriangle, 'click', showArrays);
Change the click event to a hover/mouseover event (not sure which, I haven't done this myself but it seems like it would be one of the two). You can make it work for a hover AND click event, again, not quite sure how that it done but certainly possible.
function showArrays(event) {
//Javascript & Jquery goes here, probably the more challenging part to implement.
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.