사이트내에 구글맵 적용시 최초좌표 지정하는 방법

사이트내에 구글맵 적용시 최초좌표 지정하는 방법

QA

사이트내에 구글맵 적용시 최초좌표 지정하는 방법

본문

웹사이트에 해외지사 위치를 구글맵 지도에 표시하기 위한 스크립트를 찾아서 아래와 같이 적용하였는데요.
좌표값을 입력하면 지도가 처음 표시될때의 그 위치를 먼저 보여주게 지정해주려면 어떻게 추가해 줘야할까요?
구글맵 참 적용이 쉽지 않네요. 도움 부탁 드립니다.

===================== 구글맵 소스 부분 ===================

<script>
jQuery(function($) {
// Asynchronously Load the map API 
var script = document.createElement('script');
script.src = "https://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";
document.body.appendChild(script);
});
function initialize() {
var map;
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
mapTypeId: 'roadmap'
};
// Display a map on the page
map = new google.maps.Map(document.getElementById("map_tuts"), mapOptions);
map.setTilt(45);
// Multiple Markers
var markers = [
['Mumbai', 19.0760,72.8777],
['Pune', 18.5204,73.8567],
['Bhopal ', 23.2599,77.4126],
['Agra', 27.1767,78.0081],
['Delhi', 28.7041,77.1025],
];
// Info Window Content
var infoWindowContent = [
['<div class="info_content">' +
'<h3>Mumbai</h3>' +
'<p>Lorem Ipsum  Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>' +'</div>'],
['<div class="info_content">' +
'<h3>Pune</h3>' +
'<p>Lorem Ipsum  Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>' +'</div>'],
['<div class="info_content">' +
'<h3>Bhopal</h3>' +
'<p>Lorem Ipsum  Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>' +'</div>'],  
['<div class="info_content">' +
'<h3>Agra</h3>' +
'<p>Lorem Ipsum  Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>' +'</div>'],
['<div class="info_content">' +
'<h3>Delhi</h3>' +
'<p>Lorem Ipsum  Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>' +'</div>'],
];
// Display multiple markers on a map
var infoWindow = new google.maps.InfoWindow(), marker, i;
// Loop through our array of markers & place each one on the map  
for( i = 0; i < markers.length; i++ ) {
var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0]
});
// Each marker to have an info window    
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, marker);
}
})(marker, i));
// Automatically center the map fitting all markers on the screen
map.fitBounds(bounds);
}
// Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
this.setZoom(5);
google.maps.event.removeListener(boundsListener);
});
}
</script>

이 질문에 댓글 쓰기 :

답변 1

이렇게 해보는건 어떠실까요?

 

<!DOCTYPE html>

<html>

<head>

<title>Google Maps Example</title>

<style>

#map_tuts {

height: 400px;

width: 100%;

}

</style>

</head>

<body>

<div id="map_tuts"></div>

 

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize"></script>

<script>

function initialize() {

var map;

var bounds = new google.maps.LatLngBounds();

var mapOptions = {

mapTypeId: 'roadmap'

};

 

// Display a map on the page

map = new google.maps.Map(document.getElementById("map_tuts"), mapOptions);

map.setTilt(45);

 

// Set the initial position and zoom level

var initialPosition = new google.maps.LatLng(19.0760, 72.8777); // Example coordinates

map.setCenter(initialPosition);

map.setZoom(10);

 

// Multiple Markers

var markers = [

['Mumbai', 19.0760, 72.8777],

['Pune', 18.5204, 73.8567],

['Bhopal', 23.2599, 77.4126],

['Agra', 27.1767, 78.0081],

['Delhi', 28.7041, 77.1025],

];

 

// Info Window Content

var infoWindowContent = [

['<div class="info_content">' +

'<h3>Mumbai</h3>' +

'<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>' +

'</div>'],

['<div class="info_content">' +

'<h3>Pune</h3>' +

'<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>' +

'</div>'],

['<div class="info_content">' +

'<h3>Bhopal</h3>' +

'<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>' +

'</div>'],

['<div class="info_content">' +

'<h3>Agra</h3>' +

'<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>' +

'</div>'],

['<div class="info_content">' +

'<h3>Delhi</h3>' +

'<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>' +

'</div>'],

];

 

// Display multiple markers on a map

var infoWindow = new google.maps.InfoWindow(),

marker, i;

 

// Loop through our array of markers & place each one on the map

for (i = 0; i < markers.length; i++) {

var position = new google.maps.LatLng(markers[i][1], markers[i][2]);

bounds.extend(position);

marker = new google.maps.Marker({

position: position,

map: map,

title: markers[i][0]

});

 

// Each marker to have an info window

google.maps.event.addListener(marker, 'click', (function (marker, i) {

return function () {

infoWindow.setContent(infoWindowContent[i][0]);

infoWindow.open(map, marker);

}

})(marker, i));

 

// Automatically center the map fitting all markers on the screen

map.fitBounds(bounds);

}

 

// Override our map zoom level once our fitBounds function runs (Make sure it only runs once)

var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function (event) {

this.setZoom(5);

google.maps.event.removeListener(boundsListener);

});

}

 

// Asynchronously Load the map API

var script = document.createElement('script');

script.src = "https://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";

document.body.appendChild(script);

</script>

</body>

</html>


 

답변을 작성하시기 전에 로그인 해주세요.
전체 1

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT