简体   繁体   中英

How to show a map focused on a marker using a click event on Google Maps JavaScript API v3?

I created a map that focuses on a user's location. The map has a single marker with an info window. When a user clicks on the info window it gives him a hyperlink to an info page (info.html). I want to create an option that will allow the user to go back from the info page to the map, and the map should be focused on the same marker (not on his current location). It's basically going the opposite way. It sounds pretty simple, but I have no idea how to code this. I guess I can build a different map for every marker, but that seems highly unlikely to be the right solution. Any help would be appreciated.

This is my attempt with the script, ( initialize2() doesn't work):

$(document).ready(function() {
    getLocation();
});

var map;
var jones = new google.maps.LatLng(40.59622788325198, -73.50334167480469);

function getLocation() {
    navigator.geolocation.getCurrentPosition(
        function(position) {
            var myLatLng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
            map.setCenter(myLatLng);   
        },
        function() {
            alert("Please enable location detection on your device");
        }
    );
}

function initialize() {
    var mapOptions = {
        center: map,
        zoom: 9,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

    var infowindow = new google.maps.InfoWindow({
    });

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

    google.maps.event.addListener(marker1, 'click', function() {
        infowindow.setContent('<h4>Jones Beach</h4><a href="info.html">See info</a>');
        infowindow.open(map,marker1);   
    });
}

google.maps.event.addDomListener(window, 'load', initialize);

// this is my attempt to focus on the marker
// there will be a button that will evoke this function from info.html
function initialize2() {
  var mapOptions2 = {
    zoom: 14,
    center: new google.maps.LatLng(40.59622788325198, -73.50334167480469),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions2);
}

google.maps.event.addDomListener(window, 'load', initialize2);

What about using a hash in the url?

Try using " http://students.example.com/test.html#one ":

$(function() {

    var places = {
        one: [40.59622788325198, -73.50334167480469],
        two: [50.59622788325198, -71.50334167480469]
    };

    var div = $('#map-canvas');

    var map = new google.maps.Map(div.get(0), {
        center: map,
        zoom: 9,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var markers = {};

    $.each(places, function(name) {

        markers[name] = new google.maps.Marker({
            position: new google.maps.LatLng(this[0], this[1]),
            map: map
        });

    });

    var place = location.hash.substr(1);

    if(place in places) {

        map.setCenter(markers[place].getPosition());

    }

});

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM