I have the following javascript code in rails 3.2.
function initialize() {
var myLatLng = new google.maps.LatLng(34.553366482, 49.783977595);
var mapOptions = {
zoom: 12,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var flightPlanCoordinates = [
new google.maps.LatLng(34.553366482, 49.783977595),
new google.maps.LatLng(34.554122088, 49.783895487),
new google.maps.LatLng(34.554483305, 49.783853715),
new google.maps.LatLng(34.555332372, 49.783720553),
new google.maps.LatLng(34.556189752, 49.783658072),
new google.maps.LatLng(34.556664709, 49.783605137),
new google.maps.LatLng(34.556769403, 49.783602219),
new google.maps.LatLng(34.556787772, 49.783469404),
new google.maps.LatLng(34.556793727, 49.783317126),
new google.maps.LatLng(34.555050604, 49.783479752),
new google.maps.LatLng(34.554290633, 49.783555281),
new google.maps.LatLng(34.55376046, 49.783620191),
new google.maps.LatLng(34.553413552, 49.783659434),
new google.maps.LatLng(34.553275583, 49.783705246),
new google.maps.LatLng(34.553366482, 49.783977595),
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
</script>
this is a way o show points on the google maps. I wanna get the points from database and send to javascript. how can i do that in a loop?
You could create a javascript variable(json to be more specific) in one of your rails views so that it is available to your script above.
In controller/model:
#coordinates = Coordinates(..your query...).get_json
In your view where these points are going to show, depending or whether you use erb or haml, do:
Haml:
:javascript
var coords = "#{#coordinates.to_json}"
Erb:
<script type="text/javascript">
var coords = "<%= escape_javascript(#coordinates.to_json)%>"
</script>
Now you can iterate over the coords json in your flightPlanCoordinates above and make the markers.
Related
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);
I created a google maps polyline
var flightPlanCoordinates = [new google.maps.LatLng(-27.46758, 153.027892), new google.maps.LatLng(37.772323, -122.214897), new google.maps.LatLng(29.46758, 88.027892), new google.maps.LatLng(20.46758, 97.027892), new google.maps.LatLng(17.772323, 78.214897)];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: "rgba(255,0,0, .5)",
strokeOpacity: 1.0,
strokeWeight: 4
});
and I created an event (click for example) which displays a box with information. Sample code:
google.maps.event.addListener(flightPath, 'click', function(el) {
var curLat = el.latLng.lat();
var curLng = el.latLng.lng();
var myLatlng = new google.maps.LatLng(curLat,curLng);
infowindow.content = "<div style= ' width: 200px'>STRING HERE<div>";
infowindow.setPosition(myLatlng);
infowindow.open(map);
});
I've defined the infowindow globally so I can re-position it.
The problem now is that wherever I click it always displays the same information. Basically what I want to do is to get the line number clicked (starting form 0, 1 ..) and I can use it to get the appropriate data.
This information is not available via the API.
It would be possible to use the geometryy-library(isLocationOnEdge) and iterate over the single lines to detect on which line the click occurs, but I think it's easier to use single Polylines for each segment:
var flightPlanCoordinates = [
new google.maps.LatLng(-27.46758, 153.027892),
new google.maps.LatLng(37.772323, -122.214897),
new google.maps.LatLng(29.46758, 88.027892),
new google.maps.LatLng(20.46758, 97.027892),
new google.maps.LatLng(17.772323, 78.214897)
],i=0,infowindow=new google.maps.InfoWindow;
while(flightPlanCoordinates.length>1){
(function(i){
var segment= new google.maps.Polyline({
path: [flightPlanCoordinates.shift(),flightPlanCoordinates[0]],
strokeColor: "rgba(255,0,0, .5)",
strokeOpacity: 1.0,
strokeWeight: 4,
map:map
});
google.maps.event.addListener(segment, 'click', function(e){
infowindow.setOptions({map:map,position:e.latLng,content:'Line#'+i});
});
})(i++)
}
Trying to create a PhoneGap mobile app. Totally new to mobile apps, phonegap, and JS so bear with me. This is where I'm at:
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(40.710,-73.994), //New york, NY
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions)
};
With that, the map renders in the browser just fine. When adding the following that I've found in a number of tutorials it refuses to render anything. I am trying to do all of this in the googlemap/index.html page that I have created.
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(40.710,-73.994), //New york, NY
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var LatLng = new google.maps.LatLng(40.710,-73.994)
var marker = new.google.maps.Marker({
position: myLatLng,
title: "hello world!"
});
marker.setMap(map);
};
When I add the following, the entire page refuses to render.
Basically, I'm using the above method to display a google map, and I'm trying to add a pin to the center location. Seems simple enough but proving to be beyond my abilities.
You have a syntax error on this line:
var marker = new.google.maps.Marker({
Notice that there is a dot between the new operator and the class name.
To fix, replace the line above with:
var marker = new google.maps.Marker({
Happy mapping!
PS: The error was reported in the (desktop) browser's console, I'm not sure how you'd see the same on an Android device.
i tried to built up a little Google Maps api in PHP which fetches Circles and Infowindows from a Database.
Anything works besides closing an InfoWindow after opening it.
The Chrome Developer console throws out the following errors:
GET http://maps.googleapis.com/maps/api/js/StaticMapService.GetMapImage?1m2&1i151368577549307460&2i99567197161272770&2e2&3u50&4m2&1u512&2u496&5m3&1e2&2b1&5sde-DE&token=119415 404 (Not Found) main.js:33 <- Onload
And on clicking on the Red popup it shows the following error:
Uncaught TypeError: Object # has no method 'O'
Tried to figure out a solution for hours now, hope you can help me!
Thank you!
<script type='text/javascript'>
var _infoWindow = new Array();var _marker = new Array();
function initialize() {
var mapOptions = {
zoom: 50,
center: new google.maps.LatLng(48.52039, 9.05949),
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
var circles = [{"color":"fff","center":new google.maps.LatLng(48.5204, 9.05949),"radius":200}];
for(var circle in circles) {
new google.maps.Circle({
strokeColor: circles[circle].color,
strokeOpacity: 1,
strokeWeight: 2,
fillColor: circles[circle].color,
fillOpacity: 0.35,
map: map,
center: circles[circle].center,
radius: circles[circle].radius
});
}
var infoWindows = [{"center":new google.maps.LatLng(48.5204, 9.05949),"content":"<h2>Juhu!<\/h2>Html<br>Content <b>erlaubt<\/b>!"}];
var i = 0;
for(var infoWindow in infoWindows) {
_infoWindow[i] = new google.maps.InfoWindow({
content: infoWindows[infoWindow].content
});
_marker[i] = new google.maps.Marker({
position: infoWindows[infoWindow].center,
map: map,
title:'Test'
});
google.maps.event.addListener(_marker[i], 'click', new Function('_infoWindow['+i+'].open(map,_marker['+i+']);'));
i++;
}
}
window.onload = function(){
initialize();
}
</script>
</head>
<body>
<div id='map' style='height:500px;width:500px;'></div>
</body>
You are defining the map-variable inside a local scope(initialize), it will not be accessible inside the click-handler.
Add this to the top of the scripts:
var map;
And remove the var-keyword from this line:
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
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
});