Gmaps jQuery un plugin para mostrar ubicaciones en tu sitio web

Gmaps jQuery un plugin para mostrar ubicaciones en tu sitio web es un ligero complemento jQuery que facilita la incorporación de Google Maps personalizable en la página web mediante los atributos de datos HTML y la API JavaScript de Google Maps.

Este plugin elimina mucha frustración cuando empezamos a trabajar con los mapas de google pues la api de google maps requiere de un conocimiento muy fuerte de JavaScript.

Este plugin tiene la facultad de convertir etiquetas HTML sin tener que trabajar tanto con JavaScript en la parte de configuración, este plugin soporta las siguientes características:

1. Marcadores personalizados.
2. Controles personalizados.
3. Estilos personalizados.
4. Permite activar / desactivar los eventos draggable, mousewheel y doubleclick.
5. Permite múltiples mapas de Google en una página.

Para implementar este plugin es importante usar los siguiente fragmentos de código:

1.- Incluir el código de jQuery y el plugin gmaps

 <script src="http://code.jquery.com/jquery-3.2.1.js"></script>
 <link href="jquery.gmaps.css" rel="stylesheet" />
 <script src="js/jquery.gmaps.js"></script>

2.- Incluir una etiqueta HTML div con el siguiente formato:

<div data-key="APIKEY"
data-control-zoom="true"
data-control-type="true"
data-control-scale="true"
data-control-streetview="true"
data-control-rotate="true"
data-event-mousewheel="true"

data-zoom="14" role="map" class="gmaps">

<!-- items de ubicaciones -->

</div>

3.- Integra los datos de ubicación a la etiqueta principal, esto se debe de realiza de la siguiente forma:

<div data-key="AIzaSyDwNBXmHBDQ29JWsRH8gwNVkf7mM0-flaI"
data-control-zoom="true"
data-control-type="true"
data-control-scale="true"
data-control-streetview="true"
data-control-rotate="true"
data-event-mousewheel="true"

data-zoom="14" role="map" class="gmaps">

<!-- items de ubicaciones -->

<div
data-id="1"
data-lat="-20.363"
data-lng="111.044"
class="marker">
<div class="map-card">
<h1>This is my title 1</h1>
<p>Address: Fake street, #445, Stgo.</p>
<p>Phone: +56753223344</p>
<p>e-Mail: fake1@email.com</p>
</div>
</div>

<div
data-id="2"
data-lat="-21.363"
data-lng="121.044"
class="marker">
<div class="map-card">
<h1>This is my title 2</h1>
<p>Address: Fake street, #445, Stgo.</p>
<p>Phone: +56753223344</p>
<p>e-Mail: fake2@email.com</p>
</div>
</div>

<div
data-id="3"
data-lat="-25.363"
data-lng="131.044"
class="marker">
<div class="map-card">
<h1>This is my title 3</h1>
<p>Address: Fake street, #445, Stgo.</p>
<p>Phone: +56753223344</p>
<p>e-Mail: fake3@email.com</p>
</div>
</div>
<!-- fin datos de ubicación -->

</div>

Paso 4.- Crea la referencia del plugin mediante el siguiente código:

$(document).ready(function () {
$('.gmaps').gmaps();
});

Paso 5.- Agregar estilos para especificar tamaños de pantalla:

<style>

.gmaps {
height:500px;
width: 100%;
}
</style>

El resultado debe de ser este:

Esto es para indicar la apiKey de Google maps, si tienes dudas pues ver este video: https://youtu.be/kC4KqQJJY0o?t=3m5s

The post Gmaps jQuery un plugin para mostrar ubicaciones en tu sitio web appeared first on Develoteca.