danielemoraschi / maplace.js

A Google Maps Javascript plugin for jQuery.

Maplace.js - currently unmaintained

Helps you to embed Google Maps into your website, quickly create markers and controls menu for the locations on map.

Demo

See demo website

Setup

Download the latest version of Maplace.js and include the Google Maps API v3 along with jQuery.

JS

new Maplace({
	locations: data,
	controls_type: 'list',
	controls_on_map: false
}).Load();

HTML

<div id="controls"></div>
<div id="gmap" style="with:300px;height:250px;"></div>

Locations Array

var data = [{
	    lat: 45.9,
	    lon: 10.9,
	    title: 'Title A1',
	    html: '<h3>Content A1</h3>',
	    zoom: 8,
	    icon: 'http://www.google.com/mapfiles/markerA.png'
	},{
	    lat: 44.8,
	    lon: 1.7,
	    title: 'Title B1',
	    html: '<h3>Content B1</h3>',
	    show_infowindow: false
	}
];

Options

Option	Type	Default	Description
map_div	string	#gmap	Where you want to show the Map
controls_div	string	#controls	Where you want to show the menu. generate_controls must be true controls_on_map must be false At least more than one location on map
generate_controls	boolean	true	If false, the menu will not generated
controls_type	string	dropdown	To set the menu type choose between: dropdown | list
controls_on_map	boolean	true	If false, the menu will be generated into the element defined by the property controls_div
controls_title	string		Add a title/header text to the menu
controls_cssclass	string		Add a custom class to the menu element
controls_applycss	boolean	true	If false, default styles to the menu will not be applied
controls_position	string	'RIGHT_TOP'	Controls position on the right, below top-right elements of the map.
type	string	marker	To set the Map type choose between: marker | polyline | polygon | directions | fusion
view_all	boolean	true	If false the link "view all" will not be created
view_all_text	string	View All	Set a custom text for the link "view all"
start	integer	0	Set the first location to show, 0 stands for "view all"
locations	Array [locations]	[]	List of locations being marked on the map
commons	object	{}	Overwrite every location with a set of common properties
show_markers	boolean	true	If false, markers will not be visible on the map
show_infowindows	boolean	true	If false, infowindows will not be created
infowindow_type	string	bubble	Only bubble is supported
map_options	Object	{ mapTypeId: google.maps.MapTypeId.ROADMAP, //or roadmap zoom: 1 }	Map options object, as defined by Google. The property center will be ignored. Check at the Install page to see how to center the map with only one location
styles	Object	{}	Style options as defined by Google
stroke_options	Object	{ strokeColor: '#0000FF', strokeOpacity: 0.8, strokeWeight: 2, fillColor: '#0000FF', fillOpacity: 0.4 }	Stroke options object, as defined by Google. Used in Polyline/Polygon/Directions/Fusion Map type.
directions_options	Object	{ travelMode: 'DRIVING', unitSystem: 'METRIC', optimizeWaypoints: false, provideRouteAlternatives: false, avoidHighways: false, avoidTolls: false }	Direction options object, as defined by Google
directions_panel	string	null	ID or class of the div in which to display the directions steps.
fusion_options	Object	{}	Fusion tables options as defined by Google
draggable	boolean	false	If true, allows the user to drag and modify the route, the polyline or the polygon
listeners	Object	{}	Example: listeners: { click: function(map, event) { map.setOptions({scrollwheel: true}); } } Docs: Google maps Events

Methods

Function	Params	Return	Description
AddControl	string [name], function		Add you own menu type to the map
CloseInfoWindow			Close the current infowindow
ShowOnMenu	integer [index]	boolean	Checks if a location has to be shown on menu
ViewOnMap	integer [index]		Triggers to show a location on map
SetLocations	array [locations], boolean [reload]		Replace the current locations
AddLocations	array [locations] | object [location], boolean [reload]		Adds one or many locations
AddLocation	object [location], integer [index], boolean [reload]		Adds one location at the specific index
RemoveLocations	array [indexes] | integer [index], boolean [reload]		Delete one or many locations
Load	null | boolean | object [options]		Loads, updates the current options or force to reload the current options and construct the map
Loaded			Checks if a Load() was already been called

Events

</tbody>

Option	Type	Default	Description
beforeViewAll	function		Fires before showing all the locations
afterViewAll	function		Fires after showing all the locations
beforeShow	function	(index, location, marker){}	Fires before showing the current triggered location
afterShow	function	(index, location, marker){}	Fires after showing the current triggered location
afterCreateMarker	function	(index, location, marker){}	Fires after a marker creation
beforeCloseInfowindow	function	(index, location){}	Fires before closing the infowindow
afterCloseInfowindow	function	(index, location){}	Function called after closing the infowindow
beforeOpenInfowindow	function	(index, location, marker){}	Fires before opening the infowindow
afterOpenInfowindow	function	(index, location, marker){}	Fires after opening the infowindow
afterRoute	function	(distance, status, result){}	Fires after the route calcoule
onPolylineClick	function	(obj) {}	Fires when click on polylines
circleRadiusChanged	function	(index, location, marker){}	This event is fired when the circle's radius is changed.
circleCenterChanged	function	(index, location, marker){}	This event is fired when the circle's center is changed.
drag	function	(index, location, marker){}	This event is fired while a marker is dragged.
dragEnd	function	(index, location, marker){}	This event is fired when the drag event ends.
dragStart	function	(index, location, marker){}	This event is fired when the drag event starts.

Requirements

Maplace.js requires jQuery and Google Maps Library v3.

Source code

All efforts have been made to keep the source as clean and readable as possible.
Maplace.js is released under an MIT License.

Changelog

v0.2.10

• Fixed afterRoute not passing status or location with draggable #147 and #139
• Added listener for 'insert_at' polygon events #164

v0.2.9

• Fixed #137
• All event functions are now scoped to the current Maplace instance object

v0.2.8

• Fixed #161
• Fixed #160

v0.2.7

• Fixed #132
• Fixed #127

v0.2.0

• Updated to jQuery ~2.1
• Source directory for the build moved from "src" to "dist"
• Use Grunt tasks to generate distribution artifacts
• Changed default border color for in-map menu panel to match with Google Maps new UI
• Updated package.json and bower.js

v0.1.3

• Added circles support allowing mixed markers/circles
• Removed 'hide_marker' option for consistency with "visible"
• Added support to set the initial center position and zoom of the Map
• Improved editable polyline and polygon when visible markers
• Added drag events between markers, circles, polyline and polygon
• Return "this" for public functions to allow method chaining
• Renamed property 'commons' to 'shared' now overridden by location specific options
• Added external reference to Snazzy Maps website for Google Map styling
• Changed debug strategy
• General fixes and enhancements

v0.1.2

• General fixes and enhancements

v0.1.0

• Initial release

maplace.js's Issues

Cluster Support?

Have you thought about adding map cluster support?

right column on readme is not visible

the right column on your top table isnt readable because the codeblock for map_options is too wide. perhaps remove the comment.

maplace added to Twittstrap resources list

Hello,
we have just add maplace.js to twittstrap resources list
http://www.twittstrap.com/resources
Under : Javascript

supressMarkers

i would like to add supressMarkers:true to directions_options object

to change to A, B markers icon

Custom Icons?

The main maplace says 'Markers and custom icons’ but i cannot find any documentation of how to accomplish this, is it possible with the current release?

regular + satellite + custom styled map

I experimented for some time, but have no clue how to do this:

I would like to have styled map as default, and option to switch also to satellite.

If i remove styling, I get regular and satellite. If i add (uncomment) styling block, I get only regular and custom styled. satellite one is gone.

Address input field for directions mode

This would make a great addition to an already great plugin!

Change google.maps.TravelMode.

Hello
How I can add option for select google.maps.TravelMode. by user, I use directions_options and I can change it manually on codes , But I need select panel for users

like https://www.google.fr/maps/dir/Ristolas/Lacs+Lacroix+ou+de+S%C3%A9gure/@44.75139,6.9133453,13z/data=!3m1!4b1!4m14!4m13!1m5!1m1!1s0x12ccd38e9eb68007:0x40819a5fd97a3d0!2m2!1d6.955228!2d44.7739339!1m5!1m1!1s0x12ccd236e01a82b7:0x9e8884a9570fc567!2m2!1d6.955849!2d44.728924!3e2

Load Google Maps API and use Maplace only if needed

Hello,

I am trying maplace and I have on a page the following:

<div class="map" data-long="51.5072" data-lat="0.1275">
  Replace by map
</div>

I would like to "find" if there are any elements in the page with class map.

If there are, and only in that case, load Google Maps API 3 ...

And then use maplace to load the maps using data attributes for location.

I was trying to mix maplace with something like:

$.getScript('https://www.google.com/jsapi', function() {
    google.load('maps', '3', { other_params: 'sensor=false', callback: function()
    {

    }});
});

Is this possible? I am having a few problems with it ...

Is this something already built in Maplace?

Thank You,
Miguel

Map can not display in a https site?

When visiting my site using http protocol, the map could display correctly, but if I switch to https, the map just does not show up.

Custom infoWindow

Can I personalize infowindow with the official Google APIs like map_options?

How to display map on localhost?

Hi,

I am testing this on localhost, I see everything is loaded fine (code) but just the maps are not showing up. How can I make the map show up?

Thanks.

RemoveLocations ?

When i tried remove locations with dataLocations {object same as AddLocations} then locations not removed...

when i create a new array with indexes, then some markers disapears and some stay without disapear. 👎 ...

is some way to:
a) create a groups of locations ( groups by type of user / developer, admin etc )
b) remove partial markers from map by checkbox on group?
c) how to do grouped objects for locations? and remove by group?

