Alpine + Google Maps 1

alpine-google-maps-1.markdown

Alpine + Google Maps 1

A Pen by Raymond Camden on CodePen.

License.

index.html

<script src="https://unpkg.com/alpinejs@3.1.x/dist/cdn.min.js" defer></script>

<div x-data="app">
	<template x-for="store in stores">
		<p>
			Store location: <span x-text="store.lat"></span>,<span x-text="store.lng"></span><br/>
			<img :src="getImageUrl(store.lat,store.lng)">
		</p>
	</template>
</div>

script.js

const MAP_KEY = 'AIzaSyC3hC35ehz1oAfUll7q7qzUlPa27Gz5g5g';

document.addEventListener('alpine:init', () => {
  Alpine.data('app', () => ({
		stores:getStores(),
		getImageUrl(lat,lng) {
			return `https://maps.googleapis.com/maps/api/staticmap?center=${lat},${lng}&zoom=15&size=400x400&maptype=roadmap&markers=color:blue%7C${lat},${lng}&key=${MAP_KEY}`
		}
  }))
});

/* 
imagine this was an API call..
*/
function getStores() {
	return [
    {
        "lat": 30.175776,
        "lng": -92.077008,
      	"allday":true
    },
    {
        "lat": 30.173529,
        "lng": -92.078997,
      	"allday":true
    },
    {
        "lat": 30.394324,
        "lng": -91.086551,
       	"allday":false
    },
    {
        "lat": 30.176162,
        "lng": -93.219241,
       	"allday":false
    },
    {
        "lat": 31.269887,
        "lng": -92.46034,
       	"allday":false
    },
    {
        "lat": 29.61629,
        "lng": -90.757389,
       	"allday":false
    },
    {
        "lat": 30.486217,
        "lng": -90.45677,
       	"allday":false
    }
	]
}

style.css

[x-cloak] { display: none !important; }