Develop Reference

How to add an additional marker to a google map containing markers

The code below is what I am trying to use in order to add markers to the maerkers var and then add an additional marker to the handler. The second handler.addMarker method just overwrites my first setting of the markers. How can I concatenate using the gmaps4rails gem?
markers = handler.addMarkers(<%=raw #hash.to_json %>);
markers = handler.addMarker({
lat: position.coords.latitude,
lng: position.coords.longitude
});

Using JavaScript you can add your multiple marker by creating new object for each one.
function initialize() {
var myLatlng_first = new google.maps.LatLng(-25.363882,131.044922);
var myLatlng_second = new google.maps.LatLng(-20.253256,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker_first = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
var marker_second = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
}
google.maps.event.addDomListener(window, 'load', initialize);

Cant get markers on google api

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);

google map not rendering under .collapse bootstrap

I have looked every where and am starting to go crazy. I know I am close, but can't get it.
I have my html:
<div id="glasgow-map" class="collapse">
<div class="map">
<div id="map-canvas" style="width:100%; height:350px;"></div>
</div>
</div><!--end collapse-->
my JS is:
function initialize() {
var myLatlng = new google.maps.LatLng(55.860949,-4.244938);
var mapOptions = {
zoom: 16,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Taylor Hopkinson Associates'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
$('#glasgow-map').on('shown.bs.collapse', function () {
google.maps.event.trigger(map, "resize");
map.setCenter(center);
})
From all the other info I have seen I know I need the (map, "resize) but I am getting this error in the console:
Uncaught ReferenceError: map is not defined
Any help would be fantastic. It's been a long day!!

Thanks for your Help #kamlesh, I think you are right, but this is the way I finally managed to get it to work, and also for multiple maps - if anyone needs help with that, it's below.
I stripped the google.maps.event.addDomListener(window, 'load', initialize); and added the initialize to the .collapse button for when it is clicked. This way there is no need for the resize.
function initialize() {
var myLatlng = new google.maps.LatLng(55.860949,-4.244938);
var myLatlng2 = new google.maps.LatLng(51.510142,-0.143314);
var myLatlng3 = new google.maps.LatLng(51.4004236,0.0172711);
var mapOptions = {
zoom: 16,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var mapOptions2 = {
zoom: 16,
center: myLatlng2,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var mapOptions3 = {
zoom: 16,
center: myLatlng3,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map-canvas1'), mapOptions);
var map2 = new google.maps.Map(document.getElementById('map-canvas2'), mapOptions2);
var map3 = new google.maps.Map(document.getElementById('map-canvas3'), mapOptions3);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Taylor Hopkinson Associates'
});
var marker2 = new google.maps.Marker({
position: myLatlng2,
map: map2,
title: 'Taylor Hopkinson Associates'
});
var marker3 = new google.maps.Marker({
position: myLatlng3,
map: map3,
title: 'Taylor Hopkinson Associates'
});
}
$('#glasgow-map').on('shown.bs.collapse', function (e) {
initialize();
})
$('#london-map').on('shown.bs.collapse', function (e) {
initialize();
})
$('#bromley-map').on('shown.bs.collapse', function (e) {
initialize();
})
Perhaps there is a way of streamlining this code, but it certainly works for me.

Adding Marker to Google Map

I'm creating a map using the Javascript API, and I'm having some trouble getting the markers to show up.
I've followed this tutorial to create the map, which works well:
https://developers.google.com/maps/tutorials/fundamentals/adding-a-google-map
I've then followed this tutorial to add the marker, but it's not loading:
https://developers.google.com/maps/documentation/javascript/examples/marker-simple
Here's my code now:
<script>
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(43.643296, -79.408475),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP }
var map = new google.maps.Map(map_canvas, map_options, marker);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!" });
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

This line
var map = new google.maps.Map(map_canvas, map_options, marker);
is wrong. mapconstructor has only two arguments. It should be
var map = new google.maps.Map(map_canvas, map_options);
And myLatlng is not defined. So, you can change your code to:
function initialize() {
myLatlng = new google.maps.LatLng(43.643296, -79.408475);
var map_canvas = document.getElementById('map');
var map_options = {
center: myLatlng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP }
var map = new google.maps.Map(map_canvas, map_options);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!" });
}

Use this url you will get your answer http://www.w3schools.com/googleAPI/google_maps_overlays.asp

Google maps api marker not showing

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);