This question already has an answer here:
Add marker with Google Maps Javascript API to look exactly as marker that were added in maps.google.com
(1 answer)
Closed 5 years ago.
If I search for a place in Google Maps, I get the marker with the name of the location in red text beside it.
Is there a way to replicate this with my website with Google Maps API?
I have tried to add my marker using the method on Google's developer site (https://developers.google.com/maps/documentation/javascript/markers) but rather than searching by location, it requires the exact coordinates, and there doesn't seem to be a way of adding the red text beside it.
There is the title property of the Marker, but that results in just a tooltip.
My code so far...
<script>
function initMap() {
var vmotion = {lat: 52.671648, lng: -8.552518};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: vmotion
});
var marker = new google.maps.Marker({
position: vmotion,
map: map,
title: 'VMotion IT Solutions Ltd.'
});
}
</script>
You can use the map Label library here: https://github.com/googlemaps/js-map-label.
Example here; https://googlemaps.github.io/js-map-label/examples/maplabel.html
You use it like this:
var mapLabel = new MapLabel({
text: 'Test',
position: new google.maps.LatLng(34.03, -118.235),
map: map,
fontSize: 35,
align: 'right'
});
mapLabel.set('position', new google.maps.LatLng(34.03, -118.235));
Related
hello I have a problem I wish to integrate ue google map in my site but I do not understand it appears when I update the page but then it disappears. In the console it says "no APIkey" but I did it several times. I followed the site: developers.google
but I do not understand where the error lies. I put the html part if a person understand the error please ! I also follow this topic google api in my website but nothing appears !
<div id="map"></div>
<script>
function initMap() {
var ff = {
lat: 50.638181,
lng: 3.058227
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 17,
center: ff
});
var marker = new google.maps.Marker({
position: ff,
map: map
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDWdGA-ndsHMtR5-cdZrc5SHtfKKBG5Bfg&callback=initMap">
</script>
Console says:-
https://developers.google.com/maps/documentation/javascript/error-messages#api-not-activated-map-error
so activate your google map API key under project.
Your API key is not activated. Make sure to generate a new one following the guide: https://developers.google.com/maps/documentation/javascript/get-api-key?hl=de
I have a similar question to this post but I have no idea where they are getting templateId from. I haven't managed to suppress the default info window(even though I thought I put the right code in) and I don't know how to get my custom info window from my fusion table to show up. from this other guys code it looks like I need to specify a templateId so the API knows how to format the window. Right now I have the following code to initialize the map.
//CREATE AN INSTANCE OF A GOOGLE MAP
map = new google.maps.Map(document.getElementById('map'), {
//MAP BASED ON FOLLOWING CONTROLS AND THEIR OPTIONS
center: {lat:33.746828, lng:-118.299448},
zoom: 13,
rotateControl: true,
scaleControl: true,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position: google.maps.ControlPosition.TOP_LEFT,
mapTypeIds: ['roadmap', 'satellite', 'hybrid', 'terrain',
'styled_map']
},
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP},
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP},
fullscreenControl: true,
fullscreenControlOptions: {
position: google.maps.ControlPosition.TOP_LEFT}
});
var infoWindow = new google.maps.InfoWindow();
//CALL INSTANCE OF NEW LAYER ADDING IN MY FUSION TABLE
var layer = new google.maps.FusionTablesLayer({
//BASED ON A QUERY TO THE FUSION DATA AND DEFINING COORDINATES
query: {
select: "Location",
from: '1h7ZlgimMOBfutZ2dLspShafWRnNE2TlNmQgVPb1T'
},
styles: [{
markerOptions: {
iconName: "measle_turquoise"}}
],
suppressInfoWindows: true
});
google.maps.event.addListener(layer, 'click', function(e) {windowControl(e, infoWindow, map);
});
function windowControl(e, infoWindow, map) {
infoWindow.setOptions({
content: e.infoWindowHtml,
position: e.latLng,
pixelOffset: e.pixelOffset
});
infoWindow.open(map);
}
layer.setMap(map);
//ADD MY CUSTOM STYLE TO THE LIST OF MAP TYPES AND SET IT TO ACTIVE
map.mapTypes.set('styled_map', styledMapType);
map.setMapTypeId('styled_map');
Sorry its a lot of code. My main question is how do i find this templateId and am i missing anything else that i need to get my custom info window to show up on click of marker? thanks.
I found it but I will leave this up because it isn't that obvious. The templateId and styleId values can be found inside of your Fusion Table. From within Fusion Tables go to Tools -> Publish. Now activate the drop down for "Get Html and Javascript". Within here you will find them. I am making a custom map for my mom with different styles and i'm using all kinds of services so the code this provides is different than mine but the templateId and styleId still work. Now I just have to make my custom style not so ugly....also I wonder why it doesn't default to showing you custom style. If you are bringing in your custom data in a fusionTableLayer why not the info windows too. Im sure there is a simple answer that might have to do with more complex maps than mine(that contain more layers), but I don't readily see it.
Too get you custom info windows just plug in the values you find in your layer. For my map I put them right after
iconName: "measle_turquoise"}}
],
and boom i had my custom info windows! Hope this helps.
my ugly info windows
I tried to embed image but don't have enough slackoverflow points yet i guess
I created a map showing traffic with the google maps javascript API using the TrafficLayer object. A googlmaps.com-generated map of the same area displays waze incident icons, but they do not show up on my map. Is there a way to include the incident markers when generating the traffic map? Here is my code:
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 37.794086, lng: -122.400445},
zoom: 12
});
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxx&callback=initMap"
async defer></script>
At present it is impossible to add layer with incidents / constructions markers on the google traffic map.
Discussion on this topic takes place since 2010 and is available on the site:
https://code.google.com/p/gmaps-api-issues/issues/detail?id=2411
It remains to wait for the response of the google developers.
I understand that Google updated their map a day or two ago. Since the update, the weather layer no longer works on the webpage I am building. I have a MacBook Air with Apache server installed.
When the map loads the marker still works and the latitude and longitude are correct, but the city names no longer show nor does any of the weather features.
Here is what I have tried to fix the issue:
* I tried the three different web browsers that I have installed on my MacBook - Firefox, Safari, Google. Same issue in all three.
* I tried turning my Mac off and back on again.
* I went to the Google maps API website and according to that my coding is correct.
* If I do set the zoom property to 13, the city names will show up but no weather layer...which I understand is the proper behavior with a zoom setting of 13 or higher.
* On the Google maps API website, I copied and pasted the example code for the weather layer and it worked! They have a latitude and longitude of a country outside of the USA. I compared my coding to the example coding and my coding is the same, except for the latitude and longitude. SO, when I changed the latitude and longitude in the example coding to another location the weather layer stopped working.
Here is my code, but it seems to me that the issue is on Google's end. It was suggested that I post the question here (I already posted this question at productforums.google.com) because employee's from Google will see this question.
var map;
function initialize()
{
var mapOptions =
{
center: new google.maps.LatLng(40.0157394, -105.2792435),
/*center: new google.maps.LatLng(49.265984,-123.127491),*/
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP_LEFT
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.LEFT_CENTER
}
};
map = new google.maps.Map(document.getElementById("gmap"), mapOptions);
/* Weather */
var weatherLayer = new google.maps.weather.WeatherLayer({
temperatureUnits: google.maps.weather.TemperatureUnit.FAHRENHEIT
});
weatherLayer.setMap(map);
var cloudLayer = new google.maps.weather.CloudLayer();
cloudLayer.setMap(map);
/* Marker & InfoWindow */
var marker = new google.maps.Marker(
{
position: mapOptions.center,
map: map
});
var text = '<div id="mapText">' + 'I live in beautiful Boulder, CO!' + '</div>';
var infowin = new google.maps.InfoWindow(
{
content: text,
pixelOffset: new google.maps.Size(0, 20)
});
infowin.open(map, marker);
google.maps.event.addListener(marker, 'click', function()
{
infowin.open(map,marker);
});
};
google.maps.event.addDomListener(window, 'load', initialize);
To work around the issue for now, I set my zoom to 13 so at least the city and street names will show, and the weather features are disabled when zoom is set to 13 or higher.
I'm pretty sure my coding is correct. Any ideas will be appreciated.
I'm trying to show the traffic layer for this location:
map
According to: Google Documentation I should only do this:
var myLatlng = new google.maps.LatLng(34.04924594193164, -118.24104309082031);
var myOptions = {
zoom: 13,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);
But the traffic layer is not shown.
I've checked this: coverage spreadsheet and it says it is not covered, but if I go to maps.google.com and search that location I can see traffic layer.
Is this not open to the developer community? Is something that needs to be paid to be used?
Not all data you see on maps.google.com are available inside the API, it's the decision of the owners of the data to spread their property for free or not.