Map won't load for one coordinate location

try to load map for one location and marker not an array, and the result is just a blank gray div.. please help me, all your example using an array of multiple lat and lon, but when only give one location..the mapp won't load.

thank you

KML Import

Hello there

I wish to add a KML layer to the map created by Maplace, but i'm anywhere near of what I intend to do.

How can I get a reference back of the map ( google map object ) in question?
I'm using this code:

var parques_mapa = new Maplace({
            locations: data2,
            map_div: '#lemapa_parques',
            map_options: {
                set_center: [37.10,-8.67],
                zoom: 13
            },
            controls_type: 'list',
            controls_on_map: false
        }).Load();
        console.log(parques_mapa);

parques_mapa variable issues undefined.

Is there any other way around I can make this work?

Thank you for your help in advance.

Best Regards
Pedro

[enhancement] Add missing bower.json.

Hey, maintainer(s) of danielemoraschi/maplace.js!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library danielemoraschi/maplace.js is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "danielemoraschi/maplace.js",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

show_infowindow not working

I'm adding locations to my map however I only want the markers to appear at first and then show the info window once the user clicks on the marker.

Here's what my location definition looks like:

var LocsA = [
{
    lat: 45.9,
    lon: 10.9,
    show_infowindow: false,
    title: 'Marker 1',
    html: '<h3>Content A1</h3>'
}];

