Develop Reference

How can I use JavaScript in Razor for google maps API

I am trying to use a 'foreach' loop to place a series of markers on the map using coordinates from a database. The retrieval of the data is not an issue so for now I'm not bothered about the map showing the correct locations. The issue is that when inside the 'foreach' loop, any code for the marker placement is immediately passed over. Any ideas?
Here is the current code:
<script>
function myMap() {
var lat = 52.4283381;
var lng = -1.601519;
var myLatLng = { lat: 52.428381, lng: -1.601519 };
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: new google.maps.LatLng(lat, lng)
});
}
</script>
<script>
#foreach (var mapVars in ViewData.Model)
{
<text>
var marker = new google.maps.Marker
({
position: new google.maps.LatLng (52.428381 , -1.601519),
map: map,
title: "" + i,
});
</text>
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBfvqLwEOTU3oFoiJOmmloYJFYUA801lF8&callback=myMap"></script>

Try serialize your ViewData.Model to a javascript object and than loop from there.
Something like this:
<script>
function myMap() {
var lat = 52.4283381;
var lng = -1.601519;
var myLatLng = { lat: 52.428381, lng: -1.601519 };
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: new google.maps.LatLng(lat, lng)
});
}
</script>
<script>
window.data = #(Html.Raw(js.Serialize(ViewData.Model)));
var markers = [];
for(i = 0; i < window.data.length; i++)
{
markers.push(new google.maps.Marker
({
position: new google.maps.LatLng (52.428381 , -1.601519),
map: map,
title: "" + i,
}));
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBfvqLwEOTU3oFoiJOmmloYJFYUA801lF8&callback=myMap"></script>

Google API multiple markers (addresses NOT latlong) displaying title (tool tip)

I'm trying to use the script made by user netbrain as found here on stackoverflow to also show the address title when the user clicks on the marker. It should be relatively simple but I'm lost.
Any ideas? I've tried numerous options but nothing seems to work. netbrain's code below:
var map;
var elevator;
var myOptions = {
zoom: 4,
center: new google.maps.LatLng(0, 0),
mapTypeId: 'roadmap'
};
map = new google.maps.Map($('#map_canvas')[0], myOptions);
var addresses = ['Norway', 'Africa', 'Asia','North America','South America'];
for (var x = 0; x < addresses.length; x++) {
$.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+addresses[x]+'&sensor=true', null, function (data) {
var p = data.results[0].geometry.location
var latlng = new google.maps.LatLng(p.lat, p.lng);
new google.maps.Marker({
position: latlng,
map: map
title: addresses[0]
});
});
}

This answer assumes you're only after tool tip and not the infowindow.
The variables addresses and x cannot be used within the callback as the value of x will always be 5 (in this example, see length of addresses array). Instead look at the data object like so:
var map;
var elevator;
var myOptions = {
zoom: 4,
center: new google.maps.LatLng(0, 0),
mapTypeId: 'roadmap'
};
map = new google.maps.Map($('#map_canvas')[0], myOptions);
var addresses = ['Norway', 'Africa', 'Asia','North America','South America'];
for (var x = 0; x < addresses.length; x++) {
$.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+addresses[x]+'&sensor=true', null, function (data) {
var p = data.results[0].geometry.location
var latlng = new google.maps.LatLng(p.lat, p.lng);
new google.maps.Marker({
position: latlng,
map: map
title: data.results[0].formatted_address
});
});
}
EDIT
For completeness the data object is the result of the geocoding API call. The formatted_address is a property of a match within the results, see https://developers.google.com/maps/documentation/geocoding/#GeocodingResponses

Use this code:
$(document).ready(function () {
var map;
var elevator;
var myOptions = {
zoom: 1,
center: new google.maps.LatLng(0, 0),
mapTypeId: 'terrain'
};
map = new google.maps.Map($('#map_canvas')[0], myOptions);
var addresses = ['Norway', 'Africa', 'Asia','North America','South America'];
for (var x = 0; x < addresses.length; x++) {
$.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+addresses[x]+'&sensor=false', null, function (data) {
var p = data.results[0].geometry.location
var latlng = new google.maps.LatLng(p.lat, p.lng);
var marker = new google.maps.Marker({
position: latlng,
map: map
});
google.maps.event.addListener(marker, 'click', function(evt) {
var info_window = new google.maps.InfoWindow({maxWidth: 500});
info_window.setContent('Content here');
info_window.setPosition(latlng);
info_window.open(map, marker);
});
});
}
});

Laravel and google maps : foreach latitude/longitude show marker or map

