user3573535 user3573535 - 6 months ago 23
jQuery Question

How show and zoom Google Map v3 after click on elements

I end up with this code to show google map:

<script>
function init_map() {

// Create an array of styles.
var styles = [
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"color": "red"
},
{
"lightness": 25
}
]
}
];

var myOptions = {
mapTypeControlOptions: {
mapTypeIds: ['Map']
},
center: new google.maps.LatLng(40.514459, 0.13461),
zoom:3,
disableDefaultUI: false,
mapTypeId: 'Map',
scrollwheel: false,
navigationControl: true,
scaleControl: true,
};

var div = document.getElementById('gmap_canvas');
var map = new google.maps.Map(div, myOptions);
var styledMapType = new google.maps.StyledMapType(styles, { name: 'Map' });
map.mapTypes.set('Map', styledMapType);
var bounds = new google.maps.LatLngBounds();

marker = new google.maps.Marker({
map: map,
//position: new google.maps.LatLng(56.6789471,-0.34535),
icon: "images/marker.png"
});
var markers = [
['One', 11.232214,122.155547],
['Two', 39.555535,-87.5462367],
['Three', 48.3563671,-1.34554825],

];

for( i = 0; i < markers.length; i++ ) {
var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
icon: "images/ico.png",
title: markers[i][0]
});
}
}

if (document.getElementById("gmap_canvas")) {
google.maps.event.addDomListener(window, 'load', init_map);
}




This code above creates google map with mulitple points (one, two, three).

And what i want to do, is to have a list of this contact points like:

<div class="point">Contact ONE</div>
<div class="point">Contact TWO</div>
<div class="point">Contact THREE</div>


And when i click this contact map should zoom to this point.
I found this, but example shows only one point, and also event is fired on marker click, not custom Html element.

https://developers.google.com/maps/documentation/javascript/examples/event-simple

Answer

You should set the map variable to global and define a global variable to a marker array (in the sample : markerArr).(Outside the init_map() function):

 <script>
 var map;
 var markerArr = [];
 function init_map() {...
 ...

Then in the for loop add each marker to this array:

 for( i = 0; i < markers.length; i++ ) {
    var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
    bounds.extend(position);
    marker = new google.maps.Marker({
        position: position,
        map: map,
        icon: "images/ico.png",
        title: markers[i][0]
    });
    markerArr.push(marker); // Add the marker to the array
 }

Then create a simple function with an integer param, let's call it jumpToMarker, where we can zoom and jump to the selected marker.:

function jumpToMarker(cnt){
    map.panTo(markerArr[cnt].getPosition());
    map.setZoom(4);
}

Finally set the divs and their onclick event in the DOM, after the map's div:

<div class="point"><a href="javascript:void(0);" onclick="jumpToMarker(0)">Contact ONE</a></div>
<div class="point"><a href="javascript:void(0);" onclick="jumpToMarker(1)">Contact TWO</a></div>
<div class="point"><a href="javascript:void(0);" onclick="jumpToMarker(2)">Contact THREE</a></div>

Hope this helps!