Akos
Reputation: 37
How to set center position for google maps
Tweeked the below code but couldn't set the center position in the below code. I found several tips but unfortunately I couldn't implement them into my code successfully.
Can someone help?
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.1', {
packages: ['map']
});
google.setOnLoadCallback(drawMap);
function drawMap() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Address');
data.addColumn('string', 'Location');
data.addColumn('string', 'Marker'),
data.addRows([
['London, England', 'TouristMagnet', 'london'],
['Paris, France', 'TouristMagnet', 'paris'],
['Dubai, United Arab Emirates', 'TouristMagnet', 'dubai'],
['Istanbul, Turkey', 'TouristMagnet', 'istanbul'],
['Barcelona, Spain', 'TouristMagnet', 'barcelona'],
['Amsterdam, Netherlands', 'TouristMagnet', 'amsterdam'],
['Milan, Italy', 'TouristMagnet', 'milan'],
['Rome, Italy', 'TouristMagnet', 'rome'],
['Vienna, Austria', 'TouristMagnet', 'vienna'],
['Prague, Czech Republic', 'TouristMagnet', 'prague'],
['Athens, Greece', 'TouristMagnet', 'athens'],
['Moscow, Russia', 'TouristMagnet', 'moscow'],
['Berlin, Germany', 'TouristMagnet', 'berlin'],
['Sofia, Bulgaria', 'TouristMagnet', 'sofia'],
['Budapest, Hungary', 'TouristMagnet', 'budapest'],
['Sydney, Australia', 'TouristMagnet', 'sydney'],
['Venice, Italy', 'TouristMagnet', 'venice']
]);
var url = 'http://dfsm9194vna0o.cloudfront.net/';
var options = {
zoomLevel: 5,
showTip: false,
useMapTypeControl: true,
icons: {
london: {
normal: url + '1401895-0-london100.png',
selected: url + '1401898-0-london200.png'
},
paris: {
normal: url + '1401894-0-paris100.png',
selected: url + '1401897-0-paris200.png'
},
dubai: {
normal: url + '1401892-0-dubai100.png',
selected: url + '1401893-0-dubai200.png'
},
istanbul: {
normal: url + '1401890-0-istanbul100.png',
selected: url + '1401891-0-istanbul200.png'
},
barcelona: {
normal: url + '1401886-0-barcelona100.png',
selected: url + '1401888-0-barcelona200.png'
},
amsterdam: {
normal: url + '1401883-0-amsterdam100.png',
selected: url + '1401885-0-amsterdam200.png'
},
milan: {
normal: url + '1401881-0-milan100.png',
selected: url + '1401882-0-milan200.png'
},
rome: {
normal: url + '1401876-0-rome100.png',
selected: url + '1401877-0-rome200.png'
},
vienna: {
normal: url + '1401874-0-vienna100.png',
selected: url + '1401875-0-vienna200.png'
},
prague: {
normal: url + '1401872-0-prague100.png',
selected: url + '1401873-0-prague200.png'
},
athens: {
normal: url + '1401870-0-athens100.png',
selected: url + '1401871-0-athens200.png'
},
moscow: {
normal: url + '1401868-0-moscow100.png',
selected: url + '1401869-0-moscow200.png'
},
berlin: {
normal: url + '1401866-0-berlin100.png',
selected: url + '1401867-0-berlin200.png'
},
sofia: {
normal: url + '1401864-0-sofia100.png',
selected: url + '1401865-0-sofia200.png'
},
budapest: {
normal: url + '1401860-0-budapest100.png',
selected: url + '1401863-0-budapest200.png'
},
sydney: {
normal: url + '1401858-0-sydney100.png',
selected: url + '1401859-0-sydney200.png'
},
venice: {
normal: url + '1401852-0-venice100.png',
selected: url + '1401855-0-venice200.png'
}
}
};
var map = new google.visualization.Map(document.getElementById('map_div'));
map.draw(data, options);
}
</script>
</head>
<body>
<div id="map_div" style="height: 600px; width: 1000px"></div>
</body>
</html>Upvotes: 0
Views: 368
Answers (1)
Dr.Molle
Reputation: 117314
You dont draw a google.maps.Map , it's a google.visualization.Map which doesn't implement a method to set the center.
By default it's centered in the middle of the rows(locations).
You may only center it based on the rows.
When you e.g. want to center it at the location of a particular row you must select the row programmatically via setSelection.
Example for Dubai(the 3rd row in your dataset, so the rowIndex is 2)
google.load('visualization', '1.1', {
packages: ['map']
});
google.setOnLoadCallback(drawMap);
function drawMap() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Address');
data.addColumn('string', 'Location');
data.addColumn('string', 'Marker'),
//removed some rows to speed it up
data.addRows([
['London, England', 'TouristMagnet', 'london'],
['Paris, France', 'TouristMagnet', 'paris'],
['Dubai, United Arab Emirates', 'TouristMagnet', 'dubai'],
['Istanbul, Turkey', 'TouristMagnet', 'istanbul'],
['Barcelona, Spain', 'TouristMagnet', 'barcelona'],
['Amsterdam, Netherlands', 'TouristMagnet', 'amsterdam']
]);
var url = 'http://dfsm9194vna0o.cloudfront.net/';
var options = {
zoomLevel: 5,
showTip: false,
useMapTypeControl: true,
icons: {
london: {
normal: url + '1401895-0-london100.png',
selected: url + '1401898-0-london200.png'
},
paris: {
normal: url + '1401894-0-paris100.png',
selected: url + '1401897-0-paris200.png'
},
dubai: {
normal: url + '1401892-0-dubai100.png',
selected: url + '1401893-0-dubai200.png'
},
istanbul: {
normal: url + '1401890-0-istanbul100.png',
selected: url + '1401891-0-istanbul200.png'
},
barcelona: {
normal: url + '1401886-0-barcelona100.png',
selected: url + '1401888-0-barcelona200.png'
},
amsterdam: {
normal: url + '1401883-0-amsterdam100.png',
selected: url + '1401885-0-amsterdam200.png'
},
milan: {
normal: url + '1401881-0-milan100.png',
selected: url + '1401882-0-milan200.png'
},
rome: {
normal: url + '1401876-0-rome100.png',
selected: url + '1401877-0-rome200.png'
},
vienna: {
normal: url + '1401874-0-vienna100.png',
selected: url + '1401875-0-vienna200.png'
},
prague: {
normal: url + '1401872-0-prague100.png',
selected: url + '1401873-0-prague200.png'
},
athens: {
normal: url + '1401870-0-athens100.png',
selected: url + '1401871-0-athens200.png'
},
moscow: {
normal: url + '1401868-0-moscow100.png',
selected: url + '1401869-0-moscow200.png'
},
berlin: {
normal: url + '1401866-0-berlin100.png',
selected: url + '1401867-0-berlin200.png'
},
sofia: {
normal: url + '1401864-0-sofia100.png',
selected: url + '1401865-0-sofia200.png'
},
budapest: {
normal: url + '1401860-0-budapest100.png',
selected: url + '1401863-0-budapest200.png'
},
sydney: {
normal: url + '1401858-0-sydney100.png',
selected: url + '1401859-0-sydney200.png'
},
venice: {
normal: url + '1401852-0-venice100.png',
selected: url + '1401855-0-venice200.png'
}
}
};
var map = new google.visualization.Map(document.getElementById('map_div'));
google.visualization.events.addOneTimeListener(map, 'ready', function(){
map.setSelection([{row:2, column:null}]);
map.setSelection(null);
});
map.draw(data, options);
}html,body,#map_div{height:100%;margin:0;padding:0;}<div id="map_div" ></div>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>Upvotes: 1
Related Questions
- How to set the center on a Google Map?
- How to move the center position of google map
- How to make google map NOT centered, but a little bit above?
- Google Maps API: Move map center to a position on my page?
- how do I center a map on my current location html5
- How to center my current position? (Google Maps)
- Google Maps, set the center coordinates to be off centered in the container
- An easy question about Google Maps - centering
- How to center a Google Map to a latitude and longitude location?
- How to set google map in the center of a small <div>?