I have a table locations with a latitude and longitude field.
For each location I want a new map (or better a new marker) that uses the latitude and longitude from the table locations to display a city on the map.
index action of controller :
public function index()
{
$locations = Location::all();
$locations->location_latitude = Input::get('location_latitude');
$locations->location_longitude = Input::get('location_longitude');
return View::make('forecasts.index')
->with('locations', $locations);
}
google map with marker :
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var location = new google.maps.LatLng({{ $location->location_latitude }}, {{ $location->location_longitude }});
var map_options = {
center: location,
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options)
var marker = new google.maps.Marker({
position: location,
map: map,
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
When I do this it only displays the city from the last inserted latitude/longitude :
#foreach($locations as $location)
var location = new google.maps.LatLng({{ $location->location_latitude }}, {{ $location->location_longitude }});
#endforeach

It is probably because while looping through the collection you are not actually creating separate marker.
function initialize() {
var map_canvas = document.getElementById('map_canvas');
// Initialise the map
var map_options = {
center: location,
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options)
// Put all locations into array
var locations = [
#foreach ($locations as $location)
[ {{ $location->location_latitude }}, {{ $location->location_longitude }} ]
#endforeach
];
for (i = 0; i < locations.length; i++) {
var location = new google.maps.LatLng(locations[i][0], locations[i][1]);
var marker = new google.maps.Marker({
position: location,
map: map,
});
}
// marker.setMap(map); // Probably not necessary since you set the map above
}

Google Maps adding multiple markers using javascript

So this set of code is pulling in locations (Latitude, Longitude, and Address) from a C# backend.
the backend code pulls data from a SQL database and inputs it into the ASP.Net DataField columns.
It was an enhancement to a prebuilt application to include Google Maps.
The locations pull just fine and stepping through it shows the latitude and longitude correctly.
The issue I'm having is that only one marker shows up which looks to be the last one.
Its as if each location isn't actually adding a new marker, but overwriting the current one which leaves the last location as the marker on the map.
What do I need to change to get each location to show up as a new marker?
<script type="text/javascript">
function locate() {
var inputList = GridView1.getElementsByTagName("td");
var rows = GridView1.getElementsByTagName("tr");
// var markers = inputList[0].innerHTML;
for (i = 1; i < rows.length; i++) {
var lat = rows[i].cells[2].innerHTML;
var lng = rows[i].cells[3].innerHTML;
var addr = rows[i].cells[1].innerHTML;
var mapOptions = {
center: new google.maps.LatLng(rows[1].cells[2].innerHTML, rows[1].cells[3].innerHTML),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var markers = [];
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
var data = rows[i]
var myLatlng = new google.maps.LatLng(data.cells[2].innerHTML, data.cells[3].innerHTML);
var marker = new google.maps.Marker({
position: myLatlng,
map: map
});
markers.push(marker);
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(data.cells[1].innerHTML);
infoWindow.open(map, marker);
});
})(marker, data);
}
}
</script>
<div id="dvMap" style="width: 500px; height: 500px">
</div>
</form>
</body>
</html>

You're creating the map and the marker within the same loop. i.e. you're creating a map with a single marker on it, rows times. You want to create the map outside of your loop. Something like this:
function locate() {
var rows = GridView1.getElementsByTagName("tr");
var mapOptions = {
center: new google.maps.LatLng(rows[1].cells[2].innerHTML, rows[1].cells[3].innerHTML),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
for (i = 1; i < rows.length; i++) {
var data = rows[i];
var myLatlng = new google.maps.LatLng(data.cells[2].innerHTML, data.cells[3].innerHTML);
var marker = new google.maps.Marker({
position: myLatlng,
map: map
});
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(data.cells[1].innerHTML);
infoWindow.open(map, marker);
});
})(marker, data);
}
}

How to pass multiple value to google map V3?

How to plot more number of markers in google map
<script type="text/javascript">
// When map page opens get location and display map
$('.page-map').live("pagecreate", function() {
var latt=[13.0423734,12.918907];
var lang=[80.2727993,80.145264];
for(i=0; i<latt.length;i++)
{
initialize(latt[i],lang[i]);
}
});
function initialize(lat,lng)
{
var latlng = new google.maps.LatLng(lat,lng);
var myOptions = {
zoom: 5,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"Hello World!"
});
}
</script>

Use arrays.
// When map page opens get location and display map
$('.page-map').live("pagecreate", function() {
var latt=[13.0423734,12.918907];
var lang=[80.2727993,80.145264];
initialize(latt, lang);
});
function initialize(lat_arr,lng_arr)
{
// Assuming first array element is where you want the map centered
var latlng = new google.maps.LatLng(lat_arr[0],lng_arr[0]);
var myOptions = {
zoom: 5,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var markers = [];
// start i at 0 if you want a marker at the center as well
for(var i = 1; i < lat_arr.length; i++) {
latlng = new google.maps.LatLng(lat_arr[i], lng_arr[i]);
markers[i] = new google.maps.Marker({
position: latlng,
map: map,
title:"Hello World!"
});
}
}