Unfortunately, when I refresh the page, the infowindow appears automatically even before the user clicks on the marker. Is it supposed to happen this way?

attivare la ricerca dei paesi

Come è possibile attivare la funzione per la ricerca in tempo reale di indirizzo ?
es:
https://developers.google.com/maps/documentation/javascript/examples/places-searchbox

Grazie e complimenti per l'ottimo lavoro!

Return marker information after change it

Hi, first of all I have to say that I don

How do I hide locations in menu?

Hi Daniel,

Great plug-in. It's a massive help. I'm wondering how I can choose to only show some of my locations in the menu? Is this what the ShowOnMenu method does?

Thanks, Simon

Return marker information after change it

Hi, first of all I have to say that I don't speak English, so I'll try to describe my problem and hope that you can understand it.

I'm using the maplace with route, and the map's loading correctly, but when I try to get the markers of the map, I just can get the original locations that I put on the map loading.

Here's the code:

$(function() {
var LocsD = [
{
lat: -29.663671,
lon: -51.117787,
title: 'teste',
html: 'test'
},
{
lat: -29.676925,
lon: -51.113809
}
];

var m = new Maplace({
    show_markers: false,
    generate_controls: false,
    map_div: '#gmap-route',
    locations: LocsD,
    type: 'directions',
    draggable: true,
    directions_panel: '#route',
    afterRoute: function(distance) {
        $('#km').text(': '+(distance/1000)+'km')
    },
});

m.Load(); 

$( "#rotasForm" ).submit(function( event ) {
      $('#latitudeInicial').val( m.markers[0].position.lat() );
      $('#latitudeFinal').val( m.markers[1].position.lat() );         
      $('#longitudeInicial').val( m.markers[0].position.lng() );
      $('#longitudeFinal').val( m.markers[1].position.lng() );
    });

});

