Google My Maps Iframe

Question

Google My Maps Iframe

Navigation

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

0

I have a map with several tourist sites and the design of Google My Maps is perfect for what I need, but is there another way to include this Google My Maps map on a web page that is not for iframe? For example with the Google maps API?

javascript google-maps google-api

asked by Lina Cortés 24.07.2018 в 21:37

source

2 answers

Echo does not show a date when using echo java read a free pdf table

score 0 · Answer 1

I personally use gmaps js

Official: link

With which you assign it to a div an example

var map = new GMaps({
  div: '#map',
  lat: -12.043333,
  lng: -77.028333
});


GMaps.geocode({
  address: 'Germany',
  callback: function(results, status){
    var firstResult = results[0];
    map.setCenter(firstResult.geometry.location.lat(), firstResult.geometry.location.lng());
    map.setZoom(7);
  }
});

html, body {
  height: 100%;
  width: 100%;
}
#map {
  width: 100%;
  height: 100%;
  background: #ddd;
}

<script src="https://maps.google.com/maps/api/js?sensor=true"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gmaps.js/0.4.9/gmaps.min.js"></script>


<div id="map">Map</div>

Example link

score 0 · Answer 2

Of course it can be done differently, but now using the Maps API has a cost for developers: link

I would recommend using OpenStreetMap with OpenLayers: link

Example:

<head>
  <title>Mapa simple de OpenStreetMap con Open Layers</title>
  <link rel="stylesheet" href="https://openlayers.org/en/v4.0.1/css/ol.css" type="text/css">
</head>

<body>
  <h1>Mapa simple de OpenStreetMap con Open Layers</h1>
  <script src="https://openlayers.org/en/v4.0.1/build/ol.js"></script>
  <div id="map" class="map"></div>
  <script>
    var map = new ol.Map({
      layers: [new ol.layer.Tile({
        source: new ol.source.OSM()
      })],
      target: 'map',
      view: new ol.View({
        projection: 'EPSG:4326',
        center: [-82.362777, 23.092234],
        zoom: 10
      })
    });
  </script>
</body>