Add bookmark to Google map

Asked

Viewed 544 times

0

As the postage made on Disable zoom google maps does not work

Samir Braga answered the following code:

 <!doctype html>
<html lang="pt,BR">
<head>
    <meta charset="UTF-8">
    <title>API Google Maps V3</title>

    <!-- Inicialização do mapa -->
    <script>
    function initialize() {

  // Exibir mapa;
  var myLatlng = new google.maps.LatLng(-8.0631495, -34.87131120000004);
  var mapOptions = {
    zoom: 17,
    center: myLatlng,
    panControl: false, 
draggable: false,
    zoomControl: false,
    scrollwheel: false,
    // mapTypeId: google.maps.MapTypeId.ROADMAP
    mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
    }
  }
  // Exibir o mapa na div #mapa;
  var map = new google.maps.Map(document.getElementById("mapa"), mapOptions);

  // crio um objeto passando o array de estilos (styles) e definindo um nome para ele;
  var styledMap = new google.maps.StyledMapType(styles, {
    name: "Mapa Style"
  });
  // Aplicando as configurações do mapa
  map.mapTypes.set('map_style', styledMap);
  map.setMapTypeId('map_style');

}

// Função para carregamento assíncrono
function loadScript() {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "http://maps.googleapis.com/maps/api/js?key=AIzaSyDeHb17So0QupSGO_d6b8X-OyvJ32UQehs&sensor=true&callback=initialize";
  document.body.appendChild(script);
}

window.onload = loadScript;
</script>

    <style>
        #mapa{
            width: 100%;
            height: 500px;
            border: 1px solid #ccc;
        }
    </style>

</head>

<body>
    <div id="mapa"></div>
</body>
</html>

But my question would be about his answer to the code. I tried to modify here using this suggestion and it worked, was very good inclusive, but does not appear the pin (marker) in place. Only the map with my coordinate at the center, the marker at the exact location does not appear... so there is some parameter to include the marking?

I tried to add "Marker" with the coordinate or something and I couldn’t.

Thank you.

google-maps google maps

1 answer

0


Try something similar to this:

function initialize() {

  var myLatlng = new google.maps.LatLng(28.3852338, -81.5638743);
  var mapOptions = {
    zoom: 15,
    center: myLatlng,
    panControl: false,
    draggable: false,
    zoomControl: false,
    scrollwheel: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style'],
    },
  }

  var map = new google.maps.Map(document.getElementById("mapa"), mapOptions);
  var marker = new google.maps.Marker({
    position: myLatlng,
    map: map
  });


}

function loadScript() {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "http://maps.googleapis.com/maps/api/js?key=AIzaSyDeHb17So0QupSGO_d6b8X-OyvJ32UQehs&sensor=true&callback=initialize";
  document.body.appendChild(script);
}

window.onload = loadScript;
<style>
  #mapa {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
  }
</style>

<div id="mapa"></div>

  • It worked, I confess that I had difficulty identifying the difference between routines, I used only the first part since I changed in CSS and I do not use the "map" class, but it worked, it was in the center... I could comment on the difference of your suggestion to the first?

  • The code you placed in the question did not have a marker so it would never work, and if you applied a marker it would also not work since when you created a custom style you lost the settings applied in the original style which includes the markers. In short I reversed the order of the factors :) but I did not put the rest of the code because it was redundant its property styles was null, not even initialized.

  • Interesting, thank you Felipe, at first solved.

Browser other questions tagged google-maps google maps

You are not signed in. Login or sign up in order to post.