구글지도 api

key설정

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAotvYQ7CLFO-yrwgF7YUdc6HJw-hKtRoE&callback=initMap&libraries=&v=weekly" defer></script>

 

 

구글제공 기본 튜토리얼

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

(function(exports) {
   "use strict";

   function initMap() {
     var myLatLng = {
       lat: 35.175185,
       lng: 129.124936
     };
     var map01 = new google.maps.Map(document.getElementById("map"), {
       zoom: 16,
       center: myLatLng
     });
     var marker = new google.maps.Marker({
       position: myLatLng,
       map: map01,
       title: "Hello World!"
     });
   }

   exports.initMap = initMap;
 })((this.window = this.window || {}));

 

 

한페이지 지도 여러개

<div class="map" id="map01" lat="35.868204" lng="128.612013"></div>

<div class="map" id="map02" lat="35.868204" lng="128.612013"></div>

var maps = [];
    var markers = [];
    function initMap() {
        var $maps = $('.map-api');
        $.each($maps, function (i, value) {
            console.log("lat: "+$(value).attr('lat'));
            var uluru = { lat: parseFloat($(value).attr('lat')), lng: parseFloat($(value).attr('lng')) };

            var mapDivId = $(value).attr('id');

            maps[mapDivId] = new google.maps.Map(document.getElementById(mapDivId), {
                zoom: 15,
                center: uluru
            });

            markers[mapDivId] = new google.maps.Marker({
                position: uluru,
                map: maps[mapDivId]
            });
        })
    }