How to mark a specific location on my Maps with PHP-Javascript

Question

How to mark a specific location on my Maps with PHP-Javascript

Navigation

#1 by (1 votes)

0

I have the following code in which it shows me the location zone that I am specifying, but it can be marked with an image (.jpg) that wants to add the place that I want. So I get the image where I'm putting the latitude and longitude?

this is the code:

<!DOCTYPE html>
<html>
<head>
 <title> INSERTAR MAPA EN GOOGLE MAPS</title>


 <script src="http://maps.googleapis.com/maps/api/js"> </script>

 <script>

 function init(){
    var mapOption = {
     center: new google.maps.LatLng(-12.06244,-77.12272),
     zoom: 15,
     mapTypeId:google.maps.MapTypeId.ROADMAP
    };
   var map = new google.maps.Map(document.getElementById("map"),mapOption);

  }

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

 </script>


  </head>
  <body>

  <div id="map" style="width:1000px; height: 800px; border: solid; border-color: #00FFFF  "></div>


</body>
</html>

javascript php google-maps

asked by Kevincs7 11.11.2018 в 20:29

source

1 answer

Search for several items in a chain Execute an "Onclick" event from javascript in Dynamic controls

score 1 · Accepted Answer

Add a marker (bookmark) to your map:

// Define tu marcador (pon la url de tu imagen en la propiedad **icon**)
var marker = new google.maps.Marker({
    position: { lat: -12.06244, lng: -77.12272 }, // aca defines las coordenadas
    icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
});
// Agregar tu marcador al mapa
marker.setMap(map);

according to your code you would put it in:

function init(){
   var mapOption = {
     center: new google.maps.LatLng(-12.06244,-77.12272), 
     zoom: 15,
     mapTypeId:google.maps.MapTypeId.ROADMAP
   };
   var map = new google.maps.Map(document.getElementById("map"),mapOption);

   // Define tu marcador (pon la url de tu imagen en la propiedad **icon**)
   var marker = new google.maps.Marker({
      position: { lat: -12.06244, lng: -77.12272 }, // aca defines las coordenadas
      icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
   });
   // Agregar tu marcador al mapa
   marker.setMap(map);
}

Edited:

To show 2 or more markers:

function init(){
   var mapOption = {
     center: new google.maps.LatLng(-12.06244,-77.12272),
     zoom: 15,
     mapTypeId:google.maps.MapTypeId.ROADMAP
   };
   var map = new google.maps.Map(document.getElementById("map"),mapOption);

   // Marcador 1
   var marker = new google.maps.Marker({
      position: { lat: -12.06244, lng: -77.12272 }, // coodernadas del marcador 1
      icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
   });
   marker.setMap(map);

   // Marcador 2
   var marker2 = new google.maps.Marker({
      position: { lat: -12.06444, lng: -77.12472 }, // coordenadas del marcador 2
      icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
   });
   marker2.setMap(map);
}

The result is 2 markers on the map