I am very new to this, so please forgive me if this question is stupid. I am using a custom Google Map in my website. I have 2 layers and each layer has a different type of business. I am using 2 different icons/markers selected from the standard Google Maps options to differentiate between the two types of businesses.
I would like to create a map key explaining to customers what the different markers indicate - but I cannot find these markers as images on the net, and I can't figure out how to save or download them from the map itself. So my question is: Is there a way to download and save the actual marker/icon image, so I can re-upload it elsewhere on the page and create a map key? I realize that the Google Map already has a simple key (if you know to click on it to see it) but I was hoping to create something with more text/explanation, that is more obvious to customers when the page loads.
Here is the url for the map I'm referring to: www.washingtonlavenderassociation.org/map
Thank you!
http://map-icons.com/
var marker = new Marker({
map: map,
position: new google.maps.LatLng(-27.46577, 153.02303),
icon: {
path: SQUARE_PIN,
fillColor: '#00CCBB',
fillOpacity: 1,
strokeColor: '',
strokeWeight: 0
},
map_icon_label: '<span class="map-icon map-icon-point-of-interest"></span>'
});
or from docs: https://developers.google.com/maps/documentation/javascript/examples/icon-simple
Related
is it possible to set the direction of google Maps in grayscale(black&white) mode on the website when users select stores and want to check the direction?
I have grayscale Map on my website but when the user tries to see the direction, direction detail shows in color so is there any possible way to show that direction also in black&white?
To answer your question, yes, setting the Directions polyline colors can be changed to match your grayscale map styling.
This can be done by modifying the DirectionsRendererOptions' polylineOptions.
var directionsRenderer = new google.maps.DirectionsRenderer({
suppressMarkers: true,
polylineOptions:{
strokeColor: "#808080",
strokeWeight: 10
}
});
As you can notice, I also removed the default directions marker by setting suppressMarkers to true. That way, I can create a new marker that I could modify to match the grayscale color as well.
Please find the working sample here
I have a friend who struggles organising people working around the country for the most appropriate sites in the UK (In the telecommunications sector)
I want to make him a map of the UK where each county works as a hyperlink to a list (This is because I need it to be visual and for him to understand who lives closest to each site, this could also be great, if not better as a postcode map).
I was wondering if it was possible or even if I could find the code online to draw the correct shapes for the hyperlinks, I couldn't find anything on github or any previous questions for somebody who has tried this.
As I am a beginner it would be great if I could make these hyperlinks using HTML (It doesn't need to look pretty, it just needs to be shaped like the UK!)
It would be great to get suggestions as to how I can do this.
Thanks for you time
Google Maps API is the way to go (as mentioned by other).
The idea is that you should build a polygon for each county in the UK, assign a click event to each polygon you just created and finally redirect the user to the link that you want.
I made a JSFiddle that does it for the Avon county in the UK.
https://jsfiddle.net/mpariscl/vmysg6yh/1/
$(function() {
initialize();
});
function initialize() {
var myLatlng = new google.maps.LatLng(51.6881171980821, -2.51998453948394);
var myOptions = {
zoom: 6,
center: myLatlng,
mapTypeId: 'satellite'
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var county = new google.maps.Polygon({
paths: CountyCoordinates(),
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
county.setMap(map);
google.maps.event.addListener(county, 'click', function() {
location.href = 'https://en.wikipedia.org/wiki/Avon_(county)';
});
}
You can then add the missing counties using the coordinate that you will find on this website : http://www.nearby.org.uk/counties/
Google Maps API is the way to go here. You could combine these two examples:
Geocoding for looking up the original address
KML layer For adding the location of his employees as markers so he can see who is closest.
You can generate a KML file by creating your own map on Google Maps.
It's not really beginners stuff but due to the examples you should be able to get started.
If you want an easier solution you could just create a map on Google Maps and add location of employees there. You can share maps and that would probably be a pretty good tool to solve your friends problem.
Edit I just saw your comment about Google Maps. You can perhaps make it easier by styling the map a bit and leaving out details that might be confusing. You can use something like MapStyle for that.
I am trying to decide if the Google Maps API is the right tool to use for me.
I have a list of places I'd like to display on a map (a map of Italy)
and I'd like that:
The map doesn't show any other label but mines, and
My places are shown as labels on the map, without any icon/pin
I saw (e.g. Changing markers icons in Google Maps application) that you can change the pin icons, but I'd like not to have any.
Style the map to remove all other labels - I like using this wizard. Note the 'More Options' link in the bottom left gives many more customization options.
To create markers with only labels, not pins, you'll need a transparent PNG to use for the marker icon. I used a 20x20 one. Tweak the icon anchor to move the label to the right spot, I found 7,7 to be reasonable. For more about custom icons, see the docs.
var marker = new google.maps.Marker({
position: markerPosition,
map: map,
icon: {
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(7, 7),
url: transparentIconURL
},
label: '1'
});
You can use a styled map with the Google Maps API v3 (or a completely custom map with your own tiles)
If you just want text labels for your places, look at the InfoBox library (this example).
I have multiple addresses on the same street with the same house number, but with different apartment numbers. Google Maps Geocoding Service (v2) doesn't go down to apartment level accuracy for many addresses and just returned me the exact same geocode coordinates for them.
So the problem is that when I go to display them, only one pushpin shows up no matter how much you zoom in. And my question is; what is a good way to render multiple pushpins at the exact same house address? I've seen how craigslist.org creates a spiral out of the pushpins on their new map feature, but was wondering what my other options are as that seems like a workaround at best.
Ideas?
I solved this using Google's dynamic chart icons which allow you to put a number in the pin identifying that there are multiple markers on this exact some point. Basically, you call their "chart" url with some query params and they give you back your numbered icon which you can then place/set in the existing marker you have on that spot.
var markerImage = createMarkerImage(numDuplicates + 1);
existingMarker.setIcon(markerImage);
function createMarkerImage(text)
{
var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=" + text + "|FF8985|000000",
new google.maps.Size(21, 34),
new google.maps.Point(0,0),
new google.maps.Point(10, 34));
return pinImage;
}
NOTE: This solution uses a deprecated google API with no end date posted.
"Important: The Image Charts portion of Google Chart Tools has been
officially deprecated as of April 20, 2012. It will continue to work
as per our deprecation policy."
UPDATE:
I have moved away from the above solution since it's deprecated (and has performance impact for many markers) in leiu of the same end effect of a numbered marker, but using a path of coordinates defining polygon in the shape of a marker along with a .png for the marker shadow. Only reason I used my own custom marker is because I needed to create individual markers, each with a unique color (and possibly an embedded number), which the vanilla markers don't support.
So, having been recently somewhat dissapointed with lack of customizability of the regular google maps "embed" (iframe) code; I have started tinkering with the Google Maps API v3. Really, all I want to do is show a marker for a business on the map, so that you can click it and go to that "place" at mapsgoogle.com.
So pretty much, I just want to recreate the functionality of the iframe code below. I put in about an hour of reading the docs, but it seems extremely complicated just to get the marker associated with a 'place'
The place
https://maps.google.com/maps?cid=1311411133662139490
The standard Embed
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?cid=1311411133662139490&ie=UTF8&hq=&hnear=&t=m&iwloc=A&ll=41.097905,-73.405006&spn=0.006295,0.006295&output=embed"></iframe><br /><small>View Larger Map</small>
It appears as though there is no functionality in the api to use the cid.
To Elaborate a little
Generally I would use this just for small business websites. I was frustrated with the regular iframe embed and lack of customizability. Essentially I want a starting point from which I can play with stuff and heavily customize the look/feel, but have been unable to put a marker in that's associated with the data for a "place" - allowing for the little pop-up window, etc..
Honestly, I didn't really do enough research before asking this question - and came in with some misconceptions. I think, and I may be wrong, that the API is still what I want to be using ultimately, but had I know about the functionality in Rick's answer, I probably would have settled on that and procrastinated longer on learning the gmaps API.
Allow me to explain one option of achieving your goal. I use the marker and infoWindow objects that Google Maps API v3 offers, which you can find in the document I attached in the link. Feel free to follow along in the jsFiddle I created: http://jsfiddle.net/bgvYH/
First thing is first, you want to initiate your map with its options - I'm going to assume you know what the different variables in following code snippet represent:
var myLatlng = new google.maps.LatLng(41.097905,-73.405006);
var myOptions = {
zoom: 16,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
If you want to customize your map even more to your liking, have a look at the different options you can set in the API reference, you'll set these options in the myOptions object ( https://developers.google.com/maps/documentation/javascript/reference#MapOptions ).
Note: I set the center of the map to the Lat/Long coordinates of the restaurant - which I took from the URL you provided in the iframe ll=41.097905,-73.405006.
Now what you want to do next is determine the content you want to display in your infoWindow, so the restaurant information:
var contentString = "<div id='content'>";
contentString += "<div id='title'>Mr. Frosty's Deli and Grill</div>";
contentString += "<div id='info'><p>10 1st Street</p><p>Norwalk, CT 06855</p><p>(203) 956-5767</p><p><a href='http://thebeachburger.com/'>thebeachburger.com</a></p></div></div>";
You may even end up pulling this information from a database or JSON object in the future, depending on how deep you go into this project (for now I have it as static HTML).
Next we initialize the infoWindow object and set the contentString to the content option of the infoWindow. There are other options you can customize here (just like the map options, again look at the reference for InfoWindowOptions: https://developers.google.com/maps/documentation/javascript/reference#InfoWindowOptions )
var infowindow = new google.maps.InfoWindow({
content: contentString
});
After setting up your infoWindow object, you initialize your marker object - which will place the drop the bubble on the map. Once again, you set up the options for the marker when initializing much like you did with the map object and the infoWindow object - you can further customize it to your liking by looking at the reference (I think there's even an option in there for the marker where you can use custom icons - you can get pretty creative here).
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Mr. Frosty's Deli and Grill"
});
And finally, you need to bind the Marker and the infoWindow together - so that when a user clicks on the marker the info pops up. This is achieved by using the event listener, and you listen for a "click" action on the marker variable. Read this document for information on events on google maps https://developers.google.com/maps/documentation/javascript/events. Likewise look through the API Reference for the different events you can listen to on an object.
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
That should do it, you should have a working alternative to the iframe you include - except now you can customize the map and the actions you perform on it to however you want. In the jsFiddle I also included some styling, just to make things look nice inside the infoWindow.
Now, I want to let you know - I believe there is another option to what your looking for - but I have yet to experiment with this API. It is the Google Places API, which you'll have register for. But from what I read through the documents, I think you may be able to achieve what you want to do. Have a look at it ( https://developers.google.com/maps/documentation/places/ ), and see what's good.
It looks like this was created through 'My Places' and made public. If you don't want to mess with the API then that's your best bet.
Visit maps.google.com, click 'My Places' and 'Create Map'. Customize and grab the embed code.
If the map doesn't need to be interactive (beyond the click action), use a static map. It's just an image so you can wrap it in an anchor that points exactly where you want.