Develop Reference

Multiple Google maps, one map not Loading

I am implementing a system in MVC 5 whereby a user can pick their coordinates from a google map and save them, the coordinates are stored to a database and then a separate page in the application retrieves the coordinates and displays the map with that Marker displayed.
My Problem is that while one map is functioning the other will not show up on a separate page.
Here is my Javascript Code:
$(document).ready(function () {
initialize();
});
function initialize() {
var latlng = new google.maps.LatLng('#ViewBag.Latitude', '#ViewBag.Longitude');
var myLatLng2 = new google.maps.LatLng(53.88484, -9.28484);
var mapOptions = {
center: latlng,
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var mapOptions2 = {
zoom: 5,
center: myLatLng2,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var map2 = new google.maps.Map(document.getElementById("map_canvas1"), mapOptions2);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: '#ViewBag.data'
});
var marker2 = new google.maps.Marker({
map: map2,
position: myLatLng2,
draggable: true
});
new google.maps.event.addListener(marker2, 'drag', function () {
var pos = marker2.getPosition();
$("#Lat").val(pos.lat());
$("#Lon").val(pos.lng());
});
}
and in my First View
<div id="map_canvas" style="float:left; width: 600px; height: 250px; margin-top:15px; margin-bottom:20px; margin-left:30px;">
and the Other View
<div id="map_canvas1" style="float:left; width: 600px; height: 250px; margin-top:15px; margin-bottom:20px; margin-left:30px;">
I can make "map2" work by commenting out the line
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
and vice versa but they will not seem to run along side each other,
only the first var map or var map2 that is declared seems to run when both remain uncommented,
Any help would be greatly appreciated,
Thanks.

This is because
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
Is most likely erring out. map_canvas doesn't exist, so the next line is never reached. If you comment it out, then the second view works as expected.
When calling document.getElementById(), make sure the element exists FIRST before creating a map.
BTW: That also means that map_canvas1 does't exist on your first view either, so be careful there as well.
Try this:
var map_canvas = document.getElementById("map_canvas");
if (map_canvas)
var map = new google.maps.Map(map_canvas, mapOptions);
var map_canvas1 = document.getElementById("map_canvas1");
if (map_canvas1)
var map2 = new google.maps.Map(map_canvas1, mapOptions2);

google maps marker is not defined

This is my code
var map_canvas = document.getElementById('map_canvas');
var map_options = { center: new google.maps.LatLng(44.5403, -78.5463), zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP }
map = new google.maps.Map(map_canvas, map_options);
google.maps.event.addListener(map, 'click', function(event) {
if(marker){
marker.setMap(null);
}
marker = new google.maps.Marker({
position: event.latLng,
map: map
});
$("#latitude").val(event.latLng.lat());
$("#longitude").val(event.latLng.lng());
map.setCenter(event.latlng);
});
console.log($("#longitude").val());
if (($("#latitude").val()) && ($("#longitude").val())){
var point = new google.maps.LatLng(($("#latitude").val()), ($("#longitude").val()));
marker = new google.maps.marker({
position: point,
map: map
});
map.setCenter(point, 8);
}
please notice that I have added a listener for on click on the map to add the marker, and it is working. I mean when I click on the map, the marker appears.
However, when I submit the page, and if there is an error in the inputs, I return the page back to the user. In that case, if the use has added a map, I wanted to create the map for him. that is why I used this code:
console.log($("#longitude").val());
if (($("#latitude").val()) && ($("#longitude").val())){
var point = new google.maps.LatLng(($("#latitude").val()), ($("#longitude").val()));
marker = new google.maps.marker({
position: point,
map: map
});
map.setCenter(point, 8);
however, i got exception Uncaught TypeError: undefined is not a function in the line marker = new google.maps.marker({ could you help please?

Make sure you use the right capitalization for Google Maps API function names, google.maps.marker should be google.maps.Marker.

I can't get the marker in Google Maps to show

This is my first time trying to embed google maps into a webpage.
I've followed instructions from the API site, and I've Googled other maps, but what I'm seeing doesn't seem to help.
Here's what I've got.
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
// Enable the visual refresh
google.maps.visualRefresh = true;
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(51.54968,-0.16305),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

Your code doesn't create a marker. You should add something like
var marker = new google.maps.Marker({
position: new google.maps.LatLng(51.54968,-0.16305),
map: map,
title: "One title"
});

Markers do not show up on my Google Maps

I cannot get markers to show up on my google map, here is my code below, what do I need to fix? Thanks.
<script>
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(37.661932, -94.306856),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options)
var myMarker = new google.maps.Marker({
position: LatLng(37.661932, -94.306856),
title: "About.com Headquarters"
});
var latlng2 = new google.maps.LatLng(37.661932, -94.306856);
var myMarker2 = new google.maps.Marker({
position: latlng2,
map: map,
title: "Apple Computer"
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

There are two problems with your first marker "myMarker". You are not specifying a map, and you are not instantiating the "LatLng" object, as you should be doing. Changing the first marker like this should fix the issue:
var myMarker = new google.maps.Marker({
position: new google.maps.LatLng(37.661932, -94.306856),
map: map,
title: "About.com Headquarters"
});
The second marker looks fine. The first marker is probably throwing an error, which is causing the second marker not to show up as well.

How to add a action for addDOMListener of Google Maps?

I just want to load the Google Maps based on the Mouseover event of different div element. For doing this I just used the following simple code. This code itself not working, can someone tell me what mistake I have made?
<script type="text/javascript">
function initialize() {
var mapDiv = document.getElementById('map-canvas');
var map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(40.740, -74.18),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var content = '<strong>A info window!</strong><br/>That is bound to a marker';
var infowindow = new google.maps.InfoWindow({
content: content
});
var marker = new google.maps.Marker({
map: map,
position: map.getCenter(),
draggable: true
});
infowindow.open(map, marker);
}
google.maps.event.addDomListener($("#showmap"), 'mouseover', function(){ alert("Hi");});
</script>
<div id='showmap'>
Show Map
</div>
<div id="map-canvas" style="width: 500px; height: 400px"></div>
Above simple alert function itself not called for this simple code.

The selector returns the jQuery object and the needed element can be accessed directly from the element array with a [0] . Also, make it "addDomListenerOnce", only need to initialize once.
$("#showmap")[0]
see a demo
google.maps.event.addDomListenerOnce($("#showmap")[0], 'mouseover',
function(){ initialize(); });

I just tried using this and this also worked.
Java Script Code:
function initialize(lat,longit,content) {
var mapDiv = document.getElementById('map-canvas');
var map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(lat, longit),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow({
content: content
});
var marker = new google.maps.Marker({
map: map,
position: map.getCenter(),
draggable: false
});
infowindow.open(map, marker);
}
Html Code:
<div id='showmap' onclick="initialize(1.37422,103.945,'<h2>Tampines</h2>')">
Show Map
</div>
I just tried using an idea from java, can we try a method call from the onclick and check whether it is working and to my surprise it worked.