With that code, on the submit of form #rotasForm, I change the value of some inputs (#latitudeInicial, #latitudeFinal, #longitudeInicial and #longitudeFinal) with the value of the markers of the map. Of course I'm using the map with the reference "m", that have the marker's originals values.
I want to know how can I get the value of the markers after change them. Do I have a way to do this?

Is it possible to uncenter a location?

For example, i would like to use Locations: [{... , ...}] and map_options{set_center: [... , ...]}

Is there an alternative?

Thanks!

Possible to add circles to markers?

Would it be possible to add Circles to maps? I'm looking for something that will allow me to put radius circles around markers and the official API makes it a little harder than it really needs to be.

Addresses vs lat long

Is there a way to use street addresses rather than lat & long to place the markers on the map?

multilayer

multilayer
how can I merge markers, road, and polylines on a single card?
thank you in advance

How to fire beforeOpenInfowindow event?

Hello! First of all, thank you for making this library, it really helps to handle gmaps easily.

I don't know where or how fire events like beforeOpenInfowindow. Could someone post a snippet or example about, please? Thanks in advance.

Best,

Juan Pablo

Zoom level being ignored

Hi, when I have a lot of markers, the zoom level on initialising the map (in map_options) is ignored. Is there a way to force the initial zoom level rather than it expanding out to fit all the markers in?

It works pretty well ^_^, can I disable zooming with mouse wheel?

It works pretty well ^_^, can I disable zooming with mouse wheel? It's very annoying, the map zooms everytime I scrolling down the page with mouse wheel.

Direct link

Hello, I would like to add a direct link when click on the pointer (icon) but looks like not working
how I can insert it I tried to use
google.maps.event.addListener(marker, 'click', function() {
window.location.href = marker.url;});
with no succes.
tks in advance

Scroll bar in infowindow

I'm using the map with the menu above the map in list format.

I've put the full street address in the infowindow like this:

html: '

Headquarters
123434 N West Services Drive
Minneapolis, MN 55449-7260

', (using paragraphs and break tags)

On the initial rendering of the first map, the infowindow looks great. Upon clicking on another location, the infowindow is smaller (not as wide) and scroll bars appear. If I go back to the first map (via the menu), that infowindow also has scroll bars.

If I remove the break tags, the infowindow becomes much wider, but last few characters of the address wrap to the next line with the bottom of the text of the 2nd line partially hidden. There are no scroll bars but it will scroll up and down.

I'm not certain I will actually use the full address in this window, I have to wait for the client to confirm.

Thanks.

BTW this is a great tool. Thank you!

Disable Autocenter when click on a Marker

