How can i jump from another web page (with an url) to a specific LatLong or to a marker on my self-created google maps (v3 JS API)?

Question

I found a simple example, but this works only if the map and the link on the same page.

HTML

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
  <script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,visualization,drawing,places"></script>

  <script type="text/javascript">
    function initialize() {
      var latlng = new google.maps.LatLng(51.522387,-0.173501);
      var myOptions = {
        zoom: 15,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);

      var marker2 = new google.maps.Marker(
        {
          position: new google.maps.LatLng(51.5262405, -0.074549),
          map: map,
          title: "my 2nd title"
        }
      );

      google.maps.event.addDomListener(
        document.getElementById("marker2"), "click", function() {
          map.setCenter(marker2.getPosition());
          return false;
        }
      );
    }

  </script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:310px; height:260px"></div>
<a href="#" id="marker2">Second place</a>
</body>
</html>

Is there a way to jump to a specific location (LatLong) or directly to a marker with marker.getPosition() from another website to my self created GM Map?

Maybe with an anchor? Ex: http://www.example.com/map#marker2

score 2 · Accepted Answer · edited May 23 '17 at 11:52

2

Here example to get value of query from URL jquery get querystring from URL

Use this to inserted your code and use

map.setCenter(new gooogle.map.latlng(0,0));

for setting center map to location of marker

edited May 23 '17 at 11:52

Community

1
1

answered May 07 '15 at 13:10

HoangHieu

2,802
3
28
44

you gave me a great idea! thanks! i found with Angularjs var locationlat = $location.search.loclat; and in the url ?loclat=12.123 – xmux May 07 '15 at 14:17

Dr.Molle · Answer 2 · 2015-05-07T14:11:00.057

Parse location.hash to get the desired value

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

To trigger the click use the ID of the link(e.g. #marker2).

I would suggest to use a list with IDs of clickable links to prevent abuse:

     if(['marker2']//array with IDs of clickable links
        .indexOf(hash)>-1){
       google.maps.event.trigger( document.getElementById(hash),'click');
     }

Demo: http://run.plnkr.co/plunks/ia7uUFOuG5L1tzsrayw3/#marker2

For a latLng you may for example use latitude and longitude separated by a comma: #52.549,13.425

split the string by comma, validate the numbers(a latitude must be between -85 and 85 and a longitude between -180 and 180 )

When the validation was successfull create a LatLng based on the values and call map.setCenter with the LatLng as argument.

Demo: http://run.plnkr.co/plunks/ia7uUFOuG5L1tzsrayw3/#52.549,13.425

complete code(run it at the end of initialize):

  (function(h) {

    var hash = String(h),
      latLng = {};
    if (!!hash) {
      hash = hash.substr(1);
      if (['marker2'] //array with IDs of clickable links
        .indexOf(hash) > -1) {
        google.maps.event.trigger(document.getElementById(hash), 'click');
      } else {
        hash = hash.split(',');
        if (hash.length == 2) {
          [
            ['lat', 85],
            ['lng', 180]
          ].forEach(function(o, i) {
            if (!latLng || isNaN(hash[i]) || Math.abs(hash[i]) > o[1]) {
              latLng = null;
              return;
            }
            latLng[o[0]] = parseFloat(hash[i]);
            if (i === 1) {
              map.setCenter(latLng);
            }
          });
        }
      }
    }
  }(location.hash));

here is the editable plunker! Thanks! http://plnkr.co/edit/ia7uUFOuG5L1tzsrayw3?p=preview — xmux, May 08 '15 at 08:04

How can i jump from another web page (with an url) to a specific LatLong or to a marker on my self-created google maps (v3 JS API)?

2 Answers2