I am gone through many tutorials and the Google Developer site, but everywhere the way to create Google Maps with a particular latitude/longitude are given.e.g.
function initialize() {
var mapOptions = {
center: {
lat: -34.397,
lng: 150.644
},
zoom: 8
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
Does anyone know the JavaScript code to create the map based on dynamic values lat/long? I mean not specific values like -34.397 etc. To the function initialize I will pass the latitude and longitude arguments and generate the map. Can anyone please tell me how to do it?
If you're going to pass in values for lat/lng as arguments for the initialize function couldn't you do:
function initialize(lat, lng) {
var mapOptions = {
center: { lat: lat, lng: lng},
zoom: 8
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize.bind(null, <Lat>, <Lng>));
Pass the lat, lng to your function as parameters and call your function with the right values initialize(-34.397, 150.644)
function initialize(lat, lng) {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(lat, lng),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize(-34.397, 150.644));
try with this:
function initialize(lat, lng){
return new wrapperGM(lat,lng).initialize;
}
function wrapperGM(lat, lng) {
this.initialize=function() {
var mapOptions = {
center: {
lat: lat,
lng: lng
},
zoom: 8
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
}
google.maps.event.addDomListener(window, 'load', initialize(56, 8));
hope this helps.
regards
Use gmap4rails gem
and in your controller
def map
#hash = Gmaps4rails.build_markers(#towns) do |town, marker|
marker.lat town.master_geo_town.latitude
marker.lng town.master_geo_town.longitude
marker.infowindow render_to_string(:partial => "infomap", :locals=> { :town => town.master_geo_town})
end
and in your view
<div id="multi_markers" style='width:100%;height: 400px;'> </div>
<script>
handler = Gmaps.build('Google');
handler.buildMap({ internal: {id: 'multi_markers'}}, function(){
var json_array = <%=raw #hash.to_json %>;
var markers = handler.addMarkers(json_array);
_.each(json_array, function(json, index){
json.marker = markers[index];
});
createSidebar(json_array);
handler.bounds.extendWith(markers);
handler.fitMapToBounds();
});
});
</script>
Related
I want to put markers to the specific cities that I chose but I need to do it in a for loop, manually going through the process is time-consuming and looks quite ugly on the code. Any tips to use a for loop correctly? What am I doing wrong here?
var izmir = {lat: 38.4237, lng: 27.1428};
var amsterdam = {lat: 52.3680, lng: 4.9036};
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {zoom: 4,
center: izmir});
var map = new google.maps.Map(document.getElementById('map'), {zoom: 4,
center: amsterdam});
var i;
for(i=0;i.length;i++)
{
nokta = new google.maps.Marker({position: izmir,amsterdam, map: map});
}
}
EDIT: I guess I've partly achieved what I wanted, only problem is that the marker is only used by the last entry, in this case it's Prague. If I change it to another city (e.g. Amsterdam), map is centered on Amsterdam and the marker is only used by Amsterdam. How can I use the marker on all?
var sehirler = {
'izmir': {lat: 38.4237, lng: 27.1428},
'amsterdam': {lat: 52.3680, lng: 4.9036},
'prague': {lat: 50.0755, lng: 14.4378}};
function initMap() {
for (var sehir in sehirler)
{
var map = new google.maps.Map(document.getElementById('map'),
{zoom: 4, center: sehirler[sehir]});
var marker = new google.maps.Marker({position: sehirler[sehir], map: map});
}
}
EDITED based on discussion below
is this what you're looking for?
// initialize object containing all cities
var sehirler = {
izmir: { lat: 38.4237, lng: 27.1428 },
amsterdam: { lat: 52.368, lng: 4.9036 },
prague: { lat: 50.0755, lng: 14.4378 }
};
function initMap() {
// initialize main map
var center = sehirler.CITY // <-- edit CITY to be the correct city
var map = new google.maps.Map(document.getElementById('map'), { zoom: 4, center: center });
// iterate throughout cities to put all markers on same map
for (var sehir in sehirler) {
var marker = new google.maps.Marker({ position: sehirler[sehir], map: map });
}
}
I created google maps with Json and used database postgresql
this is my code
<script type="text/javascript">
var map;
var national = [{"lng":"-6.173319","city":"JAKARTA","lat":"106.818672"}];
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-0.789275,113.921327),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
$.getJSON('json_city.json', function(data) {
$.each( data.national, function(index, item) {
var myLatlng = new google.maps.LatLng(item.lat, item.lng);
alert(myLatlng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: "text "+item.city
});
});
});
// Initialize the map
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Lat and long used character type (Text). My maps can show, but my marker can't show.
Google Maps needs coordinates for the LatLng constructor to be Numbers, not strings. Try:
var myLatlng = new google.maps.LatLng(parseFloat(item.lat), parseFloat(item.lng));
I embed custom google map to my homepage (under contact) - but how to set the marker on the map and map itself on the right place?
addition to html was:
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="map.js"></script>
and js code is:
function initialize() {
var mapCanvas = document.getElementById('map-canvas');
var mapOptions = {
center: new google.maps.LatLng(44.5403, -78.5463),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions)
}
google.maps.event.addDomListener(window, 'load', initialize);
In initialize function you need add var marker variable. Below is simple example to set marker on map when click. Hope this help
function initializeMap() {
var options = {
center: new google.maps.LatLng(21.1569, 106.113),
zoom: 15
};
map = new google.maps.Map(document.getElementById('map-canvas'), options);
directionsDisplay = new google.maps.DirectionsRenderer();
infoWindow = new google.maps.InfoWindow();
marker = new google.maps.Marker();
directionsDisplay.setMap(map);
}
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
function placeMarker(location) {
geocoder.geocode({latLng : location}, function(response, status){
if (status == google.maps.GeocoderStatus.OK) {
console.log(response);
if (response[0]) {
marker.setMap(map);
marker.setPosition(location);
infoWindow.setContent(response[0].formatted_address);
infoWindow.open(map, marker);
}
}
});
}
I am using the gem "geocoder" to get the lang and long from a address but I cant seem to be able to get a marker on my map
- lat_long = Geocoder.coordinates(Mode.full_address).to_s.gsub('[', '').gsub(']', '')
%script{:src => "https://maps.googleapis.com/maps/api/js?v=3.exp"}
:javascript
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(#{lat_long})
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
This places the map where it should be but it does not give me a marker
Add a google.maps.Marker.
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(#{lat_long})
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
// Create a marker on map center
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
});
}
google.maps.event.addDomListener(window, 'load', initialize);
I can not get the marker to show up on the map. Can anyone help me find out what is wrong that would be a huge help?
Here is the code:
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var myLatlng = new google.maps.LatLng(33.748995, -84.387982);
var mapOptions = {
center: myLatlng,
zoom: 11,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
var map = new google.maps.Map(map_canvas, mapOptions);
TestMarker();
}
// Function for adding a marker to the page.
function addMarker(location) {
marker = new google.maps.Marker({
position: location,
map: map
});
}
// Testing the addMarker function
function TestMarker() {
Atlanta = new google.maps.LatLng(33.748995, -84.387982);
addMarker(Atlanta);
}
google.maps.event.addDomListener(window, 'load', initialize);
You appear to be missing the var keyword in front of the marker and Atlanta variables. To fix, I would also declare the map, marker and Atlanta variables outside of the initialize() function in the global space, so they are accessible to other functions. Try this:
var map;
var marker;
var Atlanta;
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var myLatlng = new google.maps.LatLng(33.748995, -84.387982);
var mapOptions = {
center: myLatlng,
zoom: 11,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(map_canvas, mapOptions);
TestMarker();
}
// Function for adding a marker to the page.
function addMarker(location) {
marker = new google.maps.Marker({
position: location,
map: map
});
}
// Testing the addMarker function
function TestMarker() {
Atlanta = new google.maps.LatLng(33.748995, -84.387982);
addMarker(Atlanta);
}
google.maps.event.addDomListener(window, 'load', initialize);