Is it possible to disable the "auto-center" movement when I click on a marker?

I tried to use .setCenter() but it is just a googleMaps function, not a Maplace function.

Any solution? thanks!

only this map i want help me.

Dear Friend,

Please check the attachment, i want only this map on my page, i try from your sample after edited, but those both maps are showing, if i delete one, rest of one not display.

Thank you.

Map doesnt show if parent was invisible on init

I have a map that is hidden on load, because it is placed in an invisible tab. If the tab content eventually becomes visible, the .canvas_map div has the css properties width:0 and height:0. I suppose this is because the parent element cannot be hidden for height() to work correctly.

Add semver tags for bower?

Wanted to know if you'd be able to begin tagging this project? I've added it to the registry, so it just now needs the tags to fetch.

thanks

maplace and wordpress

Hi
How can i insert Maplace in Wordpress ?

Filterable List

I've used maplace on a couple of projects and thinks just great! Thanks for making it available.

I'm wondering if it is possible to maek menu list filterable by group such as restaurants, schools, etc.?

It would be a combination of menu demo you have on your site and something like this http://www.geocodezip.com/v2_MarkerCheckBoxes.asp

Thanks!

marker move in real time

trying to move marker in real time, without refreshing or .Load()ing.

i can center the map to the new position, but the marker/icon isn't following.
any suggestions?

so far i have
maplace.markers[0].lat = coordLat;
maplace.markers[0].lon = coordLong;
maplace.markers[0].zoom = "16";
maplace.markers[0].icon = "images/marker.png";
maplace.markers[0].position.d = coordLat;
maplace.markers[0].position.e = coordLong;

directions_options unitSystem error

When i use the directions_options parameter

unitSystem: 'IMPERIAL',
or
unitSystem: 'METRIC',

It throws me an error:

Uncaught Error: Invalid value for property : IMPERIAL

Initial center and zoom ignored

Hi in the example the zoom and center of a map can be centered with:
map_options: {
set_center: [45.9, 10.9],
zoom: 8
}
But when I try this with:
new Maplace({
map_div : s.mapSelector
, controls_type : 'list'
, locations : s.$map.data('locations')
, controls_on_map : false
, map_options: {
set_center: [45.9, 10.9],
zoom: 8
}
, controls_cssclass: s.filterContentSelector
// click on new marker
, afterShow: function(index, location, marker) {
var targetId = location.id; $(targetId).addClass("b_active").siblings().removeClass('b_active');
}
});

Nothing happens. I get a position which is somewhere over the atlantic without a zoom level.

Control position

Thanks for this great helper. It's saved me so much of time.

One question, though. I'm having a bit of difficulty (re)positioning the controller to the left hand side of my map.

controls_position: 'LEFT_TOP' doesn't seem to work. Should it? Or is there another way to do this?

Thanks again,
Simon

two streets within one city tab

Hi, thanks for nice map project. i have an issue as for the tabs. Let's say i have my tabs with three cities: | City 1 | City 2 | City 3| . Each city shows its own one street ecxept | city 2 | that shows two streets with markers. My question is how to show two streets with its markers within one tab.

here is my code:

//pointers
var LocsB = [

{lat: 50.449707, lon: 30.505129, title: 'City 1', 
 html: [ '<h4>Street 1</h4>'].join(''), zoom: 15},

 {lat: 49.069074, lon: 33.411325, title: 'City 2',
 html: ['<h4>Street 1</h4>','<h4>Street 2</h4>'].join(''), zoom: 15},

 {lat:49.068078, lon: 33.417038, title: 'City 3',
 html: ['<h4>Street 1</h4>'].join(''), zoom: 15}
];

//mapPlace
new Maplace({
locations: LocsB,
map_div: '#gmap-tabs',
controls_div: '#controls-tabs',
controls_type: 'list',
controls_on_map: false,
show_infowindow: true,
start: 1,
afterShow: function(index, location, marker) {
$('#info').html(location.html);
}
}).Load();

