Problem with google maps api JavaScript

Question

Problem with google maps api JavaScript

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

I want to create a map on my website that when you click on different directions that are on the side, they are shown on the map, without leaving the page, only the location of the page will be modified, like the following web:

link

Does someone give me a hand? Search all the info% of API Google Maps and I could not find an example. Thanks!

javascript html5 google-maps

asked by Lucas Nahuel Giacché 02.09.2016 в 16:11

source

2 answers

How to export a database to Excel and mail Fragment does not load

score 1 · Answer 1

What you need is to generate the list where you have the attributes "latitude" and "longitude". This code works, to check it, add your API KEY

 $(".actualizarMapa").on("click", function() {
      initMap($(this).attr("latitud"), $(this).attr("longitud"));
     });
    

      function initMap(latitud, longitud) {       

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 15,
          center: new google.maps.LatLng(latitud,longitud)
        });

        var marker = new google.maps.Marker({
          position: new google.maps.LatLng(latitud,longitud),
          map: map,
          title: 'Hello World!'
        });
      }

 function initMapByDefault() {
        var myLatLng = {lat: -8.1167518, lng: -79.0371252};

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 15,
          center: myLatLng
        });

        var marker = new google.maps.Marker({
          position: myLatLng,
          map: map,
          title: 'Hello World!'
        });
      }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
   </style>

 <body>
  <a id="ubicacionSucural1" style="cursor: pointer;" latitud="-8.1167518" longitud="-79.0371252" class="actualizarMapa">
        <p>Sucursal La tiendita de Don Pepe Trujillo </p>       
        <p>Calle Francisco Pizarro 551 </p>
    </a>
   <br>
    <a id="ubicacionSucural2" style="cursor: pointer;" latitud="-12.0553436" longitud="-77.063575" class="actualizarMapa">
        <p>Sucursal La tiendita de Don Pepe Lima </p>       
        <p>Calle Francisco Pizarro 551 </p>
    </a>
    <div id="map"></div>   
     <script src="https://maps.googleapis.com/maps/api/js?key=AQUI_COLOCAS_TU_API_KEY&callback=initMapByDefault"
    async defer></script>

  </body>

For the solution of this question I have based myself on the example found on the official Google Maps website: link

and there is another example as the good El Asiduo says in: link

score 0 · Answer 2

That code works, but I take it to my html and it does not work! What I can do? Thanks!

 $(".actualizarMapa").on("click", function() {
      initMap($(this).attr("latitud"), $(this).attr("longitud"));
     });
    

      function initMap(latitud, longitud) {       

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 15,
          center: new google.maps.LatLng(latitud,longitud)
        });

        var marker = new google.maps.Marker({
          position: new google.maps.LatLng(latitud,longitud),
          map: map,
          title: 'Hello World!'
        });
      }

 function initMapByDefault() {
        var myLatLng = {lat: -8.1167518, lng: -79.0371252};

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 15,
          center: myLatLng
        });

        var marker = new google.maps.Marker({
          position: myLatLng,
          map: map,
          title: 'Hello World!'
        });
      }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
   </style>

 <body>
  <a id="ubicacionSucural1" style="cursor: pointer;" latitud="-8.1167518" longitud="-79.0371252" class="actualizarMapa">
        <p>Sucursal La tiendita de Don Pepe Trujillo </p>       
        <p>Calle Francisco Pizarro 551 </p>
    </a>
   <br>
    <a id="ubicacionSucural2" style="cursor: pointer;" latitud="-12.0553436" longitud="-77.063575" class="actualizarMapa">
        <p>Sucursal La tiendita de Don Pepe Lima </p>       
        <p>Calle Francisco Pizarro 551 </p>
    </a>
    <div id="map"></div>   
     <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCZhH6WXRQpmvkrpZ6w-kBIQTqOwHuPncI&callback=initMapByDefault"
    async defer></script>

  </body>