admin管理员组

文章数量:1023108

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);

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);
  • javascript
  • google-maps-api-3
  • google-maps-markers
Share Improve this question edited Oct 20, 2013 at 2:30 asked Apr 28, 2013 at 16:39 user2315898user2315898
Add a ment  | 

1 Answer 1

Reset to default 3

What about using a hash in the url?

Try using "http://students.example./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());

    }

});

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);

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);
  • javascript
  • google-maps-api-3
  • google-maps-markers
Share Improve this question edited Oct 20, 2013 at 2:30 asked Apr 28, 2013 at 16:39 user2315898user2315898
Add a ment  | 

1 Answer 1

Reset to default 3

What about using a hash in the url?

Try using "http://students.example./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());

    }

});

本文标签： How to show a map focused on a marker using a click event on Google Maps JavaScript API v3Stack Overflow

版权声明：本文标题：How to show a map focused on a marker using a click event on Google Maps JavaScript API v3? - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745524157a2154447.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。