/    Sign up×
Community /Pin to ProfileBookmark

Need help adding google maps markers

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);
[/code]

I am not used to working with javascript,,,
Thanks on advance

to post a comment
JavaScript

2 Comments(s)

Copy linkTweet thisAlerts:
@sin123May 08.2017 — Thanks for the code.
Copy linkTweet thisAlerts:
@takijonathanNov 01.2017 — Hii! I know I'm typing on an old post, and I'm really new to the forum. But how do I make this code work on a website? Would really appreciate all the help!
×

Success!

Help @math4975 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...