//script

<script src="http://maps.google.com/maps/api/js?sensor=false&libraries=geometry&v=3.7"></script> <script src="js/maplace.min.js"></script> <script src="http://code.jquery.com/jquery-1.9.0.min.js"></script> <script src="js/pointers.js"></script> <script src="js/mapPlace.js"></script>

switching between location object causes error

When trying to swap between objects of location data I get this error:

Uncaught RangeError: Maximum call stack size exceeded

not sure if I'm doing it wrong but I'm using your Mixed / Ajax example and 'Load()' to load in new locations and it won't work.

Any ideas?

Thanks!!

Styling The List

Can I style the list further then the examples?

Right now I am using the menu example with 3 groups

I concat three groups and it works fine but the list is displayed

<ol>
<li>Group 1 Item 1</li>
<li>Group 1 Item 2</li>
<li>Group 1 Item 3</li>
<li>Group 2 Item 1</li>
<li>Group 2 Item 2</li>
<li>Group 2 Item 3</li>
<li>Group 3 Item 1</li>
<li>Group 3 Item 2</li>
<li>Group 3 Item 3</li>
</ol>

I want each group in their own list with a header possibly

<ol>
<li class="headerG1">Group 1 Header</li>
<li>Group 1 Item 1</li>
<li>Group 1 Item 2</li>
<li>Group 1 Item 3</li>
</ol>
<ol>
<li class="headerG2">Group 1 Header</li>
<li>Group 2 Item 1</li>
<li>Group 2 Item 2</li>
<li>Group 2 Item 3</li>
</ol>
<ol>
<li class="headerG3">Group 1 Header</li>
<li>Group 3 Item 1</li>
<li>Group 3 Item 2</li>
<li>Group 3 Item 3</li>
</ol>

Is there a Method I am missing? If so can you point me in the right direction?
I believe I can make them align side by side through the regular css. I didn't want to do anything in the js file except it was easy to change the ul to a ol.

BTW this is a great plugin easy for a limited js editor like my self. Thanks

Localization Support

Hello,

I would like to know if it's possible to localize the map generated?
I have tryed to add the language parameter on Google Maps API inclusion but it doesn't work (map is always generated in english).

Regards

Mixed / Ajax

First thank this great plugin for jquery. I have a question that keeps me awake. I am making an app in jquery mobile and I'm trying to adapt a menu in the footer to allow changing of maps, as in the example have "Mixed / Ajax". But I can not see the map. I show the code to you to check where it can be the fault.

I would appreciate your help.
Thank you.

<title>Mapas</title>

    <!-- FontAwesome - http://fortawesome.github.io/Font-Awesome/ -->
    <link rel="stylesheet" href="css/font-awesome.min.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>

    <!-- jQueryMobileCSS - original without styling -->
    <link rel="stylesheet" href="css/jquerymobile.css" />

    <!-- nativeDroid core CSS -->
    <link rel="stylesheet" href="css/jquerymobile.nativedroid.css" />

    <!-- nativeDroid: Light/Dark -->
    <link rel="stylesheet" href="css/jquerymobile.nativedroid.light.css"  id='jQMnDTheme' />

    <!-- nativeDroid: Color Schemes -->
    <link href="css/jquerymobile.nativedroid.color.green.css" rel="stylesheet" type="text/css" id='jQMnDColor' />


    <style>
        #content {
            padding: 0;
            position : absolute !important;
            top : 50px !important;
            right : 0;
            bottom : 62px !important;
            left : 0 !important;
            }

    </style>        
    <!-- jQuery / jQueryMobile Scripts -->

    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
    <script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>


       <script type="text/javascript">
                var maplace = new Maplace({
                    map_div: '#gmap-mixed',
                    controls_div: '#controls-mixed',
                    controls_type: 'list',
                    controls_on_map: false
                });

                $('#tabs a').click(function(e) {
                    e.preventDefault();
                    var index = $(this).attr('data-load');
                    showGroup(index);
                });

                function showGroup(index) {
                    var el = $('#g'+index);
                    $('#tabs li').removeClass('active');
                    $(el).parent().addClass('active');
                    $.getJSON('data/ajax.php', { type: index }, function(data) {
                        //loads data into the map
                        maplace.Load({
                            locations: data.locations,
                            view_all_text: data.title,
                            type: data.type,
                            force_generate_controls: true
                        });
                    });
                }

                showGroup(0);
            </script>

