Hi
How can i add google map markers to my site?
the code from the html :
[code]
<script src=”jquery.gmap.js”></script>
<script type=”text/javascript”>
// Full Width
$(“#googlemapsFullWidth”).gMap({
controls: {
draggable: (($.browser.mobile) ? false : true),
panControl: true,
zoomControl: true,
mapTypeControl: true,
scaleControl: true,
streetViewControl: true,
overviewMapControl: true
},
scrollwheel: false,
latitude: 56.024834,
longitude: 10.212024,
zoom: 7
}
);
jQuery(document).ready(function ($) {
jQuery(‘.minimize-section’).click(function (e) {
e.preventDefault();
jQuery(‘.map-info-section’).toggleClass(‘minimized’);
});
});
</script>
</body>
</html>
And the jquery script:
(function($)
{
// Main plugin function
$.fn.gMap = function(options, methods_options)
{
// Optional methods
switch(options)
{
case ‘addMarker’:
return $(this).trigger(
‘gMap.addMarker’,
[methods_options.latitude, methods_options.longitude, methods_options.content, methods_options.icon, methods_options.popup]
);
case ‘centerAt’:
return $(this).trigger(‘gMap.centerAt’, [methods_options.latitude, methods_options.longitude, methods_options.zoom]);
case ‘clearMarkers’:
return $(this).trigger(‘gMap.clearMarkers’);
}
// Build main options before element iteration
var opts = $.extend({}, $.fn.gMap.defaults, options);
// Iterate through each element
return this.each(function()
{
// Create map and set initial options
var $gmap = new google.maps.Map(this);
$(this).data(‘gMap.reference’, $gmap);
// Create new object to geocode addresses
var $geocoder = new google.maps.Geocoder();
// Check for address to center on
if (opts.address)
{
// Get coordinates for given address and center the map
$geocoder.geocode(
{
address: opts.address
}, function(gresult, status)
{
if(gresult && gresult.length) {
$gmap.setCenter(gresult[0].geometry.location);
}
}
);
}else{
// Check for coordinates to center on
if (opts.latitude && opts.longitude)
{
// Center map to coordinates given by option
$gmap.setCenter(new google.maps.LatLng(opts.latitude, opts.longitude));
}
else
{
// Check for a marker to center on (if no coordinates given)
if ($.isArray(opts.markers) && opts.markers.length > 0)
{
// Check if the marker has an address
if (opts.markers[0].address)
{
// Get the coordinates for given marker address and center
$geocoder.geocode(
{
address: opts.markers[0].address
}, function(gresult, status)
{
if(gresult && gresult.length > 0) {
$gmap.setCenter(gresult[0].geometry.location);
}
}
);
}else{
// Center the map to coordinates given by marker
$gmap.setCenter(new google.maps.LatLng(opts.markers[0].latitude, opts.markers[0].longitude));
}
}else{
// Revert back to world view
$gmap.setCenter(new google.maps.LatLng(34.885931, 9.84375));
}
}
}
$gmap.setZoom(opts.zoom);
// Set the preferred map type
$gmap.setMapTypeId(google.maps.MapTypeId[opts.maptype]);
// Set scrollwheel option
var map_options = { scrollwheel: opts.scrollwheel, disableDoubleClickZoom: !opts.doubleclickzoom };
// Check for map controls
if(opts.controls === false){
$.extend(map_options, { disableDefaultUI: true });
}else if (opts.controls.length !== 0){
$.extend(map_options, opts.controls, { disableDefaultUI: true });
}
$gmap.setOptions(map_options);
// Create new icon
var gicon = new google.maps.Marker();
var marker_icon;
var marker_shadow;
// Set icon properties from global options
marker_icon = new google.maps.MarkerImage(opts.icon.image);
marker_icon.size = new google.maps.Size(opts.icon.iconsize[0], opts.icon.iconsize[1]);
marker_icon.anchor = new google.maps.Point(opts.icon.iconanchor[0], opts.icon.iconanchor[1]);
gicon.setIcon(marker_icon);
if(opts.icon.shadow)
{
marker_shadow = new google.maps.MarkerImage(opts.icon.shadow);
marker_shadow.size = new google.maps.Size(opts.icon.shadowsize[0], opts.icon.shadowsize[1]);
marker_shadow.anchor = new google.maps.Point(opts.icon.shadowanchor[0], opts.icon.shadowanchor[1]);
gicon.setShadow(marker_shadow);
}
// Bind actions
$(this).bind(‘gMap.centerAt’, function(e, latitude, longitude, zoom)
{
if(zoom) {
$gmap.setZoom(zoom);
}
$gmap.panTo(new google.maps.LatLng(parseFloat(latitude), parseFloat(longitude)));
});
// Clear Markers
// Loop through marker array
for (var j = 0; j < opts.markers.length; j++)
{
// Get the options from current marker
marker = opts.markers[j];
// Check if address is available
if (marker.address)
{
// Check for reference to the marker’s address
if (marker.html === ‘_address’) {
marker.html = marker.address;
}
// Get the point for given address
$geocoder.geocode({
address: marker.address
}, geocode_callback(marker));
}else{
$(this).trigger(‘gMap.addMarker’, [marker.latitude, marker.longitude, marker.html, marker.icon, marker.popup]);
}
}
});
};
// Default settings
$.fn.gMap.defaults = {
address: ”,
latitude: 0,
longitude: 0,
zoom: 1,
markers: [],
controls: [],
scrollwheel: false,
doubleclickzoom: true,
maptype: ‘ROADMAP’,
html_prepend: ‘<div class=”gmap_marker”>’,
html_append: ‘</div>’,
icon: {
image: “http://www.google.com/mapfiles/marker.png”,
shadow: “http://www.google.com/mapfiles/shadow50.png”,
iconsize: [20, 34],
shadowsize: [37, 34],
iconanchor: [9, 34],
shadowanchor: [6, 34]
}
};
})(jQuery);
I am not used to working with javascript,,,
Thanks on advance