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

how to load vb.net variable to javascript

I'm trying to add google maps to my website, but instead of fixing a latitude and longitude for the location, I would like to be able to load the values from database. How do I get a variable from vb.net and pass it to javascript? I've tried:
<% Response.Write("<script>
function initialize() {
var myLatlng = new google.maps.LatLng(1.123456, 1.123456);
var mapOptions = {
zoom: 16,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'KH Automotive Location'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>")%>
and
new google.maps.LatLng(<%=latitude%>, <%=longitude%>);
Please help. Thanks

Sometimes, when I need to make absolutely sure (like with translated/localized strings) that the content comes across, I'll write it out to a hidden DIV somewhere on the page (or a hidden INPUT).
<div style='display:none' id='my_data'>stuffstuffstuff</div>
Then I just read the contents of the DIV (or INPUT, whatever I used). Slap a "runat=server" in it, and be able to write to it from your code-behind.

Should be able to write it in:
<% Response.Write("..
..
var myLatlng = new google.maps.LatLng(" & latitude & ", " & longitude & ");
..
")%>

Different marker for each location in Google Maps JavaScript API v3

Noob here, trying to do something simple-yet-complicated. On this page I have succeeded in placing a red 52 of a certain size where I want it. I have done this by making my own changes to a no doubt familiar-looking code sample from the Google Developers site:
function initialize() {
var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(-38.153470, 145.141425)
}
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var image = 'http://pollbludger.0catch.com/numbers/alp-52-07.png';
var myLatLng = new google.maps.LatLng(-38.148594, 145.126124);
var beachMarker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image
});
}
google.maps.event.addDomListener(window, 'load', initialize);
What I want to do now is add nine other markers at different points on the map, each different in some way from all the others. Like my red 52, each marker I propose to use has its own PNG stored at pollbludger.0catch.com. Can I just do this by coding each marker sequentially, rather than have it go through a loop?

You need use the property "icon" with "url" property and change the new coordinates in "position". use icons with the size of 32x32.
If you do not know how to get the positions use this example and copy the values lat,lng
var beachMarker = new google.maps.Marker({
position: myLatLng,
map: map,
icon : {
url: 'img/yourimageurl.png',//full path of your image
scaledSize: new google.maps.Size(30,40)//this control the size of your icon
}
});

How to manually reload Google Map with JavaScript

I am using this piece of code within a Bootstrap template. I am facing issues when loading images within a Bootstrap Tab content pane.
This is the JavaScript code which I use to initialize the Map:
var latlng = new google.maps.LatLng(50, 50);
var myOptions = {
zoom: _zoom,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
};
var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: 'Google Office!'
});
I have not found any method(s) on the internet to manually reload a Google Map instance.
Is this possible and how? Thanks!

Yes, you can 'refresh' a Google Map like this:
google.maps.event.trigger(map, 'resize');
This basically sends a signal to your map to redraw it.

You can refresh with this:
map.panBy(0, 0);

map.setZoom(map.getZoom());
For some reasons, resize trigger did not work for me, and this one worked.

Changing Google Maps V3 Maker Icon the correct way?

The code in example 1 works. I would like to understand the marker.setIcon(); function more (new to JavaScript also).
My question is. In the documentation for Google maps you see something like this for changing the marker.
MarkerImage(url:string, size?:Size, origin?:Point, anchor?:Point, scaledSize?:Size)
How does this relate to what I have done in example 1 for setting up marker Icon, shoud I have done somethign like this instead?
marker = google.maps.MarkerImage({
url: "newIcon.png"
});
marker.setIcon(marker);
and would that have worked?
here is my example
Example 1
function initialize(){
//MAP
var latlng = new google.maps.LatLng('xxx','xxx');
var options = {
zoom: 16,
center: latlng,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
map = new google.maps.Map(document.getElementById("map_canvas"), options);
//GEOCODER
geocoder = new google.maps.Geocoder();
marker = new google.maps.Marker({
map: map,
draggable: true
});
marker.setPosition(latlng);
marker.setIcon("newIcon.png");
map.setCenter(latlng);
}

You're giving a V2 answer for a V3 question.
There is no GIcon in V3.
var image = new google.maps.MarkerImage("newIcon.png");
Can be used inside your marker as the icon.
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat,lng),
icon:image
});