<div data-role="page">


       <body data-nativedroid-progress-animation='6'>

Volver

Alojamiento

Menu

<div data-role="panel" id="mypanel" data-theme="b">
    <ul data-role="listview">
        <li data-role="list-divider">Menu</li>
        <li data-icon="home"><a href="index.html">Inicio</a></li>
        <li data-icon="user"><a href="01_club.html">Club Birding</a></li>
        <li data-icon="check"><a href="02_socios.html">Planifica tu ruta</a></li>
        <li data-icon="map-marker"><a href="#">Rutas</a></li>
        <li data-icon="flag-checkered"><a href="#">Mapa de rutas</a></li>
        <li data-icon="picture"><a href="#">H&aacute;bitat</a></li>
        <li data-icon="camera"><a href="#">Especies</a></li>
        <li data-icon="volume-up"><a href="#">Sonidos</a></li>
    </ul>
</div>

• Group A
• Group B
• Group C
• Group D
• Group E


    <script src="js/nativedroid.script.js"></script>
        <script src="http://maps.google.com/maps/api/js?sensor=false&amp;libraries=geometry&amp;v=3.7?1343675510"></script>
<script src="javascripts/libs.min.js?v=0.1.2b"></script>

<script src="src/maplace.min.js?v=0.1.2c"></script>

<script src="data/points.js?v=0.1.2b"></script> 
<script src="javascripts/app.js?v=0.1.2b"></script>


</body>

Help setting up script.

Dear Daniele,

I am new to JQuery and sorts, so I have some trouble using your script. You could hint at what is wrong with my code?

I downloaded the latest version from your homepage and integrated it like that:

<!DOCTYPE html>
<html lang="en">
    <head>
        <script type="text/javascript" src="js/jquery-1.10.2.min.js" ></script>
        <script type="text/javascript" src="js/maplace.js"></script>
        <script src="http://maps.google.com/maps/api/js?sensor=false&libraries=geometry&v=3.7">/script> 
<script>
    $(function() {
    var maplace = new Maplace(); 
    maplace.Load(); 
    });
</script>
</head>
<body>
<div id="gmap"></div>
</body>
</html>

maplace.js and the jquery paths are correct.
Unfortunately, I cannot see anything.

Do you happen to know what happened, or what was wrong?

Thanks a lot in advance!

Single marker

How to display single marker and add set center on this marker.

please delete

Mixing polygons and single markers on same map

Is this possible? I tried to use the AddLocations() method before Load() and it is adding up to the polygon.

var poly = [{ ... }];
var data = [{
lat: 45.9,
lon: 10.9,
title: 'Single marker',
html: 'Single marker',
zoom: 6,
icon: 'http://commercealouergrenoble.com/images/Map-Marker-Marker-Outside-Azure-icon.png'
}];

var ullist = new Maplace({
map_div: '#gmap',
locations: poly,
controls_cssclass: 'custom-css',
type: 'polygon',
draggable: false,
map_options: {
set_center: [45.9, 10.9],
zoom: 8
},
view_all: true,
generate_controls: false
});

ullist.AddLocations(data);
ullist.Load();

image: http://cl.ly/image/3R1I2S3f1Z33

addLocations without re-center/re-zoom

Hi,

Everytime i call addLocations or add locations via Load(options) the map resets the zoom to the boundaries according to the markers.

It is possible to disable this? Like, add markers but no re-center/re-pan/re-zoom?