What do display custom icon for google map Marker? - javascript

currentPosition = new google.maps.LatLng(location.coords.latitude, location.coords.longitude);
var mapOptions = {
center: currentPosition,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions)
var home_marker = new google.maps.Marker({
position: currentPosition,
map: map,
icon: "../images/02_button_add.png"
});
Above is my code for google map API and trying to display a custom icon on map.
However, when I delete the icon file from folder. The map still show my icon.
Anyone knows what happen?

If you need to display another icon from same folder, you just change file name and hard reload your browser.
If you wish to display default google marker then remove icon property of marker from your code and hard reload your browser

Related

how to update position of google marker

Hi all I need to update google markers position every 5sec
I have this javascript code for drawing a google markers when page loads.
I want to be able to change position of the markers every 5 sec.
Here is my code:
function initialize() {
var myOptions = {
zoom: 4,
center: new google.maps.LatLng(-25.363882, 131.044922),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'),
myOptions);
var image = new google.maps.MarkerImage("images/truck3.png",
new google.maps.Size(32.0, 37.0),
new google.maps.Point(0, 0),
new google.maps.Point(16.0, 18.0)
);
var shadow = new google.maps.MarkerImage("images/shadow-truck3.png",
new google.maps.Size(51.0, 37.0),
new google.maps.Point(0, 0),
new google.maps.Point(16.0, 18.0)
);
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
icon: image,
shadow: shadow,
title: 'Click to zoom'
});
google.maps.event.addDomListener(window, 'load', initialize);
One more thing how can I put multiple points when showing more then one marker.
I know this is probably trivial for you but I am totally new at this.
EDIT:
I am sorry but this google got me tottaly confused. So What I want to do is next. When page loads I want to retrieve and array of last positions and each of that positions will have their id so an php array would be like array[Lat][Lng][id], after that I would like to put and marker on each of that position and put it in the center of the screen. When user clicks on one marker it will automatically zoom and start putting the marker position in the center every second. And I need an id for that certain marker.
This is a similar question, it would be nice if some java guru can combine me those to to get what I need
LINK ON THE SIMILAR QUESTION
well you can get lot of support for your queries GOOGLE MAPS API V3 Documentation
there are functions like
setCenter(latlng) that changes center on run time and also the function setPosition(latlng:LatLng) to change the center of marker by this way you can change the position of your marker runtime. and for storing last locations you can use a database for it and update it as according to your requirement.
This google.maps.Marker method allows you to change the position of existing markers:
visit here setPosition(latlng:LatLng)
Create an array of the markers, loop through it updating their position.
Add this javascript function to your code ,
$(function () {
setTimeout(function () { $('#map_canvas').load(initialize); }, 50000);
})

Multiple instances of Google Maps on one page

I have a form that allows you to preview coordinates via a google map. The user can dynamically add multiple sets of coordinates to the form. The amount of coordinates are variable.
I loop through the variables with this code which I feel it has to do with loading multiple instances of google maps. The first map loads just fine, but the second map only loads one tile in the far left hand corner. IF I update the coordinates on the form, then all of the maps only show one tile in the far left hand corner.
while (tempClone != cloneCount) {
var lat_lng = new google.maps.LatLng(lat, lng);
options = {
zoom: 14,
center: lat_lng,
panControl: false,
zoomControl: false,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map[tempClone] = new google.maps.Map(document.getElementById("map"+tempClone), options);
var infowindow = new google.maps.InfoWindow({
content: inputBL[tempClone][0][1] + 'Entrance'
});
marker[tempClone] = new google.maps.Marker({
position: lat_lng,
map: map[tempClone],
title: inputBL[tempClone][0][1]
});
}
Thank you for any help!
Aaron
It almost looks like you're having trouble getting the map to resize. From what I recall this happens if the map container size changes. Can you try triggering a resize after showing the map?
google.maps.event.trigger(map, "resize");

google maps V3 duplicate marker, only in IE7,8 IE 9 is fine

You can see the duplicated marker in the included image, the marker to the right is the correct marker, the one to the left is a clone of the other one, it is not in the right place it can not be clicked, and stays in the same position relative to the "real" marker reqardless of zoom level.
Here is the code that generates the marker:
var map = new google.maps.Map($(this.jobDiv).find(".map_canvas")[0], { 'zoom': 10, 'center': this.latlng, 'mapTypeId': google.maps.MapTypeId.ROADMAP, 'mapTypeControl': false, 'navigationControl': true, 'streetViewControl': false });
var marker = new google.maps.Marker({
map: map,
position: this.latlng,
title: this.markerLabel
});
Turns out this was a CSS issue, I set {overflow:hidden!important;}, on the div containing the google map, turns out I needed {overflow:hidden;}, and now its fine. I'm not sure how that caused the problem but it is fixed now.

Showing a specific location in gMAP

i want to show a map in a floating DIV. The thing i want to do is that i want to a specific location with it is first visible. for example: when it is visible i wnat to show banglore city. by default it show some of cities of USA i guess. Is it possible to do so....????
Yes, absolutely. You just have to set the map's center to the Lat Lng where you wish to initially show. For instance:
html (your DIV):
<div id='map_canvas'></div>
google map api v3 JavaScript run when onload:
var initCenter = new google.maps.LatLng(12.970214, 77.56029); //city of bangalor 12.970214, 77.56029
//create the google map and grabing the DIV
var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 10,
center: initCenter, //setting the city of bangalor as center point of your map
mapTypeId: google.maps.MapTypeId.ROADMAP
});
Here is the jsfiddle demo.

Google Map APi zoom bar not showing

Google map api is not showing zoom bar and imagetype completely instead it is just displaying plus minus buttons for zoom in and out and drop down for selecting map type.
Url is http://booking.smanager.net/design/index.php?lv=2 please see tab "Location". I m using firefox 3.6.10. What might be the reason?
var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
<div id="map_canvas"></div>
Also I want to insert placemarker at several lat/long pairs. I got title and description of several locations which I want to be displayed inside a placemarker. Can anyone tell how to do that?
This usually happens when the map that contains the div isn't sized properly.. whilst you've indicated that you're using V3 api its still something to consider.. some info here:
http://econym.org.uk/gmap/basic19.htm
Duncan

Categories

Resources