I am implementing a Google Map on my webpage using JavaScript. Here my problem is map is coming with marker but it's background image is not showing at all. The screen shot is given below.
Here is my code:
<div id="dvMap" style="width:1000px; height:1000px;"></div>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
var markers = [{"lat":"20.295728","lng":"85.844990"},{"title":"shilparamam","lat":"20.295728","lng":"85.844990","description":"Mumbai formerly Bombay, is the capital city of the Indian state of Maharashtra."}];
window.onload = function () {
var mapOptions = {
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
var infoWindow = new google.maps.InfoWindow();
var lat_lng = new Array();
var latlngbounds = new google.maps.LatLngBounds();
for (i = 0; i < markers.length; i++) {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
lat_lng.push(myLatlng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title
});
latlngbounds.extend(marker.position);
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
});
})(marker, data);
}
map.setCenter(latlngbounds.getCenter());
map.fitBounds(latlngbounds);
}
</script>
Here I need the clear background image for the Google Map.
Why don't you use a simple iframe instead of such a long script? Below link provides you with simple steps to get an iframe code which you just need to embedd in your project or website using html div.
http://www.dummies.com/web-design-development/site-development/how-to-embed-a-google-map-with-iframe/
Related
I need to create info-window out of this code, I'm lacking of application logic and totally new to programming i use this open-source code
This code add users to the map along with their marker
function loadMarkers(data) {
for(key in data) {
var user = data[key];
xmartlabschat.addUser(user);
markers[key] = getMarker(user.lat, user.lng, user.name);
}
}
I tried to use the basic code for info-window
var infoWindow = new google.maps.InfoWindow(user.name);
markers[key].addListener('click', function(){
infoWindowMe.open(map,markers[key);
However this code turns all marker into same name with the user instead of different names since im clicking other users marker
Please Help
Here the screenshot I took
You can try this. Hope this helps.
var locations = [
['Location name', LAT, LON],
['...', ..., ...],
//...
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: new google.maps.LatLng(LAT, LON),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
var lat = locations[i][1];
var lng = locations[i][2];
marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: map,
}); // generates all the markers
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
zIndex: 1000;
infowindow.setContent(locations[i][0]); // replace locations[i][0] with which data you want to show
infowindow.open(map, marker);
}
})(marker, i)); // generates corresponding info-window
}
Why is it that only the first (one only) InfoWindow showing on Google Map? I want all of the pinned address show InfoWindow.
I already searched for answers like Only the first marker showing on google map , Google Maps API InfoWindow only showing the first location for all the markers and Google maps-api v3 InfoWindow automatically open on page load but still no luck.
here is my code.
$scope.initialise = function(){
$http.get('http://remoteapi.com/' + $scope.name)
.success(function(data)
{
var myLatlng = new google.maps.LatLng(8.4844173, 124.6526134);
var mapOptions = {
center: myLatlng,
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
for( var i in data ) {
var position = new google.maps.LatLng(data[i].lat, data[i].lon);
marker = new google.maps.Marker({
position: position,
map: map,
content: data[i].description
});
var infowindow = new google.maps.InfoWindow({
content: "<img style='max-width:50px;max-height50px;' src='images/"+data[i].image+"'>"
});
}
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
infowindow.open(map,marker);
});
};
google.maps.event.addDomListener(document.getElementById("map"), 'load', $scope.initialise());
I currently have a simple Google Map, using API v3, with a custom marker (PNG file) displayed on a web page:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(51.49757618329838, 0.23350238800048828);
var markerLatLng = new google.maps.LatLng(51.49757618329838, 0.23350238800048828);
var myOptions = {
zoom: 13,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var image = new google.maps.MarkerImage('/img/location/marker.png',
// This marker is 125 pixels wide by 109 pixels tall.
new google.maps.Size(125, 109),
// The origin for this image is 0,0 (left,top).
new google.maps.Point(0,0),
// The anchor for this image is towards the bottom left of the image (left,top).
new google.maps.Point(4, 105));
var CustomMarker = new google.maps.Marker({
position: markerLatLng,
map: map,
icon: image,
animation: google.maps.Animation.DROP
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
What I'd like to do is add a list of cities (not in a form <select> tag) below the map:
<ul>
<li>Leeds</li>
<li>York</li>
<li>Wakefield</li>
<li>Harrogate</li>
</ul>
When the user clicks on a city link, I'd like the Google Map to plot the driving route from my marker to the city and zoom out to fit the route.
When the user clicks on a different city afterwards, a new driving route should be plotted from my marker to the city clicked on.
I'm using jQuery on the page already, so perhaps it could be used for this?
I have no idea where to start I'm afraid! Any help or advice would be very much appreciated.
Thanks a lot.
You can use the directions service to get directions from a google.maps.LatLng (the position of your marker) to an address (the text of your <li> tags.
use JQuery to get the text of the <li>'s and pass that into the directions service (you need to give the unordered list an id to do that)
$("#citylist").on("click", "li", function () {
getDirections($(this).text());
});
HTML:
<ul id="citylist">
<li>Leeds</li>
<li>York</li>
<li>Wakefield</li>
<li>Harrogate</li>
</ul>
<div id="map_canvas"></div>
code:
var map = null;
var CustomMarker = null;
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
function initialize() {
$("#citylist").on("click", "li", function () {
getDirections($(this).text());
});
var myLatlng = new google.maps.LatLng(51.49757618329838, 0.23350238800048828);
var markerLatLng = new google.maps.LatLng(51.49757618329838, 0.23350238800048828);
var myOptions = {
zoom: 13,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
CustomMarker = new google.maps.Marker({
position: markerLatLng,
map: map,
icon: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
animation: google.maps.Animation.DROP
});
directionsDisplay.setMap(map);
}
function getDirections(destination) {
var start = CustomMarker.getPosition();
var dest = destination;
var request = {
origin: start,
destination: dest,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function (result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
working fiddle
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);
}
}
I have a Google map. I created some markers, but I can not hide these markers. I looked at this document. I have one function, but it failed.
function LoadMap () {
var markers = JSON.parse('<%=Stations() %>');
var mapOptions = {
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow();
map2 = new google.maps.Map(document.getElementById("map_canvas2"), mapOptions2);
for (i = 0; i < markers.length; i++) {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map2,
title:"Hello",
});
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
icon: InitIcon
});
}(marker, data);
}
}
You need to apply the setMap(null) to your Array of markers.
If your markers variable contains all your markers, you need to loop through each markers and delete each of them using
markers[i].setMap(null);
as shown on your sample
BTW, your code contains somme errors, like a missing ; after var data = markers[i]