$(function(){
var map,
markerIndex = 0,
markersCoords = {};
map = new jvm.WorldMap({
map: 'jilin',
markerStyle: {
initial: {
fill: 'red'
}
},
container: $('#world-map-gdp')
});
map.container.click(function(e){
var latLng = map.pointToLatLng(e.offsetX, e.offsetY);
alert(latLng);
});
$('.jvectormap-zoomin').click(); //放大
});
I use svg produced a Jilin Province Map of China.
I want to add several markers in the map
But I can not get latLng ，And I don't know why ?
Help!
Here is an example from the official site on dealing with markers for maps converted from SVG.
Related
I have a questions, currently I have in a webpage some markers that I get from a xml file using position of latitude and longitude.
So I would like to know how to enable to option of the marker listener to activate or show the option to send the user using the cellphone directions (gps). Like in android it I click on the marker it shows the option to activate gps directions, but on web I don't know how.
So for each direction if is clicked send the current position to the gps directions app of the cellphone.
Currlently I have this code:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 12
});
var infoWindow = new google.maps.InfoWindow({map: map});
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
infoWindow.setPosition(pos);
infoWindow.setContent('Location found.');
map.setCenter(pos);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
// Change this depending on the name of your PHP or XML file
downloadUrl('https://www.mysite/dataMaps.php', function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName('marker');
Array.prototype.forEach.call(markers, function(markerElem) {
var name = markerElem.getAttribute('name');
var address = markerElem.getAttribute('address');
var type = markerElem.getAttribute('type');
var point = new google.maps.LatLng(
parseFloat(markerElem.getAttribute('lat')),
parseFloat(markerElem.getAttribute('lng')));
var infowincontent = document.createElement('div');
var strong = document.createElement('strong');
strong.textContent = name
infowincontent.appendChild(strong);
infowincontent.appendChild(document.createElement('br'));
var text = document.createElement('text');
text.textContent = address
infowincontent.appendChild(text);
var icon = customLabel[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
label: icon.label
});
marker.addListener('click', function() {
infoWindow.setContent(infowincontent);
infoWindow.open(map, marker);
//map.setCenter(marker.getPosition());
});
});
});
}
And
I foun this in google site:
function displayRoute(origin, destination, service, display) {
service.route({
origin: origin,
destination: destination,
waypoints: [{location: 'Adelaide, SA'}, {location: 'Broken Hill, NSW'}],
travelMode: 'DRIVING',
avoidTolls: true
}, function(response, status) {
if (status === 'OK') {
display.setDirections(response);
} else {
alert('Could not display directions due to: ' + status);
}
});
}
But in waypoints: not sure how to send the latitude and longitude parameters and if it will work on mobile devices to trigger the gps directions app :S
Any suggestions?
Finally I saw how, in the infowindow you just need to add this:
nav
I found it here: Is there a way to invoke navigation from mobile browser?
I'm simply trying to replace the lat long coords to use the browsers geolocation yet I'm getting no result...
Code for the geolocation is;
<script> var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
function initAutocomplete() {
var map = new google.maps.Map(document.getElementById('map'), {
center: coords,
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
The rest of the code points to the simple places api service;
// Create the search box and link it to the UI element.
var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
var markers = [];
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function() {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
// Clear out the old markers.
markers.forEach(function(marker) {
marker.setMap(null);
});
markers = [];
// Create a marker for each place.
markers.push(new google.maps.Marker({
map: map,
icon: icon,
title: place.name,
position: place.geometry.location
}));
if (place.geometry.viewport) {
// Only geocodes have viewport.
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
});
}
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success);
} else {
error('Geo Location is not supported');
}
</script>
I cannot for the life of me find any reliable tutorials on-line...
I have a map that has lots of markers pulled from a database. Each one displays an InfoWindow with a placename and the lat and lng of the location. I need to have the placename affiliated with a marker added to and HTML textbox on click. I can't seem to find any tutorials on this. Maybe someone can point me in the right direction. I am trying to learn this on my own so apologies if it is sloppily designed. Thanks for your help in advance.
function load() {
var map = new google.maps.Map(document.getElementById("map_canvas"), {
center: new google.maps.LatLng(41.640078, -102.669433),
zoom: 3,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
downloadUrl("mymap.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; 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/>" + point;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
It needs to go into a simple textbox like this:
<input type = "text" id = "address_box" value = ""/>
To display that data in your HTML text box, change your bindInfoWindow function, add code in there to put the data in the text box:
function bindInfoWindow(marker, map, infoWindow, html, name) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
document.getElementById("address_box").value = name;
});
}
And add name in to the call to it:
bindInfoWindow(marker, map, infoWindow, html, name);
Do you mean, when the infoWindow opens, you want to display some information into the textbox?
If so, this code might help you(I hope).
var infoWindow = new google.maps.InfoWindow;
var address_box = document.getElementById("address_box");
google.maps.event.addListener(infoWindow, "domready", function() {
address_box.value = infoWindow.get("Content");
});
for a service providers website I am using the code below (stole it from here) to display a map and draw areas each provider covers. How can i return and store the arrays of latitudes/longitudes of each shape i draw? i need to save it into database so later i can use for search queries when searching for providers within a certain area.
<script type="text/javascript">
var drawingManager;
var selectedShape;
var colors = ['#1E90FF', '#FF1493', '#32CD32', '#FF8C00', '#4B0082'];
var selectedColor;
var colorButtons = {};
function clearSelection() {
if (selectedShape) {
selectedShape.setEditable(false);
selectedShape = null;
}
}
function setSelection(shape) {
clearSelection();
selectedShape = shape;
shape.setEditable(true);
selectColor(shape.get('fillColor') || shape.get('strokeColor'));
}
function deleteSelectedShape() {
if (selectedShape) {
selectedShape.setMap(null);
}
}
function selectColor(color) {
selectedColor = color;
for (var i = 0; i < colors.length; ++i) {
var currColor = colors[i];
colorButtons[currColor].style.border = currColor == color ? '2px solid #789' : '2px solid #fff';
}
// Retrieves the current options from the drawing manager and replaces the
// stroke or fill color as appropriate.
var polylineOptions = drawingManager.get('polylineOptions');
polylineOptions.strokeColor = color;
drawingManager.set('polylineOptions', polylineOptions);
var rectangleOptions = drawingManager.get('rectangleOptions');
rectangleOptions.fillColor = color;
drawingManager.set('rectangleOptions', rectangleOptions);
var circleOptions = drawingManager.get('circleOptions');
circleOptions.fillColor = color;
drawingManager.set('circleOptions', circleOptions);
var polygonOptions = drawingManager.get('polygonOptions');
polygonOptions.fillColor = color;
drawingManager.set('polygonOptions', polygonOptions);
}
function setSelectedShapeColor(color) {
if (selectedShape) {
if (selectedShape.type == google.maps.drawing.OverlayType.POLYLINE) {
selectedShape.set('strokeColor', color);
} else {
selectedShape.set('fillColor', color);
}
}
}
function makeColorButton(color) {
var button = document.createElement('span');
button.className = 'color-button';
button.style.backgroundColor = color;
google.maps.event.addDomListener(button, 'click', function() {
selectColor(color);
setSelectedShapeColor(color);
});
return button;
}
function buildColorPalette() {
var colorPalette = document.getElementById('color-palette');
for (var i = 0; i < colors.length; ++i) {
var currColor = colors[i];
var colorButton = makeColorButton(currColor);
colorPalette.appendChild(colorButton);
colorButtons[currColor] = colorButton;
}
selectColor(colors[0]);
}
function initialize() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(22.344, 114.048),
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
zoomControl: true
});
var polyOptions = {
strokeWeight: 0,
fillOpacity: 0.45,
editable: true
};
// Creates a drawing manager attached to the map that allows the user to draw
// markers, lines, and shapes.
drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.POLYGON,
markerOptions: {
draggable: true
},
polylineOptions: {
editable: true
},
rectangleOptions: polyOptions,
circleOptions: polyOptions,
polygonOptions: polyOptions,
map: map
});
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
if (e.type != google.maps.drawing.OverlayType.MARKER) {
// Switch back to non-drawing mode after drawing a shape.
drawingManager.setDrawingMode(null);
// Add an event listener that selects the newly-drawn shape when the user
// mouses down on it.
var newShape = e.overlay;
newShape.type = e.type;
google.maps.event.addListener(newShape, 'click', function() {
setSelection(newShape);
});
setSelection(newShape);
}
});
// Clear the current selection when the drawing mode is changed, or when the
// map is clicked.
google.maps.event.addListener(drawingManager, 'drawingmode_changed', clearSelection);
google.maps.event.addListener(map, 'click', clearSelection);
google.maps.event.addDomListener(document.getElementById('delete-button'), 'click', deleteSelectedShape);
buildColorPalette();
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
any help would be appreciated.
Thank you
This is something you need.
I tested it and it works very well.
Just copy and then enjoy it.
<html>
<!--Here you will create a polygon by tools that Google maps "drawingManager" gives to you and then you have an array named "coordinates" as an output. This array saves all latLng of the polygon. When you edit the polygon it also edit this variable too.
!-->
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&libraries=drawing"></script>
<!--Global variables!-->
<script>
//This variable gets all coordinates of polygone and save them. Finally you should use this array because it contains all latitude and longitude coordinates of polygon.
var coordinates = [];
//This variable saves polygon.
var polygons = [];
</script>
<script>
//This function save latitude and longitude to the polygons[] variable after we call it.
function save_coordinates_to_array(polygon)
{
//Save polygon to 'polygons[]' array to get its coordinate.
polygons.push(polygon);
//This variable gets all bounds of polygon.
var polygonBounds = polygon.getPath();
for(var i = 0 ; i < polygonBounds.length ; i++)
{
coordinates.push(polygonBounds.getAt(i).lat(), polygonBounds.getAt(i).lng());
alert(i);
}
}
</script>
<script>
function initialize()
{
//Create a Google maps.
var map = new google.maps.Map(document.getElementById('map'), {zoom: 12, center: new google.maps.LatLng(32.344, 51.048)});
//Create a drawing manager panel that lets you select polygon, polyline, circle, rectangle or etc and then draw it.
var drawingManager = new google.maps.drawing.DrawingManager();
drawingManager.setMap(map);
//This event fires when creation of polygon is completed by user.
google.maps.event.addDomListener(drawingManager, 'polygoncomplete', function(polygon) {
//This line make it possible to edit polygon you have drawed.
polygon.setEditable(true);
//Call function to pass polygon as parameter to save its coordinated to an array.
save_coordinates_to_array(polygon);
//This event is inside 'polygoncomplete' and fires when you edit the polygon by moving one of its anchors.
google.maps.event.addListener(polygon.getPath(), 'set_at', function () {
alert('changed');
save_coordinates_to_array(polygon);
});
//This event is inside 'polygoncomplete' too and fires when you edit the polygon by moving on one of its anchors.
google.maps.event.addListener(polygon.getPath(), 'insert_at', function () {
alert('also changed');
save_coordinates_to_array(polygon);
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div style="width:1024px; height:768px;" id="map"></div>
</body>
</html>
How can you create an listener to a marker and get its latitude and longitude. When I create an listener to each marker of a click event, I can do stuff like alert on the click, but how can I get the coords of the marker i.e click -> this.getLat/getLng, etc. when clicked on?
Try this:
marker = new google.maps.Marker({
position: latlng,
map: map
}); //end marker
//Add listener
google.maps.event.addListener(marker, "click", function (event) {
alert(this.position);
}); //end addListener
As a followup to Bryan Weaver's excellent answer, if you want to SAVE latitude and longitude separately, you must use lat() and lng(). the position property is not a regular string.
bryan's code would become:
marker = new google.maps.Marker({
position: latlng,
map: map
}); //end marker
//Add listener
google.maps.event.addListener(marker, "click", function (event) {
var latitude = this.position.lat();
var longitude = this.position.lng();
alert(this.position);
}); //end addListener
you can apply lat() and lng() directly on a variable (latLng)
var latitude = latLng.lat();
var longitude = latLng.lng();
All the answers here are good,
but I have tried something which kind of works like Google Maps.
When you click somewhere on the map, a marker shows up but when you click somewhere else the old marker goes away and the new marker shows up with latitude and longitude in the text field.
Here's the DEMO
// In the following example, markers appear when the user clicks on the map.
// The markers are stored in an array.
// The user can then click an option to hide, show or delete the markers.
var map;
var markers = [];
function initMap() {
var haightAshbury = {lat: 23.2748308, lng: 77.4519248};
map = new google.maps.Map(document.getElementById('map'), {
zoom: 16.3, // Set the zoom level manually
center: haightAshbury,
mapTypeId: 'terrain'
});
// This event listener will call addMarker() when the map is clicked.
map.addListener('click', function(event) {
if (markers.length >= 1) {
deleteMarkers();
}
addMarker(event.latLng);
document.getElementById('lat').value = event.latLng.lat();
document.getElementById('long').value = event.latLng.lng();
});
}
// Adds a marker to the map and push to the array.
function addMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
markers.push(marker);
}
// Sets the map on all markers in the array.
function setMapOnAll(map) {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(map);
}
}
// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
setMapOnAll(null);
}
// Deletes all markers in the array by removing references to them.
function deleteMarkers() {
clearMarkers();
markers = [];
}
</script>
<script async defer
src="http://maps.google.com/maps/api/js?sensor=false&callback=initMap">
</script>
So what this code does is, when you click somewhere on the map, the values of latitude and longitude shows up in the text field.