Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I'm embedding a Google maps style footer, with a div overlay containing things like working hours, or contact info. I'm also trying to incorporate a custom location marker, something like this:
Can anyone help me with this?
Thanks!
Assuming you're using the google maps API, you can use this code.
function initMap() {
// store latitude and longitude for map and marker
var myLatLng = {lat: -25.363, lng: 131.044};
// create a map
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
// create a custom marker
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!',
icon: 'my-image.png'
});
}
This code created a myLatLng variable which stores the Latitude and Longtitude, it then creates a map object. I assume you already have that setup if you have a map in your site.
The code then declared a marker, using the same latitude and longitude at the map via the position property, setting a title via the title property and choosing the image that will be used on the marker via the icon property.
This function was initially lifted straight from the documentation found at: https://developers.google.com/maps/documentation/javascript/markers
Related
This question already has answers here:
Google Maps - Multiple Markers via URL only
(3 answers)
Closed 3 months ago.
This post was edited and submitted for review 3 months ago and failed to reopen the post:
Original close reason(s) were not resolved
I have a simple app where customers send their service locations as URLs, like these:
https://maps.app.goo.gl/XEUMo2diVTtJkine9
https://g.co/kgs/zdGeB5
https://maps.google.com/?cid=18234800435333057384
https://maps.google.com/?q=Mullai+St%2C+Maharani+Avenue%2C+Vadavalli%2C+Tamil+Nadu+641041&ftid=0x3ba85f24ad71738d:0x9a062e23b86b557f
When a technician has a visit scheduled, they can just click on the link and Google shows a map to that one address.
The next thing I'd like to implement is showing several of these on a map together (like all of the technician's visits for the whole day). How do I place these address URls as markers on a map, using the Google Maps Javascript API?
I think you need to use this doc https://developers.google.com/maps/documentation/javascript/adding-a-google-map
here exemple
function initMap() {
// The location of Uluru
const uluru = { lat: -25.344, lng: 13.031 };
const other = { lat: -25.344, lng: 10.031 };
// The map, centered at Uluru
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 4,
center: uluru,
});
// The marker, positioned at first point
const marker = new google.maps.Marker({
position: uluru,
map: map,
});
// The marker, positioned at second point
const marker2 = new google.maps.Marker({
position: other,
map: map,
});
}
window.initMap = initMap;
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
I want to get POI's latitude and longitude when click POI. As you can see there is POI's latitude and longitude included on URL bottom of the image.
I think it's not available at documentation.
I remember that google map api for Android provide POI's latitude and longitude when I tested 3 months ago.
In order to get a latitude and longitude of the POI when you click on it, you should add a click event listener on the map object. Each time you click on the POI, the map will trigger an event of type google.maps.IconMouseEvent:
https://developers.google.com/maps/documentation/javascript/reference/map#IconMouseEvent
You just need to check if event has placeId field and stop event propagation to prevent default info window if it is necessary.
Have a look at the following example that demonstrates how to extract place ID and coordinates of POIs.
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 41.3850639, lng: 2.1734035},
zoom: 19
});
var infowindow = new google.maps.InfoWindow();
map.addListener('click', function(event){
if (event.placeId) {
event.stop();
infowindow.close();
infowindow.setPosition(event.latLng);
infowindow.setContent(
'<div>'
+ '<strong>You clicked place</strong><br>'
+ 'Place ID: ' + event.placeId + '<br>'
+ 'Position: ' + event.latLng.lat() + ',' + event.latLng.lng() + '</div>');
infowindow.open(map);
}
});
}
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&callback=initMap"
async defer></script>
I hope this helps!
I am trying to use create markers using the google maps api to draw a route on an embeded open cycle map.
here is the progress:
http://embed.plnkr.co/yq9NudcYyTfCnVqe6MH0/index.html
I cannot seem to get the markers down.
something like this:
var myLatLng = new.google.maps.LatLong(50.4261, -3.8401);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
as per
https://developers.google.com/maps/documentation/javascript/examples/marker-simple
Any ideas??
Found an excellent solution: http://www.mapsmarker.com/docs/how-to-install-the-plugin/
Great plugin and easy to construct, basically saved me a day of coding.
This is a simple 'how-to' question.
I have users in my database with their country name. I want get this country information of all the users and show it on a JavaScript Map as 'Pins' of data points. Like, for example, if I have users from Brazil, there will be a Pin on Brazil, etc.
What is the best method to do this, since I'm only looking at countries? I just saw this but I'm not sure it is the answer. Displaying a tooltip with total number of users within that country, onhover, would be a big plus.
A sample script to create the pins on the map is as below:
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 4,
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,
title:"This is Australia!"
});
}
You will need to get the Lat, Lng of the center point of each country
You have various options to get the data to javascript
i. if you are using asp.net MVC, you could create an action that returns JsonResult
ii. you could use ajax to make a call to a server method and get the results.
Finally, manipulate the data in javascript by looping through the list to create the marker pins.
I am trying to create a site that has option to add maps to the site using google maps api. I found hundreds of tutorial and blog posts on embeding map in the site. But what I actually want is a way to give the user choose a place on the map and add marker. Then get the co-ordinates of the marker and store it in the database of retrieving and showing in the front-end. I have seen this option given wordpress plugins like mappress. But now I'm trying to achieve this in codeigniter. I can't find any thing to start on. Can any one point out some one tell me where to start?
This is really easy the 3rd version of the Google maps API. Versions before that where much more complicated, and most of the tutorials floating around are for those versions. Have a look through the API documentation and examples.
Adding a marker is as simple as:
var marker=new google.maps.Marker({/* ... see API */});
Adding an event (eg click) to a marker is as simple as:
var marker_click=new google.maps.event.addListener(
marker,
'click',
function() {/*...*/});
Sounds like you'd want a click event for the map, which you'd translate into a latlong, then (a) generate a marker on the map with JS, and (b) post that back to your server using AJAX, or by storing the values in a hidden form field to be submitted after.
Update:
Mostly from the API documentation # http://code.google.com/apis/maps/documentation/javascript/events.html:
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
}
function placeMarker(location) {
var clickedLocation = new google.maps.LatLng(location);
var marker = new google.maps.Marker({
position: location,
map: map
});
map.setCenter(location);
/*Do your processing here:
* eg. ajax.post('addMarkerDB&lat='+location.lat+'&long='+location.long);
*/
}
Note: There is no ajax.post function by default, but there could be :)