How to highlight a region on Google Maps - javascript

How can I highlight/cover a region or multiple regions with different colors (for example 3 US states), using google maps polygon arrays?
I found a tuto on google code about how to draw a polygon but it's not giving detailed information.
Thank you for your help.

This documentation on Google is about as straight forward as you can get.
http://code.google.com/apis/maps/documentation/javascript/overlays.html
View the source of this page. Copy and paste the code into your own page and start from there.
http://code.google.com/apis/maps/documentation/javascript/examples/polygon-simple.html
In the example above you simply need to make more than one instance of bermudaTriangle and name it something else and add it to the map.

Related

Open a Google Maps link with multiple markers

We'd like to open a list of locations in a Google Map link. I've explored many possibilities, but I can't find how to do this.
The map I built using the JavaScript API doesn't show a link to Google Maps with markers on it. I hoped for a "View Larger Map" link like in the Embed API, but none of the variables seemed to add that. I tried the Embed API, but it doesn't take multiple markers.
We need to generate the list dynamically, so MyMaps doesn't work.
The Static Maps API isn't really a Google Map, in that you can't do anything with it.
I tried sending a KML file like this:
http://maps.google.com/maps?q=http://example.com/j.kml
but it looks like Google has discontinued that.
The most promising thing has been the Directions API, but we don't want directions, just a bunch of markers. The URL structure that is showing multiple points is:
https://www.google.com/maps/dir/Mi+Mero+Mole,+5026+Southeast+Division+Street,+Portland,+OR+97206/3+Doors+Down+Cafe,+Southeast+37th+Avenue,+Portland,+OR/Bunk+Downtown,+211+Southwest+6th+Avenue,+Portland,+OR+97204/#45.5135928,-122.661738,14z/
But I tried removing /dir/ to get rid of the directions and Google didn't like that. Has anyone had any luck with this?
My research on the same issue, shows that the directions URL -you have posted- is the most relevant solution at this point.
The only think I could possibly propose as an enhancement, is to leave the starting point blank so the user will be prompted to enter an address as a starting point or automatically enable geolocation by appending the Current+Location wording to the url next to /dir/:
Enable Geolocation
https://www.google.com/maps/dir/Current+Location/Mi+Mero+Mole,+5026+Southeast+Division+Street,+Portland,+OR+97206/3+Doors+Down+Cafe,+Southeast+37th+Avenue,+Portland,+OR/Bunk+Downtown,+211+Southwest+6th+Avenue,+Portland,+OR+97204/#45.5135928,-122.661738,14z/
Leave Starting Point Empty
https://www.google.com/maps/dir//Mi+Mero+Mole,+5026+Southeast+Division+Street,+Portland,+OR+97206/3+Doors+Down+Cafe,+Southeast+37th+Avenue,+Portland,+OR/Bunk+Downtown,+211+Southwest+6th+Avenue,+Portland,+OR+97204/#45.5135928,-122.661738,14z/

Google Maps - Drag & drop markers and draw routes

I am trying to implement an interface like below with jQuery/JS and Laravel PHP framework. Could anyone help me to figure out the following questions I have?
How to make the markers draggable and on marker release get the
lat/lon?
How can I show the real path between point 1 & 2 (like the blue line. when I change the marker a new line will be drawn based on the shortest distance)?
If there are multiple markers connecting to each others like below, how can I get the optimise route?
For markers are connecting to each others.
This is the optimise route to visit all 4 markers (shortest path to visit)
Is there an open source project similar to this? (like jQuery calendar)
If you know any resources/plugins related to achieving something like this please comment below.
Draggable markers on Google Map - search for "Make a marker draggable":
https://developers.google.com/maps/documentation/javascript/markers
Planning route from point A to point B based on road map. You can use Directions API:
https://developers.google.com/maps/documentation/directions/intro

How to show map marker in Google Maps API using JavaScript

How to show map marker in Google Maps API using JavaScript?
How to search specific area with display around location? How to show with dotted lines?
I'm not gonna do the whole job for you, but please have a look at gmap3. A jQuery plugin that lets you handle Google Maps in a very easy way.
Include the source file and then just to get started, create a div:
<div id="map"></div>
Then, in jQuery, run:
$("#map").gmap3();
This should generate a Google Map with no specific coordinates. If you want to get more complex, you can read all about that at http://gmap3.net/en/catalog/, but here's an example.
$('#map').gmap3({
marker:{
latLng:[29.132318972825445,81.32052349999992]
}
});
This puts out a pin at a certain coordinate. They have a clear documentation, so just head over there and follow their instructions. Hope this helps!

google maps API highlight areas

Is there a way to highlight areas with Google Map JS API v3?
I've seen some websites do it
here are some examples:
http://www.streetadvisor.com/new-allakaket-yukon-koyukuk-alaska
http://www.homely.com.au/werribee-wyndham-melbourne-greater-victoria
http://www.realestate.com.au/neighbourhoods/upwey-3158-vic
This is called a polygon.
See the Google Docs for information.
You can manually set polygon points in JS.

Country shapes for google maps

I'm doing few experiments using Google Maps and now I was taking a look to the circles.
My idea is to create a circle for each country in Europe and load the markers inside only when someone click on the circle.
I did it and works fine.
Now what I'd like to do is to create a shape of the countries and replace each circle.
I was looking at the polygons and it seems to be what I'm looking for but creating a good shape for each country takes a planty of time...
There is a Google Maps service that highlight the countries that you need? (Not Google Charts, I already took a look on it)
Or Exist something already builded to import easily with Javascript?
The boundaries of the world countries are available in the Natural Earth data set and in a public FusionTable.
Here is an example using that data to display French provinces

Categories