I've a problem with my code. I can get the lat and lng to load from the xml file and display it on google maps, but it only displays the first record (there are 4 in total).
I'm 100% confident the xml is fine, I just can't figure out how to display all the markers on googles map.
Any help would be great!
function initialize() {
var myLatlng = new google.maps.LatLng(53.956086, -9.140625);
var myOptions = {
zoom: 13,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
jQuery.get("markers.xml", {}, function(data) {
jQuery(data).find("marker").each(function() {
var marker = jQuery(this);
var Lat = $(this).find('lat').text();
var Lng = $(this).find('lng').text();
var latlng = new google.maps.LatLng(parseFloat(sLat), parseFloat(Lng));
var marker = new google.maps.Marker({position: latlng, map: map});
});
});
}
Any logs/errors with tools like firebug?
looks good from what I can tell (2 problems: you initialize marker 2 times and sLat is not defined).
Are you sure it's looping each 4 times and not only once?
Had you debugged that?
Related
I have a small app that retrieves data from a database and displays information. It is all vehicle information and two of the fields are Latitude and Longitude.
I am trying to get a map to show up when the user clicks "Details" but I cannot figure out how to get the model data into the function so that it shows.
What I have tried.
//Setting a hidden input equal to the value
<input type='hidden' id='test-lat' value='#Html.Display(model => model.Lat)' />
//Then starting the script
<script>
var a = $('#test-lat').val();
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: a, lng: 41},
zoom: 8
});
}
</script>
This just gives me a gray box
No need to use hidden-control, you can directly implement model value as parameters.
<script>
$(document).ready(function () {
initialize();
});
function initialize() {
var mapOptions = {
center: new google.maps.LatLng('#Model.Lat', '#Model.Lng'),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
// create a marker
var latlng = new google.maps.LatLng('#Model.Lat', '#Model.Lng');
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: 'Vehicle Place'
});
}
</script>
Does anyone know if its possible to center a embedded map on an actual placeholder? I mean so that that when the map loads and is centered you can actually see the landmark and the marker in the the map?
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(51.515727, -0.141388),
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options)
}
This is my initialise function that inputs the coordinates of the shop I want to have directions to. However there is not placeholder (pin marker) over the shop. Am I able to do that?
Thanks!
You need to explicitly specify the marker and set its position. Following your example...
var map_canvas = document.getElementById('map_canvas');
var position = new google.maps.LatLng(51.515727, -0.141388);
var mapOptions = {
zoom: 16,
center: position,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(map_canvas, map_options);
You have to then create the marker object...
var marker = new google.maps.Marker({
position: position,
map: map,
title: "ANYTHING YOU WANT"
});
That's all you need to do really, but notice that you can always change the center of the map at anytime...
map.setCenter(position);
For more info visit the Developer's Site API Reference
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(51.515727, -0.141388),
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options);
var point = new google.maps.LatLng(51.515727, -0.141388);
var marker = new google.maps.Marker({
position:point,
map: map,
});
}
We have a Google map on our website. We want to update latitude and longitude every 5 seconds (Call from MySQL) and change the marker place on the map, while the MAP or page don't reload with it.
Our JAVASCRIPT code is:
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
// To add the marker to the map, use the 'map' property
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});
You have to use an AJAX call to a backend script that will return something like a JSON string with new marker data.
jQuery code:
setInterval(function () {
$.post('your-file.php', { }, function (r) {
var result = eval('(' + r + ')');
var newLatLng = new google.maps.LatLng(result.latitude, result.longitude);
marker.setMap(null);
/* Recreate the marker here or update coordinates from result.latitude and result.longitude */
});
}, 5000);
And this is your-file.php:
/* MySQL Query here */
echo json_encode('latitude' => $latitude, 'longitude' => $longitude);
Using marker.setMap(null) you can remove the marker from your map and then create it again with the correct coordinates otherwise just use marker.setPosition(newLatLng);
I am trying to write a geo location webpage which displays the user's approximate location on a map. If they click on the marker they can drag it to their exact location.
I have this code to do the displaying of the map and dragging of the marker:
function initialize() {
navigator.geolocation.getCurrentPosition;
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 2,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
draggable:true
});
google.maps.event.addListener(
marker,
'drag',
function() {
document.getElementById('lat').value = marker.position.lat();
document.getElementById('lng').value = marker.position.lng();
}
);
}
My question is how do I set the initial latitude and longitude in the above using the html5 geo location:
navigator.geolocation.getCurrentPosition;
Thanks
Andrew
Declare two variables for both the latitude and the Longitude as such:
position.coords.latitude = 35.8624596;
position.coords.longitude = -86.4081241;
then another variable for both the lat and long such as:
var latlon=lat+","+lon;
and then use latlon like this:
var img_url="http://maps.googleapis.com/maps/api/staticmap?center="+latlon+"&zoom=14&size=400x300&sensor=false";
How to show marker? if it already exists in Google map. Link with marker http://maps.google.com/maps?&z=10&q=36.26577+-92.54324&ll=36.26577+-92.54324
and my function for initialization
function initialize() {
var latlng = new google.maps.LatLng(36.26577, -92.54324);
var myOptions = {
zoom: 16,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
var yourMarker = new google.maps.Marker({
'position': some_where.latLng,
'map': map,
'title': 'set map in option'
});
or
var yourMarker = new google.maps.Marker({
'position': some_where.latLng,
'title': 'set map later'
});
yourMarker.setMap(map)
Perhaps, what you seek can be done with the Places Api
http://code.google.com/apis/maps/documentation/places/
There are, however, some limitations on the number of requests per hour, per user.
In short: you search a particular LatLng point for nearby places. Then you receive a json (or xml) list of places, wich in turn can be transformed (by you) into markers on your map.