My setup currently I have a custom map marker for multiple points on my map, but I want to add different map markers for different markers on the map dependant on their type attribute. My current setup as follows:
HTML
<div class="marker" data-lat="LATITUDE_GOES_HERE" data-lng="LONGITUTE_GOES_HERE" type="library">
jQuery (just the marker function)
function add_marker( $marker, map ) {
// var
var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
// create marker
var marker = new google.maps.Marker({
position : latlng,
map : map,
icon: iconBase + 'schools_maps.png'
});
// add to array
map.markers.push( marker );
// if marker contains HTML, add it to an infoWindow
if( $marker.html() )
{
// create info window
var infowindow = new google.maps.InfoWindow({
content : $marker.html()
});
// show info window when marker is clicked
google.maps.event.addListener(marker, 'click', function() {
infowindow.open( map, marker );
});
}
}
This works great, but how would I had a different marker icon for different markers on the map, dependant on the type attribute they have (if possible)?
Any suggestions would be greatly appreciated!
You mean something like.....
var iconName = "";
var type = $marker.attr("type");
if (type == "library")
iconName = "library.png";
else if (type == "school")
iconName = "school.png";
// ...etc...
var marker = new google.maps.Marker({
position : latlng,
map : map,
icon: iconBase + iconName;
});
Of course, you would have to provide (and probably host) the icons yourself...
Related
I have google map with search box , i want to access marker position with (lat , lng ) when i search specific place , i can access location exactly when i drag & drop marker by event.addListener
var marker = new google.maps.Marker({
position: place.geometry.location,
map: map,
draggable:true,
title:"Drag me!",
});
google.maps.event.addListener(marker, 'dragend', function(position:any){
This.centerLat = position.latLng.lat().toFixed(3)
This.centerLng = position.latLng.lng().toFixed(3)
});
but i want to get marker location when search is done without drag & drop
You can obtain the coords of a marker using
pos = yourMarker.getPosition();
the result is an object with lat and lng
lat = pos.lat;
lng = pos.lng;
https://developers.google.com/maps/documentation/javascript/reference/marker?hl=en#Marker
I found this answer too , and it work with me correctly :
var marker = new google.maps.Marker({
position: place.geometry.location,
map: map,
draggable:true,
title:"Drag me!",
});
google.maps.event.addListener(marker, "map_changed", function() {
this.centerLat = place.geometry.location.lat().toFixed(3)
this.centerLng = place.geometry.location.lng().toFixed(3)
});
I have a google map with hundreds of markers. I would like the map to center on the users location - preferably with a button click. Currently, I have it centering on page load but with one problem - it clears out all of the markers when it centers on location. I assume this is because of how I'm calling the script. The map container's id is 'map4'.
How can I make this script work without clearing the existing markers? Any help would be greatly appreciated.
<script>
var map; // Google map object
// Initialize and display a google map
function Init()
{
// HTML5/W3C Geolocation
if ( navigator.geolocation )
navigator.geolocation.getCurrentPosition( UserLocation );
// Default to Sherman Oaks
else
ShowLocation( 38.8951, -77.0367, "Sherman Oaks, CA" );
}
// Callback function for asynchronous call to HTML5 geolocation
function UserLocation( position )
{
ShowLocation( position.coords.latitude, position.coords.longitude, "This is your Location" );
}
// Display a map centered at the specified coordinate with a marker and InfoWindow.
function ShowLocation( lat, lng, title )
{
// Create a Google coordinate object for where to center the map
var latlng = new google.maps.LatLng( lat, lng );
// Map options for how to display the Google map
var mapOptions = { zoom: 12, center: latlng };
// Show the Google map in the div with the attribute id 'map-canvas'.
map = new google.maps.Map(document.getElementById('map4'), mapOptions);
// Place a Google Marker at the same location as the map center
// When you hover over the marker, it will display the title
var marker = new google.maps.Marker( {
position: latlng,
map: map,
title: title
});
// Create an InfoWindow for the marker
var contentString = "<b>" + title + "</b>"; // HTML text to display in the InfoWindow
var infowindow = new google.maps.InfoWindow( { content: contentString } );
// Set event to display the InfoWindow anchored to the marker when the marker is clicked.
google.maps.event.addListener( marker, 'click', function() { infowindow.open( map, marker ); });
}
// Call the method 'Init()' to display the google map when the web page is displayed ( load event )
google.maps.event.addDomListener( window, 'load', Init );
</script>
If I understand you correctly, it seems you already have created a map, populated with markers AND THEN you want to center the VERY SAME map. If that's the case, your ShowLocation() function needs to be modified. The reason is that this line
map = new google.maps.Map(document.getElementById('map4'), mapOptions);
creates a fresh new instance of map (replacing any existing map in that container, if the provided map container is the same).
So your problem is that you are creating and centering a new map, instead of just centering the old one.
Just modify the centering function to work with an existing map:
function ShowLocation( lat, lng, title , map)
{
// Create a Google coordinate object for where to center the map
var latlng = new google.maps.LatLng( lat, lng);
//Working with existing map instead of creating a new one
map.setCenter(latlng);
map.setZoom(12);
// Place a Google Marker at the same location as the map center
// When you hover over the marker, it will display the title
var marker = new google.maps.Marker( {
position: latlng,
map: map,
title: title
});
// Create an InfoWindow for the marker
var contentString = "<b>" + title + "</b>"; // HTML text to display in the InfoWindow
var infowindow = new google.maps.InfoWindow( { content: contentString } );
// Set event to display the InfoWindow anchored to the marker when the marker is clicked.
google.maps.event.addListener( marker, 'click', function() { infowindow.open( map, marker ); });
}
And when calling the ShowLocation function, it's 4th parameter would be the google.maps.Map object you created when adding the markers. You cannot reference map only by knowing it's containing element's id, you need the reference for it.
I'm trying to have a map show attractions on a map. The markers are pulled from a database and are put on a map. However, I want to display a website (put in the database) after clicking the right marker. I got the code to open a different page, however, it only shows the ID/URL of the last line in the database table. how can I make it so that it would display the URL or ID of each location instead of just the last location?
the code I have right now:
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
//defining the location
center: new google.maps.LatLng(45.466963, 9.188733),
//defining default map zoom
zoom: 14,
//disable scroll wheel function
scrollwheel: false,
//disable navigation control
navigationControl: false,
//disable map type control
mapTypeControl: false,
//disable scaling function
scaleControl: false,
//allowing the map to be dragable
draggable: true,
//disable user interface e.g. + and - buttons for zoom control
disableDefaultUI: true
});
//creates window that contains defined information
infoWindow = new google.maps.InfoWindow;
//pulling the data from the file
downloadUrl("phpsqlajax_genxml2.php", function(data) {
//defining variables using data pulled over
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 1; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b> <br/>" + address;
var idd = markers[i].getAttribute("identity");
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon
});
//when marker is clicked, it opens the URL of the location
bindInfoWindow(marker, map, infoWindow, html);
google.maps.event.addListener(marker, 'click', function () {
window.open(idd, '_blank');
});
}
});
}
I have tried several options to no avail, if I would need to provide more info, please do say so, I'm at an impasse
You should save the "identity" value with each marker. You can add custom data to a marker when constructing it:
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
idd:idd
});
then the listener should use this new property:
google.maps.event.addListener(marker, 'click', function () {
window.open(this.idd, '_blank');
});
I am using JQuery mobile, HTML5 to develop a real time vehicle tracking application. I would like to know how to place a marker at the current location on a 'custom' map. I am using the getLocation function to get the current coordinates.
var mapOptions={
zoom:15
mapTypeControl: true;
navigationControlOptions:{style:google.maps.navigationControl.Style.Small}mapTypeID.ROADMAP};
map=google.maps.Map(document.getElementByID("map_container"),mapOptions);
var marker = new google.maps.Marker({
position: coords,
map: map,
title: "You Are Here!"
});
}
the google.maps.Map function loads a 'new' map. I would like to display the marker on a custom map.
you need to load the coords into a LatLng object before passing it to the marker.
eg
var myLatlng = new google.maps.LatLng(coords[0], coords[1]);
here coords[0] and coords[1] are float type latitudes and longitudes values.
after this pass the variable myLatlng inplace of coords in the marker.
This is some code i used in a project:
function CurrentPosition(){
getPosition(function(mylat, mylng){
drawPosition(mylat, mylng);
});
}
function getPosition(callback) {
navigator.geolocation.getCurrentPosition(function(position){
callback(position.coords.latitude, position.coords.longitude);
}, function(){
alert(texte['myPositionErrorAlert']);
},{enableHighAccuracy: false, timeout: 20000, maximumAge: 0});
}
function drawPosition(mylat, mylng){
LatLng = new google.maps.LatLng(mylat, mylng);
yourMarker = new google.maps.Marker({
position: LatLng,
map: map,
title:"MyPosition"
});
yourMarker.setMap(map);
}
Force the CurrentPosition funcition, the getPosition() will locate your position and the drawPosition() will create the marker.
I have a html form for adding new places in my data ,
I want the user add marker and delete last marker ,
I found this code but it is added more than one marker
How can make it delete the last one?
because I need just one marker? this is the demo of form http://saudi-hotels.info/add_hotel.php
<script type="text/javascript">
var map;
function mapa()
{
var opts = {'center': new google.maps.LatLng(26.12295, -80.17122),
'zoom':11, 'mapTypeId': google.maps.MapTypeId.ROADMAP }
map = new google.maps.Map(document.getElementById('mapdiv'),opts);
google.maps.event.addListener(map,'click',function(event) {
document.getElementById('long').value = event.latLng.lng();
document.getElementById('lat').value = event.latLng.lat();
marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(event.latLng.lat(),event.latLng.lng()),
});
}
);
}
</script>
please help me ,
You can create a global variable that tracks the last created marker:
var lastMarker;
And then, whenever you create a new marker, set lastMarker to the newly created marker:
lastMarker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(26.12295, -80.17122)
});
Then, whenever you want to remove the last created marker, you can use the lastMarker variable:
lastMarker.setMap(null);